SliverPersistentHeader组件实现Flutter吸顶效果

kicinio

已于 2023-07-23 21:37:59 修改

阅读量5k

点赞数

分类专栏： Flutter 文章标签： flutter

于 2023-07-23 21:37:39 首次发布

本文链接：https://blog.csdn.net/kicinio/article/details/131884615

版权

Flutter 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

效果：

20230723-212152-73_Trim

代码：

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

class StickHeaderPage extends StatefulWidget {

  @override
  State<StatefulWidget> createState() {
    // TODO: implement createState
    return _StickHeaderPageState();
  }

}

class _StickHeaderPageState extends State<StickHeaderPage> {

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Scaffold(
      appBar: AppBar(
        title: const Text("Sticky Header"),
      ),
      body: CustomScrollView(
        slivers: [
          _topWidget(),
          _stickyHeader(),
          _listView(),
        ],
        physics: const BouncingScrollPhysics(),
      ),
    );
  }

  Widget _topWidget() {
    return SliverToBoxAdapter(
      child: Container(
        child: Image.network("https://2sc2.autoimg.cn/escimg/g27/M04/5D/0B/f_900x675_0_q87_autohomecar__ChxkmWMVdMCAJZdZAAFU8OPC7Xs588.jpg",
        ),
      ),
    );
  }

  Widget _stickyHeader() {
    return SliverPersistentHeader(
      pinned: true,
      floating: true,
      delegate: _StickyHeaderDelegate(
        minHeight: 50,
        maxHeight: 50,
        child: Container(
          height: 100,
          color: Colors.blue,
          alignment: Alignment.centerLeft,
          child: const Text("Sticky Header", style: TextStyle(fontSize: 20),),
        ),
      ),
    );
  }

  Widget _listView() {
    return SliverList(
      delegate:
        SliverChildBuilderDelegate( (context, index) {
          return Container(
              height: 50,
              color: index % 2 == 0 ? Colors.white : Colors.black12,
              width: double.infinity,
              alignment: Alignment.center,
              child: Text("Item $index"),
            );
        },
        childCount: 50,
      )
    );
  }

}

class _StickyHeaderDelegate extends SliverPersistentHeaderDelegate {

  _StickyHeaderDelegate({
    required this.minHeight,
    required this.maxHeight,
    required this.child,
  });

  final double minHeight;
  final double maxHeight;
  final Widget child;

  @override
  Widget build(BuildContext context, double shrinkOffset, bool overlapsContent) {
    // TODO: implement build
    return SizedBox.expand(child: child,);
  }

  @override
  // TODO: implement maxExtent
  double get maxExtent => maxHeight;

  @override
  // TODO: implement minExtent
  double get minExtent => minHeight;

  @override
  bool shouldRebuild(covariant _StickyHeaderDelegate oldDelegate) {
    // TODO: implement shouldRebuild
    return (
        maxHeight != oldDelegate.maxHeight ||
        minHeight != oldDelegate.minHeight ||
        child != oldDelegate.child
    );
  }