Flutter（78）：Sliver组件之SliverPersistentHeader

Flutter教学目录持续更新中

Github源代码持续更新中

1.SliverPersistentHeader介绍

可以根据滚动而变大变小的组件，SliverAppBar就是基于这个实现的

2.SliverPersistentHeader属性

• delegate：SliverPersistentHeaderDelegate
• pinned = false：SliverPersistentHeader介绍收缩到最小高度的时候SliverPersistentHeader介绍是否可见，
  true：SliverPersistentHeader介绍会以折叠高度固定显示在头部，false：缩小到折叠高度后滑出页面
• floating = false：true 的时候下滑先展示SliverPersistentHeader介绍，展示完成后才展示其他滑动组件内容

3.使用

这里需要自己实现SliverPersistentHeaderDelegate，SliverAppBar也是基于这个实现的，只是逻辑更复杂

  _mySliverAppBar() {
    return SliverAppBar(
      title: Text('SliverPersistentHeader'),
      expandedHeight: 250,
      flexibleSpace: FlexibleSpaceBar(
        background: Image.network(
          ImageUrlConstant.imageUrl1,
          fit: BoxFit.cover,
        ),
        collapseMode: CollapseMode.parallax,
      ),
    );
  }

  _mySliverChildBuilderDelegate() {
    return SliverChildBuilderDelegate(
      (BuildContext context, int index) {
        return Container(
          height: 80,
          color: Colors.primaries[index % 11],
        );
      },
      childCount: 30,
    );
  }

  bool _pinned = true;
  bool _floating = true;

  @override
  Widget build(BuildContext context) {
    return Container(
      color: Colors.white,
      child: CustomScrollView(
        slivers: [
          _mySliverAppBar(),
          SliverPersistentHeader(
            delegate: _MySliverPersistentHeaderDelegate(),
            pinned: _pinned,
            floating: _floating,
          ),
          SliverList(
            delegate: _mySliverChildBuilderDelegate(),
            // delegate: _mySliverChildListDelegate(),
          ),
        ],
      ),
    );
  }
}

class _MySliverPersistentHeaderDelegate extends SliverPersistentHeaderDelegate {
  final double _minExtent = 80;
  final double _maxExtent = 250;

  @override
  Widget build(
      BuildContext context, double shrinkOffset, bool overlapsContent) {
    //创建child子组件
    //shrinkOffset：child偏移值minExtent~maxExtent
    //overlapsContent：SliverPersistentHeader覆盖其他子组件返回true，否则返回false
    print('shrinkOffset = $shrinkOffset overlapsContent = $overlapsContent');
    return Container(
      alignment: Alignment.center,
      decoration: BoxDecoration(
        image: DecorationImage(
          image: NetworkImage(ImageUrlConstant.imageUrl1),
          fit: BoxFit.cover,
        ),
      ),
    );
  }

  //SliverPersistentHeader最大高度
  @override
  double get maxExtent => _maxExtent;

  //SliverPersistentHeader最小高度
  @override
  double get minExtent => _minExtent;

  @override
  bool shouldRebuild(covariant _MySliverPersistentHeaderDelegate oldDelegate) {
    return false;
  }

image.png

下一节：Scroll组件之GridView

Flutter（79）：Scroll组件之GridView

Flutter教学目录持续更新中

Github源代码持续更新中