https://docs.flutter.io/flutter/widgets/GridView-class.html

CustomScrollView是可以使用Sliver来自定义滚动模型（效果）的组件。它可以包含多种滚动模型。

使用场景：

  • 有一个页面，顶部需要一个GridView，底部需要一个ListView，而要求整个页面的滑动效果是统一的，即它们看起来是一个整体。如果使用GridView+ListView来实现的话，就不能保证一致的滑动效果，因为它们的滚动效果是分离的，所以这时就需要一个”胶水”，把这些彼此独立的可滚动组件”粘”起来。
  • ListView和GridView相互嵌套场景，ListView嵌套GridView时，需要给GridView指定高度，但我们希望高度随内容而变化（不指定），ListView和GridView使用同一个滚动效果。
  • 一个页面顶部是AppBar，然后是GridView，最后是ListView，这3个区域以整体来滚动，AppBar具有吸顶效果。

CustomScrollView的功能就相当于“胶水”，将多个组件粘合在一起，具统一的滚动效果。

可滚动组件的Sliver版

Sliver有细片、薄片之意，在Flutter中，Sliver通常指可滚动组件子元素（就像一个个薄片一样）。但是在CustomScrollView中，需要粘起来的可滚动组件就是CustomScrollView的Sliver了，如果直接将ListView、GridView作为CustomScrollView是不行的，因为它们本身是可滚动组件而并不是Sliver！因此，为了能让可滚动组件能和CustomScrollView配合使用，Flutter提供了一些可滚动组件的Sliver版，如SliverList、SliverGrid等。

实际上Sliver版的可滚动组件和非Sliver版的可滚动组件最大的区别就是前者不包含滚动模型（自身不能再滚动），而后者包含滚动模型 ，也正因如此，CustomScrollView才可以将多个Sliver”粘”在一起，这些Sliver共用CustomScrollView的Scrollable，所以最终才实现了统一的滑动效果。

Sliver系列Widget比较多，我们不会一一介绍，读者只需记住它的特点，需要时再去查看文档即可。上面之所以说“大多数”Sliver都和可滚动组件对应，是由于还有一些如SliverPadding、SliverAppBar等是和可滚动组件无关的，它们主要是为了结合CustomScrollView一起使用，这是因为CustomScrollView的子组件必须都是Sliver。

API 定义

  1. CustomScrollView({
  2.   Key key,
  3.   Axis scrollDirection = Axis.vertical,
  4.   bool reverse = false,
  5.   ScrollController controller,
  6.   bool primary,
  7.   ScrollPhysics physics,
  8.   bool shrinkWrap = false,
  9.   Key center,
  10.   double anchor = 0.0,
  11.   double cacheExtent,
  12.   this.slivers = const <Widget>[],
  13.   int semanticChildCount,
  14.   DragStartBehavior dragStartBehavior = DragStartBehavior.start,
  15.   String restorationId,
  16.   Clip clipBehavior = Clip.hardEdge,
  17. })

示例1：相互嵌套场景

在实际业务场景中经常见到这样的布局，顶部是网格布局（GridView），然后是列表布局（ListView），滚动的时候做为一个整体，此场景是无法使用GridView+ListView来实现的，而是需要使用CustomScrollView+SliverGrid+SliverList来实现，实现代码如下：
image.png

  1. CustomScrollView(
  2.   slivers: [
  3.     SliverGrid.count(
  4.       crossAxisCount: 4,
  5.       childAspectRatio: 2,
  6.       children: List.generate(
  7.         8,
  8.         (index) => Container(
  9.           color: Colors.primaries[index % Colors.primaries.length],
  10.           child: Text('$index', textScaleFactor: 2),
  11.         ),
  12.       ).toList(),
  13.     ),
  14.     SliverList(
  15.       delegate: SliverChildBuilderDelegate(
  16.         (context, index) => Container(
  17.           height: 100,
  18.           color: Colors.primaries[index % Colors.primaries.length],
  19.           child: Text('$index', textScaleFactor: 2),
  20.         ),
  21.         childCount: 20,
  22.       ),
  23.     ),
  24.   ],
  25. ),

示例2：顶部AppBar吸顶示例

实际项目中页面顶部是AppBar，然后是GridView，最后是ListView，这3个区域以整体来滚动，AppBar具有吸顶效果，此效果也是我们经常遇到的，用法如下：
s.gif

  1. CustomScrollView(
  2.   slivers: [
  3.     SliverAppBar(
  4.       pinned: true,
  5.       expandedHeight: 230,
  6.       flexibleSpace: FlexibleSpaceBar(
  7.         title: Text('我是吸顶后的标题'),
  8.         background: Image.network(
  9.           'https://images.h128.com/upload/202012/20/202012201302083641.jpg',
  10.           fit: BoxFit.cover,
  11.         ),
  12.       ),
  13.     ),
  14.     // 下面代码同示例1
  15.     SliverGrid.count(
  16.             ...
  17.     ),
  18.     SliverList(
  19.             ...
  20.     ),
  21.   ],
  22. ),

示例3：Sliver-Sticky效果

fdtdt.gif

tab1.dart
  1. import 'package:flutter/material.dart';
  2. import 'package:app1/demos/tabs/tab1_view1.dart';
  3. import 'package:app1/demos/tabs/tab1_view2.dart';
  4. import 'package:flutter_easyrefresh/easy_refresh.dart';
  6. class Tab1 extends StatefulWidget {
  7.   @override
  8.   _Tab1State createState() => _Tab1State();
  9. }
  11. class _Tab1State extends State<Tab1> with SingleTickerProviderStateMixin {
  12.   ScrollController _scrollViewController;
  13.   int _tabIndex = 0;
  15.   List<Map> _list = [
  16.     {
  17.       'index': 0,
  18.       'title': 'tab1',
  19.       'key': tab1View1ChildKey,
  20.       'child': Tab1View1(key: tab1View1ChildKey)
  21.     },
  22.     {
  23.       'index': 1,
  24.       'title': 'tab2',
  25.       'key': tab1View2ChildKey,
  26.       'child': Tab1View2(key: tab1View2ChildKey)
  27.     },
  28.   ];
  30.   @override
  31.   void initState() {
  32.     super.initState();
  33.     _scrollViewController = ScrollController();
  35.     // 监听滚动事件，打印滚动位置
  36.     // _scrollViewController.addListener(() {
  37.     //   print(_scrollViewController.offset);
  38.     // });
  39.   }
  41.   @override
  42.   Widget build(BuildContext context) {
  43.     print('_tabIndex $_tabIndex');
  44.     var currentTab = _list[_tabIndex];
  46.     return Scaffold(
  47.       body: Container(
  48.         width: double.infinity,
  49.         height: double.infinity,
  50.         child: EasyRefresh.custom(
  51.           scrollController: _scrollViewController,
  52.           firstRefresh: true, // 是否需要首次刷新
  53.           firstRefreshWidget: Center(child: Text('页面加载中...')), // 首次刷新加载组件
  54.           onRefresh: () async {
  55.             await Future.delayed(Duration(seconds: 2), () {
  56.               if (mounted) {
  57.                 var tabViewChild = currentTab['key'].currentState;
  58.                 tabViewChild.getData(isRefresh: true);
  59.               }
  60.             });
  61.           },
  62.           onLoad: () async {
  63.             await Future.delayed(Duration(seconds: 2), () {
  64.               if (mounted) {
  65.                 // var tabViewChild = currentTab['key'].currentState;
  66.                 // tabViewChild.getData(isRefresh: false, onSuccess);
  67.               }
  68.             });
  69.           },
  70.           slivers: [
  71.             SliverAppBar(
  72.               pinned: true,
  73.               elevation: 0,
  74.               expandedHeight: 250,
  75.               backgroundColor: Colors.green,
  76.               flexibleSpace: FlexibleSpaceBar(
  77.                 title: Text('Sliver-sticky效果'),
  78.               ),
  79.             ),
  80.             SliverList(
  81.               delegate: SliverChildListDelegate([
  82.                 Container(
  83.                   height: 200,
  84.                   color: Colors.red,
  85.                   child: Text('asdfs'),
  86.                 ),
  87.               ]),
  88.             ),
  89.             SliverPersistentHeader(
  90.               pinned: true,
  91.               delegate: _buildPersistentHeader(
  92.                 child: Container(
  93.                   color: Colors.yellow,
  94.                   height: 60,
  95.                   child: Row(
  96.                     children: _list
  97.                         .map(
  98.                           (item) => InkWell(
  99.                             child: Text(item['title']),
  100.                             onTap: () {
  101.                               setState(() {
  102.                                 _tabIndex = item['index'];
  103.                                 _scrollViewController.jumpTo(0); //切换tab后，跳回顶部
  104.                               });
  105.                             },
  106.                           ),
  107.                         )
  108.                         .toList(),
  109.                   ),
  110.                 ),
  111.               ),
  112.             ),
  113.             SliverToBoxAdapter(
  114.               child: Container(
  115.                 height: 1000.0,
  116.                 child: currentTab['child'],
  117.               ),
  118.             ),
  119.           ],
  120.         ),
  121.       ),
  122.     );
  123.   }
  124. }
  126. class _buildPersistentHeader extends SliverPersistentHeaderDelegate {
  127.   final child;
  128.   _buildPersistentHeader({@required this.child});
  130.   // shrinkOffset 偏移量
  131.   @override
  132.   Widget build(BuildContext context, double shrinkOffset, bool overlapsContent) {
  133.     return this.child;
  134.   }
  136.   // 最大上滑高度
  137.   @override
  138.   // double get maxExtent => this.child.preferredSize.height;
  139.   double get maxExtent => 60;
  141.   // 最小上滑高度
  142.   @override
  143.   // double get minExtent => this.child.preferredSize.height;
  144.   double get minExtent => 60;
  146.   @override
  147.   bool shouldRebuild(SliverPersistentHeaderDelegate oldDelegate) {
  148.     return true;
  149.   }
  150. }

tab1_view1.dart

  1. import 'package:flutter/material.dart';
  3. GlobalKey<_Tab1View1State> tab1View1ChildKey = GlobalKey();
  5. class Tab1View1 extends StatefulWidget {
  6.   Tab1View1({Key key}) : super(key: key);
  7.   @override
  8.   _Tab1View1State createState() => _Tab1View1State();
  9. }
  11. class _Tab1View1State extends State<Tab1View1> {
  12.   @override
  13.   void initState() {
  14.     super.initState();
  15.     print('view1-initState');
  16.   }
  18.   @override
  19.   void dispose() {
  20.     print('view2-dispose');
  21.     super.dispose();
  22.   }
  24.   getData({isRefresh = false}) {
  25.     print('view1-getData');
  26.   }
  28.   @override
  29.   Widget build(BuildContext context) {
  30.     return Container(
  31.       child: Text('view1'),
  32.     );
  33.   }
  34. }