Flutter Sliver介绍

Flutter中，Sliver是一种高度优化的滚动方案，它可以实现在滚动中显著降低内存占用和CPU负载，使得应用能够处理大量数据。Sliver可以以不同的姿势呈现出来，让你以更高效且更具交互性的方式构建高质量的用户界面。

什么是Sliver？

Sliver是一种轻量级的scrollable widget，它可以在SliverAppBar、SliverList、SliverGrid等widget的支持下，实现不同形式的滚动和展示效果。和普通的widget不同，Sliver在滚动过程中不像ListView或GridView一样，不会一次性将所有子控件实例化和渲染到内存中，而是只会渲染可见区域内的子控件，可大大减少内存占用和渲染批次，提高应用性能。

Sliver基本使用

为了使用Sliver，需要使用SingleChildScrollView或NestedScrollView作为外层widget，才有可能使用Sliver相关的组件：

SingleChildScrollView(
  child: CustomScrollView(
    slivers: <Widget>[
      SliverAppBar(
        // ...
      ),
      SliverList(
        // ...
      ),
    ],
  ),
)

Sliver组件列表

以下是Sliver的一些常用widget:

• SliverAppBar
• SliverList
• SliverFixedExtentList
• SliverGrid
• SliverPadding
• SliverToBoxAdapter

我们将对这些widget进行简要介绍：

SliverAppBar

SliverAppBar是一种特殊的AppBar，可以集成在CustomScrollView中，并以SliverAppBar的形式浮动在页面顶部。SliverAppBar还可以动态修改高度和内边距以及其它属性，用于标识当前屏幕状态以及滚动位置的进度。

SliverList

SliverList是一个将列表数据按照Sliver方式来展示的组件。它和ListView很相似，不同之处是SliverList不会一次性地将所有的子项加到内存，而只会在Visible区域中渲染出子项。

SliverFixedExtentList

每一个子控件高度固定的列表，效率比SliverList更高。它的构造函数如下：

SliverFixedExtentList(
  itemExtent: 50.0,
  delegate: SliverChildBuilderDelegate(
    (BuildContext context, int index) {
      return Container(
        alignment: Alignment.center,
        color: Colors.teal[100 * (index % 9)],
        child: Text('list item $index'),
      );
    },
  ),
);

SliverGrid

SliverGrid和GridView很相似，但SliverGrid的效率比GridView更高，它也会在Visible区域中渲染出子项。可控制每个网格的大小和位置、自适应控制、动态划分等，拥有极强的可扩展性。

SliverPadding

SliverPadding可以在SliverList或SliverGrid中加入Padding，从而让内容形成边框或留下空白边距：

SliverPadding(
  padding: EdgeInsets.all(8.0),
  sliver: SliverList(
    delegate: SliverChildBuilderDelegate(
      (BuildContext context, int index) {
        return Text('This is item $index');
      },
      childCount: 10,
    ),
  ),
)

SliverToBoxAdapter

SliverToBoxAdapter可以将任何非Sliver Widget转换为Sliver，用于解决想把一些单独的控件嵌入到CustomScrollView中的情况。

总结

Sliver是一个在滚动列表性能和体验上非常重要的组件。Flutter在Sliver系列的控件中实现了很多高级功能，其中包括滚动动画、悬浮列表和渐变效果等。了解这些Sliver控件，可以帮助我们开发高效、流畅、高质量的Flutter应用。

参考资料

• https://flutter.io/docs/development/ui/widgets/layout
• https://flutterbyexample.com/slivers-in-flutter
• https://proandroiddev.com/flutter-listview-to-custom-scrollview-edb5a5dd5f80