Flutter CustomScrollView 的使用 及 常用的Sliver系列组件

CustomScrollView简介

CustomScrollView是可以使用Sliver来自定义滚动模型（效果）的组件。它可以包含多种滚动模型。包括header，footer，CustomScrollView可以实现把多个彼此独立的可滑动widget组合起来。

CustomScrollView 一"码"当先

  Widget mCustomScrollView() {
    return CustomScrollView(
      slivers: [
        SliverAppBar(
          floating: true,
          title: Text('CustomScrollView Demo'),
          expandedHeight: 300,
          flexibleSpace: Image.network(
            "https://img2.baidu.com/it/u=1977503081,1869926726&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500",
            fit: BoxFit.cover,
          ),
        ),
        SliverList(
            delegate: SliverChildListDelegate([
          Container(
            height: 80,
            color: Colors.primaries[0],
          ),
          Container(
            height: 80,
            color: Colors.primaries[1],
          ),
          Container(
            height: 80,
            color: Colors.primaries[2],
          ),
          Container(
            height: 80,
            color: Colors.primaries[3],
          ),
          Container(
            height: 80,
            color: Colors.primaries[4],
          ),
        ])),
        SliverAppBar(
          pinned: false,
          expandedHeight: 250.0,
          backgroundColor: Colors.blue,
          flexibleSpace: FlexibleSpaceBar(
            background: Image.network(
              "https://img2.baidu.com/it/u=1977503081,1869926726&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500",
              fit: BoxFit.cover,
            ),
          ),
        ),
      ],
    );
  }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49

效果：

CustomScrollView其实就是一个Sliver的载体，里面添加的子widget都必须是Sliver!!!接下来讲重点介绍Sliver

Sliver的概念

Flutter中提出一个Sliver（中文为“薄片”的意思）概念，如果一个可滚动组件支持Sliver模型，那么该滚动可以将子组件分成好多个“薄片”（Sliver），只有当Sliver出现在视口中时才会去构建它，这种模型也称为“基于Sliver的延迟构建模型”。可滚动组件中有很多都支持基于Sliver的延迟构建模型，如ListView、GridView，但是也有不支持该模
的，如SingleChildScrollView。

SliverList和SliverGrid

SliverList只有一个属性：delegate，类型是SliverChildDelegate。SliverChildDelegate是一个抽象类，不能直接使用。Flutter中定义好了两个继承于SliverChildDelegate的类对象，可以直接用，分别是：SliverChildListDelegate和SliverChildBuilderDelegate。

SliverChildListDelegate

先来看SliverChildListDelegate，声明如下：

SliverChildListDelegate(
    this.children, {
    ..
1
2