关于Flutter的中Sliver那些事儿

516 阅读2分钟

这是我参与2022首次更文挑战的第37天,活动详情查看:2022首次更文挑战

作者:坚果

公众号:"大前端之旅"

华为云享专家,InfoQ签约作者,阿里云专家博主,51CTO博客首席体验官,开源项目GVA成员之一,专注于大前端技术的分享,包括Flutter,小程序,安卓,VUE,JavaScript。

SliverList的使用

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

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

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

而使用CustomScrollView组件作为滚动容器,SliverListSliverGrid分别替代ListGrid作为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属性,它代表当前头部的滚动偏移量。我们可以根据它计算得到当前收起头部的背景颜色以及图标和文案的字体颜色,这样就能根据当前位置得到过渡效果啦~

源码地址blog.51cto.com/jianguo/502…