CustomScrollView

CustomScrollView 是可以使用 Sliver 来自定义滚动模型（效果）的组件。它可以包含多种滚动模型，举个例子，假设有一个页面，顶部需要一个 GridView，底部需要一个 ListView，而要求整个页面的滑动效果是统一的，即它们看起来是一个整体。如果使用 GridView+ListView 来实现的话，就不能保证一致的滑动效果，因为它们的滚动效果是分离的，所以这时就需要一个”胶水”，把这些彼此独立的可滚动组件”粘”起来，而 CustomScrollView 的功能就相当于“胶水”。

Slivers

Flutter中的 Slivers 大家族基本都是配合CustomScrollView来实现的，除了上面提到的滑动布局嵌套，你还可以使用Slivers来实现页面头部展开/收起、 AppBar随手势变换等等功能。

SliverAppBar

如果你是一名Android开发者，一定使用过CollapsingToolbarLayout这个布局来实现AppBar展开/收起的功能，在Flutter里面则对应SliverAppBar控件。给 SliverAppBar 设置flexibleSpace和expandedHeight属性，就可以轻松完成AppBar展开/收起的功能：

  1. CustomScrollView(
  2.   slivers: <Widget>[
  3.     SliverAppBar(
  4.       actions: <Widget>[
  5.         FlatButton(
  6.           child: Text('click me', style: TextStyle(
  7.                   fontSize: 20,
  8.                   color: Colors.white
  9.                 ),),
  10.         ),
  11.       ],
  12.       title: Text('SliverAppBar'),
  13.       backgroundColor: Theme.of(context).accentColor,
  14.       expandedHeight: 200.0,
  15.       flexibleSpace: FlexibleSpaceBar(
  16.         background: Image.asset('assets/imgs/bg.jpg', fit: BoxFit.cover),
  17.       ),
  18.       // floating: true,
  19.       // snap: true,
  20.       // pinned: true,
  21.     ),
  22.     SliverFixedExtentList(
  23.       itemExtent: 120.0,
  24.       delegate: SliverChildListDelegate(
  25.         [1,2,3,4,5,6,7].map((product) {
  26.           return Container(
  27.             alignment: Alignment.center,
  28.             child: new Text('list item $product'),
  29.           );
  30.         }).toList(),
  31.       ),
  32.     ),
  33.   ],
  34. )

效果：
002.gif

如果设置floating属性为true，那么AppBar会在你做出下拉手势时就立即展开（即使ListView并没有到达顶部），该展开状态不显示flexibleSpace：
003.gif
如果同时设置floating和snap属性为true，那么AppBar会在你做出下拉手势时就立即全部展开（即使ListView并没有到达顶部），该展开状态显示flexibleSpace：
004.gif
如果不想AppBar消失，则设置pinned属性为true即可。
005.gif

SliverList

SliverList 的使用非常简单，只需设置delegate属性即可，我们一般使用SliverChildBuilderDelegate，注意记得设置childCount，否则Flutter没法知道怎么绘制：

  1. CustomScrollView(
  2.   slivers: <Widget>[
  3.     SliverList(
  4.       delegate: SliverChildBuilderDelegate(
  5.             (BuildContext context, int index) {
  6.           return _buildItem(context, products[index]);
  7.         },
  8.         childCount: 3,
  9.       ),
  10.     )
  11.   ],
  12. );

也可以通过下面的方式来设置childCount，如果不设置childCount，Flutter一旦发现delegate的某个index返回了null，就会认为childCount就是这个index。

  1. SliverChildBuilderDelegate(
  2.     (BuildContext context, int index) {
  3.       if(index > products.length){
  4.         return null; // 返回null则将此index设置为childCount
  5.       }
  6.   return _buildItem(context, products[index]);
  7. },

也可以使用SliverChildListDelegate来构建delegate：

  1. SliverChildListDelegate([
  2.   _buildItem(),
  3.   _buildItem(),
  4.   _buildItem(),
  5. ]),

SliverFixedExtentList

SliverFixedExtentList 可以为列表的每一项指定高度(itemExtent):

  1. new SliverFixedExtentList(
  2.   itemExtent: 50.0,
  3.   delegate: new SliverChildBuilderDelegate(
  4.           (BuildContext context, int index) {
  5.         return new Container(
  6.           alignment: Alignment.center,
  7.           color: Colors.lightBlue[100 * (index % 9)],
  8.           child: new Text('list item $index'),
  9.         );
  10.       },
  11.       childCount: 50
  12.   ),
  13. ),

:::info SliverFixedExtentList 跟 SliverList 不同的一点是, SliverFixedExtentList 的高度固定为其 itemExtent 属性值, 而 SliverList 的高度是自动的, 取决于其 delegate 中子元素的高度 :::

SliverPrototypeExtentList

SliverPrototypeExtentList 将其子项排列在沿着主轴的一条线上，从零偏移开始，没有间隙。每个子项的约束程度与沿主轴的prototypeItem和沿横轴的SliverConstraints.crossAxisExtent的程度相同。

SliverChildListDelegate 和 SliverChildBuilderDelegate 的区别

  • SliverChildListDelegate 一般用来构item建数量明确的列表，会提前build好所有的子item，所以在效率上会有问题，适合item数量不多的情况（不超过一屏）。
  • SliverChildBuilderDelegate 构建的列表理论上是可以无限长的，因为使用来lazily construct优化。
    （两者的区别有些类似于ListView和ListView.builder()的区别。）

SliverGrid

SliverGrid 有三个构造函数：SliverGrid.count()、SliverGrid.extent和SliverGrid()

SliverGrid.count()指定了一行展示多少个item，下面的例子表示一行展示4个：

  1. SliverGrid.count(children: scrollItems, crossAxisCount: 4)

SliverGrid.extent可以指定item的最大宽度，然后让Flutter自己决定一行展示多少个item：

  1. SliverGrid.extent(children: scrollItems, maxCrossAxisExtent: 90.0)

SliverGrid()则是需要指定一个gridDelegate，它提供给了程序员一个自定义Delegate的入口，你可以自己决定每一个item怎么排列：

  1. new SliverGrid(
  2.   gridDelegate: new SliverGridDelegateWithFixedCrossAxisCount(
  3.     crossAxisCount: 2, //Grid按两列显示
  4.     mainAxisSpacing: 10.0,
  5.     crossAxisSpacing: 10.0,
  6.     childAspectRatio: 4.0,
  7.   ),
  8.   delegate: new SliverChildBuilderDelegate(
  9.         (BuildContext context, int index) {
  10.       return new Container(
  11.         alignment: Alignment.center,
  12.         color: Colors.cyan[100 * (index % 9)],
  13.         child: new Text('grid item $index'),
  14.       );
  15.     },
  16.     childCount: 20,
  17.   ),
  18. ),

SliverPersistentHeader

SliverPersistentHeader 顾名思义，就是给一个可滑动的视图添加一个头（实际上，在CustomScrollView的slivers列表中，header可以出现在视图的任意位置，不一定要是在顶部）。这个Header会随着滑动而展开/收起，使用pinned和floating属性来控制收起时Header是否展示（pinned和floating属性不可以同时为true）,pinned和floating属性的具体意义和SliverAppBar中相同。

  1. SliverPersistentHeader(
  2.   pinned: true,
  3.   delegate: _SliverAppBarDelegate(
  4.     minHeight: 60.0,
  5.     maxHeight: 180.0,
  6.     child: Container(
  7.       child: Image.asset(
  8.         "assets/imgs/bg.jpg", fit: BoxFit.fitWidth,),
  9.     ),
  10.   ),
  11. ),

效果：
006.gif

构建一个 SliverPersistentHeader 需要传入一个delegate，这个delegate是 SliverPersistentHeaderDelegate 类型的，而 SliverPersistentHeaderDelegate 是一个abstract类，我们不能直接new一个 SliverPersistentHeaderDelegate 出来，因此，我们需要自定义一个 delegate 来实现 SliverPersistentHeaderDelegate 类：

  1. class _SliverAppBarDelegate extends SliverPersistentHeaderDelegate {
  2.   _SliverAppBarDelegate({
  3.     @required this.minHeight,
  4.     @required this.maxHeight,
  5.     @required this.child,
  6.   });
  8.   final double minHeight;
  9.   final double maxHeight;
  10.   final Widget child;
  12.   @override
  13.   double get minExtent => minHeight;
  15.   @override
  16.   double get maxExtent => maxHeight;
  18.   @override
  19.   Widget build(
  20.       BuildContext context, double shrinkOffset, bool overlapsContent) {
  21.     return new SizedBox.expand(child: child);
  22.   }
  24.   @override
  25.   bool shouldRebuild(_SliverAppBarDelegate oldDelegate) {
  26.     return maxHeight != oldDelegate.maxHeight ||
  27.         minHeight != oldDelegate.minHeight ||
  28.         child != oldDelegate.child;
  29.   }
  30. }

写一个自定义SliverPersistentHeaderDelegate很简单，只需重写build()、get maxExtent、get minExtent和shouldRebuild()这四个方法，上面就是一个最简单的SliverPersistentHeaderDelegate的实现。其中，maxExtent表示header完全展开时的高度，minExtent表示header在收起时的最小高度。因此，对于我们上面的那个自定义Delegate，如果将minHeight和maxHeight的值设置为相同时，header就不会收缩了，这样的Header跟我们平常理解的Header更像。

SliverPadding

SliverPadding 可以为 sliver 添加间距

  1. SliverPadding(
  2.   padding: const EdgeInsets.all(8.0),
  3.   sliver: new SliverGrid(
  4.     // ...
  5.   ),
  6. ),

SliverToBoxAdapter

那么如果想要在滚动视图中添加一个普通的控件，那么就可以使用 SliverToBoxAdapter 来将各种视图组合在一起，放在 CustomListView 中。

结合SliverToBoxAdapter，滚动视图可以任意组合：

  1. CustomScrollView(
  2.   physics: ScrollPhysics(),
  3.   slivers: <Widget>[
  4.     SliverToBoxAdapter(
  5.       child: Placeholder(fallbackHeight: 100,),
  6.     ),
  8.     SliverGrid.count(
  9.       crossAxisCount: 3,
  10.       children: products.map((product) {
  11.         return _buildItemGrid(product);
  12.       }).toList(),
  13.     ),
  15.     SliverToBoxAdapter(
  16.       child: Placeholder(fallbackHeight: 100,),
  17.     ),
  19.     SliverFixedExtentList(
  20.       itemExtent: 100.0,
  21.       delegate: SliverChildListDelegate(
  22.         products.map((product) {
  23.           return _buildItemList(product);
  24.         }).toList(),
  25.       ),
  26.     ),
  27.   ],
  28. );

SliverFillViewport

SliverFillViewport 占满一屏或者比一屏更多的布局

  1. new SliverFillViewport(
  2.     delegate: new SliverChildBuilderDelegate(
  3.             (BuildContext context, int index) {
  4.           //创建列表项
  5.           return new Container(
  6.             alignment: Alignment.center,
  7.             color: Colors.lightBlue,
  8.             child: new Text('SliverFillViewport'),
  9.           );
  10.         },
  11.         childCount: 1
  12.     ),
  13.     viewportFraction: 1.0, // 占屏幕的比例
  14. ),

SliverFillRemaining

SliverFillRemaining 用于填充完剩余视图里面的全部空间, 详见 示例2

SliverSafeArea

SliverSafeArea 通过足够的填充来插入另一条条子以防止操作系统入侵的条子。例如，这将使条子缩进足以避开屏幕顶部的状态栏。为了防止各种边界的越界，比如说越过顶部的状态栏

示例1: 基础用法

  1. import 'package:flutter/material.dart';
  3. void main() {
  4.   runApp(new StartApp());
  5. }
  7. class StartApp extends StatefulWidget {
  8.   @override
  9.   State<StatefulWidget> createState() {
  10.     return new _StartAppState();
  11.   }
  12. }
  14. class _StartAppState extends State<StartApp> {
  15.   @override
  16.   Widget build(BuildContext context) {
  17.     return MaterialApp(
  18.       title: '首页',
  19.       theme: new ThemeData(
  20.         primarySwatch: Colors.blue,
  21.       ),
  22.       home: CustomScrollViewTestRoute(),
  23.     );
  24.   }
  25. }
  27. class CustomScrollViewTestRoute extends StatelessWidget {
  28.   @override
  29.   Widget build(BuildContext context) {
  30.     // 因为本路由没有使用Scaffold，为了让子级Widget(如Text)使用
  31.     // Material Design 默认的样式风格,我们使用Material作为本路由的根。
  32.     return Material(
  33.         child: CustomScrollView(
  34.           slivers: <Widget>[
  35.             SliverAppBar(
  36.               actions: <Widget>[
  37.                 FlatButton(
  38.                   child: Text('click me', style: TextStyle(
  39.                       fontSize: 20,
  40.                       color: Colors.white
  41.                   ),),
  42.                 ),
  43.               ],
  44.               backgroundColor: Theme.of(context).accentColor,
  45.               expandedHeight: 200.0,
  46.               flexibleSpace: FlexibleSpaceBar(
  47.                 background: Image.asset('assets/imgs/bg.jpg', fit: BoxFit.cover),
  48.                 title: Text('Demo'),
  49.               ),
  50.               pinned: true,
  51.             ),
  52.             SliverFixedExtentList(
  53.               itemExtent: 120.0,
  54.               delegate: SliverChildListDelegate(
  55.                 [1,2,3,4,5,6,7].map((product) {
  56.                   return Container(
  57.                     alignment: Alignment.center,
  58.                     child: new Text('list item $product'),
  59.                   );
  60.                 }).toList(),
  61.               ),
  62.             ),
  64.             SliverPersistentHeader(
  65.               pinned: true,
  66.               delegate: _SliverAppBarDelegate(
  67.                 minHeight: 60.0,
  68.                 maxHeight: 180.0,
  69.                 child: Container(
  70.                   child: Image.asset(
  71.                     "assets/imgs/bg.jpg", fit: BoxFit.fitWidth,),
  72.                 ),
  73.               ),
  74.             ),
  76.             SliverPadding(
  77.               padding: const EdgeInsets.all(8.0),
  78.               sliver: new SliverGrid( //Grid
  79.                 gridDelegate: new SliverGridDelegateWithFixedCrossAxisCount(
  80.                   crossAxisCount: 2, //Grid按两列显示
  81.                   mainAxisSpacing: 10.0,
  82.                   crossAxisSpacing: 10.0,
  83.                   childAspectRatio: 4.0,
  84.                 ),
  85.                 delegate: new SliverChildBuilderDelegate(
  86.                       (BuildContext context, int index) {
  87.                     //创建子widget
  88.                     return new Container(
  89.                       alignment: Alignment.center,
  90.                       color: Colors.cyan[100 * (index % 9)],
  91.                       child: new Text('grid item $index'),
  92.                     );
  93.                   },
  94.                   childCount: 20,
  95.                 ),
  96.               ),
  97.             ),
  99.             SliverToBoxAdapter(
  100.               child: Placeholder(fallbackHeight: 100,),
  101.             ),
  103.             new SliverFixedExtentList(
  104.               itemExtent: 50.0,
  105.               delegate: new SliverChildBuilderDelegate(
  106.                       (BuildContext context, int index) {
  107.                     //创建列表项
  108.                     return new Container(
  109.                       alignment: Alignment.center,
  110.                       color: Colors.lightBlue[100 * (index % 9)],
  111.                       child: new Text('list item $index'),
  112.                     );
  113.                   },
  114.                   childCount: 50 //50个列表项
  115.               ),
  116.             ),
  118.           ],
  119.         )
  120.     );
  121.   }
  122. }
  125. class _SliverAppBarDelegate extends SliverPersistentHeaderDelegate {
  126.   _SliverAppBarDelegate({
  127.     @required this.minHeight,
  128.     @required this.maxHeight,
  129.     @required this.child,
  130.   });
  132.   final double minHeight;
  133.   final double maxHeight;
  134.   final Widget child;
  136.   @override
  137.   double get minExtent => minHeight;
  139.   @override
  140.   double get maxExtent => maxHeight;
  142.   @override
  143.   Widget build(
  144.       BuildContext context, double shrinkOffset, bool overlapsContent) {
  145.     return new SizedBox.expand(child: child);
  146.   }
  148.   @override
  149.   bool shouldRebuild(_SliverAppBarDelegate oldDelegate) {
  150.     return maxHeight != oldDelegate.maxHeight ||
  151.         minHeight != oldDelegate.minHeight ||
  152.         child != oldDelegate.child;
  153.   }
  154. }

效果：
001.gif

示例2: Sliver-sticky效果

  2. class _StickyDemoState extends State<StickyDemo>
  3.     with SingleTickerProviderStateMixin {
  4.   TabController tabController;
  6.   @override
  7.   void initState() {
  8.     super.initState();
  9.     this.tabController = TabController(length: 2, vsync: this);
  10.   }
  12.   @override
  13.   Widget build(BuildContext context) {
  14.     return Scaffold(
  15.       body: CustomScrollView(
  16.         slivers: <Widget>[
  17.           SliverAppBar(
  18.             pinned: true,
  19.             elevation: 0,
  20.             expandedHeight: 250,
  21.             flexibleSpace: FlexibleSpaceBar(
  22.               title: Text('Sliver-sticky效果'),
  23.               background: Image.network(
  24.                 'http://img1.mukewang.com/5c18cf540001ac8206000338.jpg',
  25.                 fit: BoxFit.cover,
  26.               ),
  27.             ),
  28.           ),
  29.           SliverPersistentHeader(
  30.             pinned: true,
  31.             delegate: StickyTabBarDelegate(
  32.               child: TabBar(
  33.                 labelColor: Colors.black,
  34.                 controller: this.tabController,
  35.                 tabs: <Widget>[
  36.                   Tab(text: 'Home'),
  37.                   Tab(text: 'Profile'),
  38.                 ],
  39.               ),
  40.             ),
  41.           ),
  42.           SliverFillRemaining(
  43.             child: TabBarView(
  44.               controller: this.tabController,
  45.               children: <Widget>[
  46.                 Center(child: Text('Content of Home')),
  47.                 Center(child: Text('Content of Profile')),
  48.               ],
  49.             ),
  50.           ),
  51.         ],
  52.       ),
  53.     );
  54.   }
  55. }
  57. class StickyTabBarDelegate extends SliverPersistentHeaderDelegate {
  58.   final TabBar child;
  60.   StickyTabBarDelegate({@required this.child});
  62.   @override
  63.   Widget build(BuildContext context, double shrinkOffset, bool overlapsContent) {
  64.     return this.child;
  65.   }
  67.   @override
  68.   double get maxExtent => this.child.preferredSize.height;
  70.   @override
  71.   double get minExtent => this.child.preferredSize.height;
  73.   @override
  74.   bool shouldRebuild(SliverPersistentHeaderDelegate oldDelegate) {
  75.     return true;
  76.   }
  77. }

效果：
007.gif

参考资料