关于Flutter的中Sliver那些事儿

SliverList的使用

在此之前先来了解一下CustomScrollView，

CustomScrollView是Flutter提供的可以用来自定义滚动效果的组件，它可以像胶水一样将多个Sliver粘合在一起。

假如页面中同时存在一个List和一个Grid，虽然它们看起来是一个整体，但是由于各自的滚动效果是分离的，所以没法保证一致的滚动效果。

而使用CustomScrollView组件作为滚动容器，SliverList和SliverGrid分别替代List和Grid作为CustomScrollView的子组件，滚动效果再由CustomScrollView统一控制，这样就可以了。

但是需要注意的是由于CustomeScrollView的子组件只能是Sliver系列，所以如果你想将一个普通组件塞进CustomScrollView，那么务必将该组件用SliverToBoxAdapter包裹

要同时滚动ListView和GridView的时候可以使用SliverList和SliverGrid

SliverList需要和CustomScrollView配合使用

delegate：SliverChildDelegate 系统提供个两个已经实现好的代理：

SliverChildListDelegate/SliverChildBuilderDelegate

花样多变的SliverPersistentHeader

通过SliverPersistentHeader，我们还可以实现sticky吸顶的效果。

SliverPersistentHeader最重要的一个属性是SliverPersistentHeaderDelegate，为此我们需要实现一个类继承自SliverPersistentHeaderDelegate。

class StickyTabBarDelegate extends SliverPersistentHeaderDelegate {
​
  @override
  double get minExtent => null;
​
  @override
  double get maxExtent => null;
​
  @override
  bool shouldRebuild(SliverPersistentHeaderDelegate oldDelegate) => null;
  
  @override
  Widget build(BuildContext context, double shrinkOffset, bool overlapsContent) => null;
}

可以看到，SliverPersistentHeaderDelegate的实现类必须实现其4个方法。其中：

• minExtent：收起状态下组件的高度；

• maxExtent：展开状态下组件的高度；

• shouldRebuild：类似于react中的shouldComponentUpdate；

• build：构建渲染的内容。

不过SliverPersistentHeader的神奇可远不止如此哦~我们可以通过它自定义一些头部的过渡效果，毕竟SliverAppBar也是通过它实现的，

那么这种效果要如何实现呢？关键就在于build方法中的shrinkOffset属性，它代表当前头部的滚动偏移量。我们可以根据它计算得到当前收起头部的背景颜色以及图标和文案的字体颜色，这样就能根据当前位置得到过渡效果啦~

源码地址https://blog.51cto.com/jianguo/5022953