SliverAppBar 导航栏

https://docs.flutter.io/flutter/widgets/SliverAppBar-class.html
控件可以实现页面头部区域展开、折叠的效果，类似于Android中的CollapsingToolbarLayout。定义：

  1. const SliverAppBar({
  2.   Key key,
  3.   this.leading,    //左侧控件，通常情况下为“返回”图标
  4.   this.automaticallyImplyLeading = true,
  5.   this.title,    //标题，通常为Text控件
  6.   this.actions,    //右侧控件
  7.   this.flexibleSpace,    //展开和折叠区域，通常是一个FlexibleSpaceBar
  8.   this.bottom,    //底部控件
  9.   this.elevation,    //阴影
  10.   this.shadowColor,
  11.   this.forceElevated = false,
  12.   this.backgroundColor,    //背景颜色    
  13.   this.brightness,    //主题明亮
  14.   this.iconTheme,    //图标主题
  15.   this.actionsIconTheme,
  16.   this.textTheme,    //文字主题
  17.   this.primary = true,    //是否预留高度
  18.   this.centerTitle,    //标题是否居中
  19.   this.excludeHeaderSemantics = false,
  20.   this.titleSpacing = NavigationToolbar.kMiddleSpacing,
  21.   this.collapsedHeight,
  22.   this.expandedHeight,    //展开高度
  23.   this.pinned = false,    //是否吸顶
  25.   this.floating = false,
  26.   //是否随着滑动隐藏标题
  27.   //（设置为true时，向下滑动时，即使当前CustomScrollView不在顶部，SliverAppBar也会跟着一起向下出现））
  29.   this.snap = false,
  30.   //设置为true时，当手指放开时，SliverAppBar会根据当前的位置进行调整，始终保持展开或收起的状态，
  31.   //此效果在floating=true时生效
  33.   this.stretch = false,
  34.   this.stretchTriggerOffset = 100.0,
  35.   this.onStretchTrigger,
  36.   this.shape,
  37.   this.toolbarHeight = kToolbarHeight,
  38.   this.leadingWidth,
  39. })

该控件需要和CustomScrollView搭配使用,SliverAppBar要通常放在slivers的第一位，后面接其他sliver控件。

  1. CustomScrollView(
  2.   slivers: <Widget>[
  3.     SliverAppBar(),
  4.     //其他sliver控件
  5.   ],
  6. )

该控件中有一个非常重要的参数flexibleSpace，flexibleSpace是SliverAppBar中展开和折叠区域，flexibleSpace与expandedHeight一起使用， expandedHeight表示flexibleSpace的高度，
';.gif

  1. SliverAppBar(
  2.   pinned: true,    //是否吸顶
  3.   expandedHeight: 200.0,
  4.   flexibleSpace: FlexibleSpaceBar(
  5.         title: Text('我是吸顶后的标题'),
  6.     background: Image.network(
  7.       'https://images.h128.com/upload/202012/20/202012201302083641.jpg',
  8.       fit: BoxFit.cover,
  9.     ),
  10.   ),
  11. ),

SliverGrid

https://docs.flutter.io/flutter/widgets/SliverGrid-class.html
GridView-笔记：https://www.yuque.com/zhuchaoyang/tnyvrp/quesw9
可以设置每行的个数的Grid。

  1. SliverGrid.count(
  2.   crossAxisCount: 4,
  3.   childAspectRatio: 2,
  4.   mainAxisSpacing: 10,
  5.   crossAxisSpacing: 5,
  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. ),
  15. //等同于
  16. SliverGrid(
  17.   gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
  18.     crossAxisCount: 4,
  19.     childAspectRatio: 2,
  20.     mainAxisSpacing: 10,
  21.     crossAxisSpacing: 5,
  22.   ),
  23.   delegate: SliverChildBuilderDelegate(
  24.     (context, index) => Container(
  25.       color: Colors.primaries[index % Colors.primaries.length],
  26.       child: Text('$index', textScaleFactor: 2),
  27.     ),
  28.     childCount: 8,
  29.   ),
  30. ),

SliverList

https://api.flutter.dev/flutter/widgets/SliverList-class.html
要同时滚动ListView和GridView的时候可以使用SliverList和SliverGrid。

delegate: SliverChildListDelegate

image.png

  1. SliverList(
  2.   delegate: SliverChildListDelegate([
  3.     ListTile(title: Text('文本 1')),
  4.     ListTile(title: Text('文本 2')),
  5.     ListTile(title: Text('文本 3')),
  6.   ]),
  7. ),

delegate: SliverChildBuilderDelegate

image.png

  1. SliverList(
  2.   delegate: SliverChildBuilderDelegate(
  3.     (BuildContext context, int index) => Container(
  4.       height: 50,
  5.       color: Colors.primaries[index % Colors.primaries.length],
  6.       child: Text('$index', textScaleFactor: 2),
  7.     ),
  8.     childCount: 20,
  9.   ),
  10. ),

SliverFixedExtentList

https://docs.flutter.io/flutter/widgets/SliverFixedExtentList-class.html
比SliverList多一个就是相同的行高。这样性能会更好。

  1. SliverFixedExtentList(
  2.   itemExtent: 50,
  3.   delegate: SliverChildBuilderDelegate(
  4.     (context, index) => Container(
  5.       color: Colors.primaries[index % Colors.primaries.length],
  6.       child: Text('$index', textScaleFactor: 2),
  7.     ),
  8.     childCount: 20,
  9.   ),
  10. ),

SliverPrototypeExtentList

https://docs.flutter.io/flutter/widgets/SliverPrototypeExtentList-class.html
SliverPrototypeExtentList arranges its children in a line along the main axis starting at offset zero and without gaps. Each child is constrained to the same extent as the prototypeItem along the main axis and the SliverConstraints.crossAxisExtent along the cross axis.

SliverPadding 给Sliver组件留白

https://docs.flutter.io/flutter/widgets/SliverPadding-class.html
image.png

  1. SliverPadding(
  2.   padding: EdgeInsets.all(10),
  3.   sliver: SliverList(
  4.     delegate: SliverChildBuilderDelegate(
  5.       (context, index) => Container(
  6.         height: 50,
  7.         color: Colors.primaries[index % Colors.primaries.length],
  8.         child: Text('$index', textScaleFactor: 2),
  9.       ),
  10.       childCount: 20,
  11.     ),
  12.   ),
  13. ),

SliverToBoxAdapter

https://docs.flutter.io/flutter/widgets/SliverToBoxAdapter-class.html
在使用CustomScrollView创建自定义滚动效果的时候，CustomScrollView只能包含sliver系列组件，如果包含普通的组件如何处理？使用SliverToBoxAdapter包裹。

  1. SliverToBoxAdapter(
  2.   child: Container(height: 100, color: Colors.black),
  3. ),

SliverPersistentHeader

https://docs.flutter.io/flutter/widgets/SliverPersistentHeader-class.html
A sliver whose size varies when the sliver is scrolled to the leading edge of the viewport. This is the layout primitive that SliverAppBar uses for its shrinking/growing effect.

非常好用的组件，SliverAppBar就是用这个实现的。
当滚动到边缘时根据滚动的距离缩小高度，有点类似 SliverAppBar的背景效果。也可以开启吸顶。

定义
  1. const SliverPersistentHeader({
  2.   Key key,
  3.   @required SliverPersistentHeaderDelegate this.delegate,
  4.   // delegate需要我们自定义SliverPersistentHeaderDelegate的子类
  6.   this.pinned = false,
  7.   //设置为true时，当SliverAppBar内容滑出屏幕时，将始终渲染一个固定在顶部的收起状态
  8.   this.floating = false,    
  9.   //设置为true时，向下滑动时，即使当前CustomScrollView不在顶部，SliverAppBar也会跟着一起向下出现
  10. })

SliverPersistentHeaderDelegate 抽象类，需要实现一些抽象方法，而一般抽象方法都会为我们回调一些有价值的东西，查看他的族谱，发现没有可以使用的子类，那么想使用它，需要先写个他的子类。

示例1

';.gif

  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.     ),
  15.     SliverPersistentHeader(
  16.       delegate: MySliverPersistentHeaderDelegate(),
  17.       pinned: true,
  18.       floating: false,
  19.     ),
  21.     SliverList(
  22.       delegate: SliverChildBuilderDelegate(
  23.         (BuildContext context, int index) => Container(
  24.           height: 50,
  25.           color: Colors.primaries[index % Colors.primaries.length],
  26.           child: Text('$index', textScaleFactor: 2),
  27.         ),
  28.         childCount: 20,
  29.       ),
  30.     ),
  32.   ],
  33. ),

MySliverPersistentHeaderDelegate
  1. class MySliverPersistentHeaderDelegate extends SliverPersistentHeaderDelegate {
  2.   // build返回显示的内容
  3.   @override
  4.   Widget build(BuildContext context, double shrinkOffset, bool overlapsContent) {
  5.     return Container(
  6.       color: Colors.blue,
  7.       alignment: Alignment.center,
  8.       child: Text(
  9.         'shrinkOffset: ${shrinkOffset.toStringAsFixed(1)}',    // shrinkOffset 偏移量
  10.         style: TextStyle(color: Colors.white),
  11.       ),
  12.     );
  13.   }
  14.     // maxExtent和minExtent表示最大和最小值，滚动的时候高度在这个范围内变化。
  15.   @override
  16.   double get minExtent => 60.0;
  18.   @override
  19.   double get maxExtent => 200.0;
  21.   // shouldRebuild表示是否需要更新，如果内容需要变化需要设置为true。
  22.   @override
  23.   bool shouldRebuild(covariant SliverPersistentHeaderDelegate oldDelegate) => false;
  24. }

示例2：固定tab

  1. SliverPersistentHeader(
  2.   pinned: true,
  3.   delegate: _buildPersistentHeader(
  4.     child: Container(
  5.       color: Colors.yellow,
  6.       height: 60,
  7.       child: Row(
  8.         children: _list.map((item) => InkWell(
  9.             child: Text(item['title']),
  10.             onTap: () {
  11.               setState(() {
  12.                 _tabIndex = item['index'];
  13.               });
  14.             },
  15.           )).toList(),
  16.       ),
  17.     ),
  18.   ),
  19. ),
  1. class _buildPersistentHeader extends SliverPersistentHeaderDelegate {
  2.   final child;
  3.   _buildPersistentHeader({@required this.child});
  5.   // shrinkOffset 偏移量
  6.   @override
  7.   Widget build(BuildContext context, double shrinkOffset, bool overlapsContent) {
  8.     return this.child;
  9.   }
  11.   // 最大上滑高度
  12.   @override
  13.   // double get maxExtent => this.child.preferredSize.height;
  14.   double get maxExtent => 60;
  16.   // 最小上滑高度
  17.   @override
  18.   // double get minExtent => this.child.preferredSize.height;
  19.   double get minExtent => 60;
  21.   @override
  22.   bool shouldRebuild(SliverPersistentHeaderDelegate oldDelegate) {
  23.     return true;
  24.   }
  25. }

示例3：

左： pinned_true, floating_false
右：pinned_true, floating_true
常用的Sliver组件 - 图6 常用的Sliver组件 - 图7

  1. SliverPersistentHeader(
  2.   pinned: true,
  3.   delegate: PersistentHeaderBuilder(
  4.     builder: (context, offset) => Container(
  5.       alignment: Alignment.center,
  6.       color: Colors.yellow,
  7.       child: Text(
  8.         "shrinkOffset:${offset.toStringAsFixed(1)}",
  9.         style: TextStyle(fontSize: 20, color: Colors.white),
  10.       ),
  11.     ),
  12.   ),
  13. )
  1. class PersistentHeaderBuilder extends SliverPersistentHeaderDelegate {
  2.   final double max;
  3.   final double min;
  4.   final Widget Function(BuildContext context, double offset) builder;
  6.   PersistentHeaderBuilder({this.max = 120, this.min = 80, @required this.builder})
  7.       : assert(max >= min && builder != null);
  10.   @override
  11.   Widget build(BuildContext context, double shrinkOffset, bool overlapsContent) {
  12.     return builder(context, shrinkOffset);
  13.   }
  15.   @override
  16.   double get maxExtent => max;
  18.   @override
  19.   double get minExtent => min;
  21.   @override
  22.   bool shouldRebuild(covariant PersistentHeaderBuilder oldDelegate) =>
  23.       max != oldDelegate.max || min != oldDelegate.min || builder != oldDelegate.builder;
  24. }

SliverSafeArea

https://docs.flutter.io/flutter/widgets/SliverSafeArea-class.html
A sliver that insets another sliver by sufficient padding to avoid intrusions by the operating system. For example, this will indent the sliver by enough to avoid the status bar at the top of the screen.为了防止各种边界的越界，比如说越过顶部的状态栏

SliverFillRemaining

https://docs.flutter.io/flutter/widgets/SliverFillRemaining-class.html
sizes its child to fill the viewport in the cross axis and to fill the remaining space in the viewport in the main axis. 使用这个它会填充完剩余viewport里面的全部空间

SliverOverlapAbsorber, SliverOverlapAbsorberHandle

这个上面2个是官方专门为了解决我们今天主角NestedScrollView中Pinned 组件对Body 里面Scroll 状态影响的，但官方做的不够完美。