6.10 CustomScrollView 和 Slivers

1  Widget buildTwoListView() {
2    var listView = ListView.builder(
3      itemCount: 20,
4      itemBuilder: (_, index) => ListTile(title: Text('$index')),
5    );
6    return Column(
7      children: [
8        Expanded(child: listView),
9        Divider(color: Colors.grey),
10        Expanded(child: listView),
11      ],
12    );
13  }
14}

1Widget buildTwoSliverList() {
2  // SliverFixedExtentList 是一个 Sliver，它可以生成高度相同的列表项。
3  // 再次提醒，如果列表项高度相同，我们应该优先使用SliverFixedExtentList 
4  // 和 SliverPrototypeExtentList，如果不同，使用 SliverList.
5  var listView = SliverFixedExtentList(
6    itemExtent: 56, //列表项高度固定
7    delegate: SliverChildBuilderDelegate(
8      (_, index) => ListTile(title: Text('$index')),
9      childCount: 10,
10    ),
11  );
12  // 使用
13  return CustomScrollView(
14    slivers: [
15      listView,
16      listView,
17    ],
18  );
19}

1// 因为本路由没有使用 Scaffold，为了让子级Widget(如Text)使用
2// Material Design 默认的样式风格,我们使用 Material 作为本路由的根。
3Material(
4  child: CustomScrollView(
5    slivers: <Widget>[
6      // AppBar，包含一个导航栏.
7      SliverAppBar(
8        pinned: true, // 滑动到顶端时会固定住
9        expandedHeight: 250.0,
10        flexibleSpace: FlexibleSpaceBar(
11          title: const Text('Demo'),
12          background: Image.asset(
13            "./imgs/sea.png",
14            fit: BoxFit.cover,
15          ),
16        ),
17      ),
18      SliverPadding(
19        padding: const EdgeInsets.all(8.0),
20        sliver: SliverGrid(
21          //Grid
22          gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
23            crossAxisCount: 2, //Grid按两列显示
24            mainAxisSpacing: 10.0,
25            crossAxisSpacing: 10.0,
26            childAspectRatio: 4.0,
27          ),
28          delegate: SliverChildBuilderDelegate(
29            (BuildContext context, int index) {
30              //创建子widget
31              return Container(
32                alignment: Alignment.center,
33                color: Colors.cyan[100 * (index % 9)],
34                child: Text('grid item $index'),
35              );
36            },
37            childCount: 20,
38          ),
39        ),
40      ),
41      SliverFixedExtentList(
42        itemExtent: 50.0,
43        delegate: SliverChildBuilderDelegate(
44          (BuildContext context, int index) {
45            //创建列表项
46            return Container(
47              alignment: Alignment.center,
48              color: Colors.lightBlue[100 * (index % 9)],
49              child: Text('list item $index'),
50            );
51          },
52          childCount: 20,
53        ),
54      ),
55    ],
56  ),
57);

1CustomScrollView(
2  slivers: [
3    SliverToBoxAdapter(
4      child: SizedBox(
5        height: 300,
6        child: PageView(
7          children: [Text("1"), Text("2")],
8        ),
9      ),
10    ),
11    buildSliverFixedList(),
12  ],
13);

1const SliverPersistentHeader({
2  Key? key,
3  // 构造 header 组件的委托
4  required SliverPersistentHeaderDelegate delegate,
5  this.pinned = false, // header 滑动到可视区域顶部时是否固定在顶部
6  this.floating = false, // 正文部分介绍
7})

1abstract class SliverPersistentHeaderDelegate {
2
3  // header 最大高度；pined为 true 时，当 header 刚刚固定到顶部时高度为最大高度。
4  double get maxExtent;
5  
6  // header 的最小高度；pined为true时，当header固定到顶部，用户继续往上滑动时，header
7  // 的高度会随着用户继续上滑从 maxExtent 逐渐减小到 minExtent
8  double get minExtent;
9
10  // 构建 header。
11  // shrinkOffset取值范围[0,maxExtent],当header刚刚到达顶部时，shrinkOffset 值为0，
12  // 如果用户继续向上滑动列表，shrinkOffset的值会随着用户滑动的偏移减小，直到减到0时。
13  //
14  // overlapsContent：一般不建议使用，在使用时一定要小心，后面会解释。
15  Widget build(BuildContext context, double shrinkOffset, bool overlapsContent);
16  
17  // header 是否需要重新构建；通常当父级的 StatefulWidget 更新状态时会触发。
18  // 一般来说只有当 Delegate 的配置发生变化时，应该返回false，比如新旧的 minExtent、maxExtent
19  // 等其它配置不同时需要返回 true，其余情况返回 false 即可。
20  bool shouldRebuild(covariant SliverPersistentHeaderDelegate oldDelegate);
21
22  // 下面这几个属性是SliverPersistentHeader在SliverAppBar中时实现floating、snap 
23  // 效果时会用到，平时开发过程很少使用到，读者可以先不用理会。
24  TickerProvider? get vsync => null;
25  FloatingHeaderSnapConfiguration? get snapConfiguration => null;
26  OverScrollHeaderStretchConfiguration? get stretchConfiguration => null;
27  PersistentHeaderShowOnScreenConfiguration? get showOnScreenConfiguration => null;
28
29}

1typedef SliverHeaderBuilder = Widget Function(
2    BuildContext context, double shrinkOffset, bool overlapsContent);
3
4class SliverHeaderDelegate extends SliverPersistentHeaderDelegate {
5  // child 为 header
6  SliverHeaderDelegate({
7    required this.maxHeight,
8    this.minHeight = 0,
9    required Widget child,
10  })  : builder = ((a, b, c) => child),
11        assert(minHeight <= maxHeight && minHeight >= 0);
12
13  //最大和最小高度相同
14  SliverHeaderDelegate.fixedHeight({
15    required double height,
16    required Widget child,
17  })  : builder = ((a, b, c) => child),
18        maxHeight = height,
19        minHeight = height;
20
21  //需要自定义builder时使用
22  SliverHeaderDelegate.builder({
23    required this.maxHeight,
24    this.minHeight = 0,
25    required this.builder,
26  });
27
28  final double maxHeight;
29  final double minHeight;
30  final SliverHeaderBuilder builder;
31
32  @override
33  Widget build(
34    BuildContext context,
35    double shrinkOffset,
36    bool overlapsContent,
37  ) {
38    
39    //测试代码：如果子组件设置了key，则打印日志
40    if (child.key != null) {
41      print('${child.key}: shrink: $shrinkOffset，overlaps:$overlapsContent');
42    }
43    
44    // 让 header 尽可能充满限制的空间；宽度为 Viewport 宽度，
45    // 高度随着用户滑动在[minHeight,maxHeight]之间变化。
46    return SizedBox.expand(
47      child: builder(context, shrinkOffset, overlapsContent),
48    );
49  }
50
51  @override
52  double get maxExtent => maxHeight;
53
54  @override
55  double get minExtent => minHeight;
56
57  @override
58  bool shouldRebuild(SliverHeaderDelegate old) {
59    return old.maxExtent != maxExtent || old.minExtent != minExtent;
60  }
61}

1class PersistentHeaderRoute extends StatelessWidget {
2  @override
3  Widget build(BuildContext context) {
4    return CustomScrollView(
5      slivers: [
6        buildSliverList(),
7        SliverPersistentHeader(
8          pinned: true,
9          delegate: SliverHeaderDelegate(//有最大和最小高度
10            maxHeight: 80,
11            minHeight: 50,
12            child: buildHeader(1),
13          ),
14        ),
15        buildSliverList(),
16        SliverPersistentHeader(
17          pinned: true,
18          delegate: SliverHeaderDelegate.fixedHeight( //固定高度
19            height: 50,
20            child: buildHeader(2),
21          ),
22        ),
23        buildSliverList(20),
24      ],
25    );
26  }
27
28  // 构建固定高度的SliverList，count为列表项属相
29  Widget buildSliverList([int count = 5]) {
30    return SliverFixedExtentList(
31      itemExtent: 50,
32      delegate: SliverChildBuilderDelegate(
33        (context, index) {
34          return ListTile(title: Text('$index'));
35        },
36        childCount: count,
37      ),
38    );
39  }
40
41  // 构建 header
42  Widget buildHeader(int i) {
43    return Container(
44      color: Colors.lightBlue.shade200,
45      alignment: Alignment.centerLeft,
46      child: Text("PersistentHeader $i"),
47    );
48  }
49}