Flutter Sliver大家族之SliverPersistentHeader()和SliverToBoxAdapter()组件(实现固定头布局)③-CSDN博客

本文链接：https://blog.csdn.net/weixin_44819566/article/details/111606494

Flutter Sliver大家庭之SliverPersistentHeade和SliverToBoxAdapter实现固定头布局③

SliverPersistentHeader
SliverToBoxAdapter

经过一次付出了却得不到回报的爱情之后，免不了对人起了疑心，总提防着。还以为这是自己长大了，也不过是小资产阶级那点保本的策略：不想赔，就把钱藏好，一分也不要拿出来。这个思路，广泛应用于各类情感，这就是通俗爱情。

今日效果图:

效果图(1.1):

SliverPersistentHeader

加粗是必传参数

SliverPersistentHeader参数	类型	说明
delegate	SliverPersistentHeaderDelegate	用来设置布局
pinned	bool	是否固定头布局 (默认false)
floating	bool	是否浮动头布局 (默认false)

SliverPersistentHeader代码:

initSliverPersistentHeader(String title) {
    return SliverPersistentHeader(
        //是否固定头布局 默认false
        pinned: true,
        //是否浮动 默认false
        floating: false,
        //必传参数,头布局内容
        delegate: MySliverDelegate(
          //缩小后的布局高度
          minHeight: 40.0,
          //展开后的高度
          maxHeight: 80.0,
          child: Container(
              color: Colors.redAccent,
              child: Center(
                child: Text(
                  title,
                  style: TextStyle(fontSize: 18, shadows: [
                    Shadow(color: Colors.white, offset: Offset(1, 1))
                  ]),
                ),
              )),
        ));
  }

class MySliverDelegate extends SliverPersistentHeaderDelegate {
  MySliverDelegate({
    @required this.minHeight,
    @required this.maxHeight,
    @required this.child,
  });
  final double minHeight; //最小高度
  final double maxHeight; //最大高度
  final Widget child; //子Widget布局

  @override
  double get minExtent => minHeight;

  @override
  double get maxExtent => max(maxHeight, minHeight);

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

  @override //是否需要重建
  bool shouldRebuild(MySliverDelegate oldDelegate) {
    return maxHeight != oldDelegate.maxHeight ||
        minHeight != oldDelegate.minHeight ||
        child != oldDelegate.child;
  }
}

使用代码:

CustomScrollView(
	....
	slivers: <Widget>[
          initSliverPersistentHeader("第一组"),

          //可隐藏掉哦...
          //initSliverToBoxAdapter(),

          initSliverPersistentHeader("第二组"),

          initSliverList(),
        ],
)

效果图(1.2):

SliverToBoxAdapter

SliverToBoxAdapter参数	类型	说明
child	Widget	子Widget布局

SliverToBoxAdapter代码:

 Widget initSliverToBoxAdapter() {
    return SliverToBoxAdapter(
      child: Container(
        height: 70,
        child: Center(
          child: Text(
            "可隐藏掉哦..",
            style: TextStyle(
              //背景黄色
                shadows: [Shadow(color: Colors.yellow, offset: Offset(1, 1))]),
          ),
        ),
      ),
    );
  }