重识Flutter 在不同的滑动列表场景，请选择合适的Slivers - part2

站长

2023年05月25日 22:50 · 阅读数 21

前言

在上一篇文章中，我们了解了Flutter中的视窗和Sliver，并通过案例知道了CustomScrollView、SliverList、SliverGrid、SliverAppBar等常用的Sliver系列组件。那么现在让我们来探索更多常用的Slivers吧！

SliverToBoxAdapter

如果想在CustomScrollView中添加SizedBox 、Row这样基于Box协议的组件，你会发现不能直接添加，因为在CustomScrollView中需要使用Sliver协议来实现一些东西，这时也许你会Google：我应该如何将Box协议的组件更改为Sliver协议的组件？ 答案是：使用SliverToBoxAdapter即可。

— 在Flutter中，主要有两种布局协议：box协议，和sliver协议。

SliverToBoxAdapter只是一个用于包裹Box协议的Sliver组件。如果你想在CustomScrollView中显示一个子项时，通过它会变得非常方便。

Scaffold(
      body: CustomScrollView(
        slivers: [
          SliverToBoxAdapter(
            child: _helloText,
          )
        ],
      ),
);

Widget get _helloText {
    return Column(
      children: [
        ...List.generate(
            10, (index) => Text("Taxze SliverToBoxAdapter $index")),
        ElevatedButton(
            onPressed: () => print("Say Hello!"), child: Text("Hello"))
      ],
    );
}

重识Flutter 在不同的滑动列表场景，请选择合适的Slivers - part2

但是很多朋友第一次使用该组件时，会出现使用SliverToBoxAdapter去包裹可滚动组件的情况，例如：

SliverToBoxAdapter(
  child: ListView(
    children: [],
  ),
)

出现与sliver滑动方向一致的情况时，这个ListView便没有办法正常工作。

SliverPersistentHeader

在上一篇文章中已经知道了SliverAppBar有很多控制属性，但如果想要控制更多的SliverAppBar的行为或自定义AppBar，又或者想要在列表某处固定一个Item，那么可以使用SliverPersistentHeader。

SliverPersistentHeader有一个必传参数和两个可选参数：

pinned： 默认为false，用于控制item是否固定。例如将自定义的AppBar贴在顶部。
floating： 默认为false，用于控制item是否浮动。例如向下滑动时，自定义的AppBar会展开。
delegate： 必须传入的参数。该参数需要一个实现扩展抽象类的委托类SliverPersistentHeaderDelegate。

现在就来实现一个TaxzePersistentHeaderDelegate，来体验SliverPersistentHeader的强大吧！

重识Flutter 在不同的滑动列表场景，请选择合适的Slivers - part2

可以看到有四个需要实现的方法：

build 需要构建渲染的内容，其中shrinkOffset参数的取值为[0,maxExtent]，当header在顶部时，值为0
maxExtent 展开时组件的高度
minExtent 收起时组件的高度
shouldRebuild 判断Header是否需要重新构建，通常在父级状态更新时触发

class TaxzePersistentHeaderDelegate extends SliverPersistentHeaderDelegate {
  TaxzePersistentHeaderDelegate({
    required this.minSize,
    required this.maxSize,
  });

  final double minSize;
  final double maxSize;

  @override
  Widget build(
      BuildContext context, double shrinkOffset, bool overlapsContent) {
    print(shrinkOffset);
    return Stack(
      fit: StackFit.expand,
      children: [
        ...
      ],
    );
  }

  @override
  bool shouldRebuild(TaxzePersistentHeaderDelegate oldDelegate) =>
      oldDelegate.maxExtent != maxExtent || oldDelegate.minExtent != minExtent;

  @override
  double get maxExtent => maxSize;

  @override
  double get minExtent => minSize;
}

重识Flutter 在不同的滑动列表场景，请选择合适的Slivers - part2

pinned属性和floating属性就不过多介绍了，现在通过一个实例，来看看SliverPersistentHeader能实现什么样的常用功能。效果图：

重识Flutter 在不同的滑动列表场景，请选择合适的Slivers - part2

实现起来也很简单，第一步可以先封装一个通用的HeaderDelegate，方便快速构建 SliverPersistentHeaderDelegate，减少重复代码。

typedef SliverHeaderBuilder = Widget Function(
    BuildContext context, double shrinkOffset, bool overlapsContent);

class TaxzePersistentHeaderDelegate extends SliverPersistentHeaderDelegate {
  TaxzePersistentHeaderDelegate({
    this.minSize = 0,
    required this.maxSize,
    required Widget child,
  })  : builder = ((context, shrinkOffset, overlapsContent) => child),
        assert(minSize <= maxSize && minSize >= 0);

  final double minSize;
  final double maxSize;
  final SliverHeaderBuilder builder;

  @override
  Widget build(
      BuildContext context, double shrinkOffset, bool overlapsContent) {
    Widget child = builder(context, shrinkOffset, overlapsContent);
  	//高度充满父约束，高度在[minHeight,maxHeight]之间变化
    return SizedBox.expand(
      child: child,
    );
  }

  @override
  bool shouldRebuild(TaxzePersistentHeaderDelegate oldDelegate) =>
      oldDelegate.maxExtent != maxExtent || oldDelegate.minExtent != minExtent;

  @override
  double get maxExtent => maxSize;

  @override
  double get minExtent => minSize;
}

使用起来也很简单：

SliverPersistentHeader(
  pinned: true,
  delegate: TaxzePersistentHeaderDelegate(
    maxSize: 100,
    minSize: 60,
    child: buildItemHeader(1),
  ),
),

Widget buildItemHeader(int i) {
    return Container(
      ...
    );
}

额外的知识点：SliverPersistentHeader 组件的设计初衷主要是为了实现 SliverAppBar，所以 SliverAppBar原理其实就像是这样：

CustomScrollView(
  slivers: [
    SliverToBoxAdapter(),
    //防止SliverPersistentHeader成为最顶层的Sliver，以至于无法上拉刷新
    SliverPersistentHeader(
      delegate:XXXDelegate(),
      //固定在顶部
      pinned: true, 
    )
  ],
),

SliverFixedExtentList

SliverFixedExtentList与SliverList用法一样，唯一的区别是SliverFixedExtentList是固定子组件的高度的，所以如果你确定了子组件的高度，那么请选择SliverFixedExtentList，因为它无需计算子组件的布局尺寸，更加高效！而且如果想要跳转到很远的距离时，在加载组件之前就知道尺寸是非常重要的！ 例如：每个item固定为100px，现在要往下滚动2000px，那么只需要跳转20个item，只需要加载第21个item即可。如果子组件的尺寸是不固定的，那么如果想要跳转到2000px的地方，就不得不逐个渲染中间的组件，才能知道2000px的位置。

CustomScrollView(
  slivers: [
    SliverFixedExtentList(
    	//固定尺寸
      itemExtent: 100,
      delegate: SliverChildBuilderDelegate((ctx, index) {
        return Container(
          alignment: Alignment.center,
          color: Colors.primaries[index % Colors.primaries.length],
          child: Text(
            "$index",
            style: const TextStyle(color: Colors.white, fontSize: 18),
          ),
        );
      }),
    )
  ],
),

SliverPrototypeExtentList

知道了子组件的尺寸就能使用SliverFixedExtentList从而提高性能，但是在真实的业务中，子组件固定尺寸的场景较少，一般都是出现在设置页，想要在其他的场景下固定子组件的尺寸是非常麻烦的，但是，有了SliverPrototypeExtentList就简单多了！

为什么说使用它会变得简单呢？在SliverPrototypeExtentList中，有一个prototypeItem属性，可以传入一个组件，但是这个组件不会被渲染到屏幕上，该组件的作用是提供一个尺寸，在SliverPrototypeExtentList中的组件尺寸都会被设置成该组件的尺寸。

SliverPrototypeExtentList(
  prototypeItem: const Text(""),
  delegate: SliverChildBuilderDelegate((ctx, index) {
    return Text("$index");
  }),
)

SliverFillViewport

学习这个组件之前，让我们回想一下PageView组件，PageView每一个子组件都会占据整个父约束，然后可以滑动切换。而在Sliver中，就有SliverFillViewport，它也是PageView的底层原理。在PageView的build函数中就可以看到SliverFillViewport。

重识Flutter 在不同的滑动列表场景，请选择合适的Slivers - part2

SliverFillViewport(
  delegate: SliverChildListDelegate([
    Container(
      color: Colors.red,
    ),
    Container(
      color: Colors.blue,
    ),
    Container(
      color: Colors.green,
    ),
  ]),
),

重识Flutter 在不同的滑动列表场景，请选择合适的Slivers - part2

SliverFillRemaining

SliverFillRemaining与SliverFillViewport很类似，SliverFillViewport是生成的每一个item都占满全屏，而SliverFillRemaining是会自动填充满整个视图。SliverFillRemaining有两个属性：

hasScrollBody 默认为true，该输入用于判断内容是否可以滚动。
fillOverscroll 允许在 iOS 上看到列表过度滚动时的拉伸行为。

CustomScrollView(
  slivers: [
    SliverList(delegate: SliverChildBuilderDelegate((ctx, index) {
      return Container(
        height: 50,
        margin: EdgeInsets.all(10),
        color: Colors.red,
      );
    },childCount: 5)),
    SliverFillRemaining(
      hasScrollBody: true,
      child: FlutterLogo(),
    )
  ],
),

hasScrollBody：true	hasScrollBody:false

SliverPadding

如果想在CustomScrollView中添加Padding时，在没有了解过SliverPadding之前，也许你会想使用SliverToBoxAdapter去包裹一层Padding，但是其实不用那么麻烦，Slivers中就有SliverPadding这样的组件帮助实现需求。使用它也很简单，只需要在需要Padding的Sliver组件外报上一层即可。

SliverPadding(
  padding: EdgeInsets.all(20.0),
  sliver: SliverList(
    delegate: SliverChildBuilderDelegate((ctx, index) {
      return Container(
        color: Colors.primaries[index % Colors.primaries.length],
        height: 50,
      );
    },childCount: 10),
  ),
)

重识Flutter 在不同的滑动列表场景，请选择合适的Slivers - part2

— 在2020 年 9 月 29 日，修复了之前使用SliverPersistentHeader外面包裹SliverPadding导致SliverPersistentHeader 的pinned 属性失效的问题，有兴趣的可以看下这个。

重识Flutter 在不同的滑动列表场景，请选择合适的Slivers - part2

前言

SliverToBoxAdapter

SliverPersistentHeader

SliverFixedExtentList

SliverPrototypeExtentList

SliverFillViewport

SliverFillRemaining

SliverPadding

关于我