CustomScrollView是可以使用Sliver来自定义滚动模型（效果）的组件。它可以包含多种滚动模型，假设有一个页面，顶部需要一个GridView，底部需要一个ListView，而要求整个页面的滑动效果是统一的。如果使用GridView+ListView来实现的话，就不能保证一致的滑动效果，因为它们的滚动效果是分离的，这时就可以使用CustomScrollView。在CustomScrollView中，每一个独立的，可滚动的Widget被称之为Sliver。
因为我们需要把很多的Sliver放在一个CustomScrollView中，所以CustomScrollView有一个slivers属性，里面让我们放对应的一些Sliver：
- SliverList
类似于ListView - SliverFixedExtentList
类似于SliverList只是可以设置滚动的高度； - SliverGrid
类似于GridView； - SliverPadding
设置Sliver的内边距，因为可能要单独给Sliver设置内边距； - SliverAppBar
添加一个AppBar，通常用来作为CustomScrollView的HeaderView； - SliverSafeArea
设置内容显示在安全区域（比如不让齐刘海挡住我们的内容）
代码示例：
class CustomScrollViewDemo extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Material(
child: CustomScrollView(
slivers: [
// AppBar，包含一个导航栏
SliverAppBar(
pinned: true,
expandedHeight: 200.0,
flexibleSpace: FlexibleSpaceBar(
title: Text('CustomScrollView Demo'),
background: Image(
image: NetworkImage(
'https://tva1.sinaimg.cn/large/006y8mN6gy1g72j6nk1d4j30u00k0n0j.jpg'),
fit: BoxFit.cover,
),
),
),
SliverGrid(
delegate: SliverChildBuilderDelegate(
(BuildContext context, int index) {
return Container(
alignment: Alignment.center,
color: Colors.teal[100 * (index % 9)],
child: Text('grid item $index'),
);
},
childCount: 10,
),
gridDelegate: SliverGridDelegateWithMaxCrossAxisExtent(
maxCrossAxisExtent: 200.0,
mainAxisSpacing: 10.0,
crossAxisSpacing: 10.0,
childAspectRatio: 4.0,
),
),
SliverFixedExtentList(
delegate: SliverChildBuilderDelegate(
(BuildContext context, int index) {
return Container(
alignment: Alignment.center,
color: Colors.lightBlue[100 * (index % 9)],
child: Text('list item $index'),
);
},
childCount: 20,
),
itemExtent: 50.0,
),
],
),
);
}
}
