Flutter教学目录持续更新中
Github源代码持续更新中
1.CustomScrollView
一个使用slivers创建自定义的滚动效果的ScrollView
这个是Sliver组件中基础的组件，支持讲各种Sliver组件聚合在一起实现各种折叠效果，当然NestedScrollView也可以，后面会一一介绍。
2.CustomScrollView属性
= scrollDirection = Axis.vertical：滚动方向
- reverse = false：是否倒序
- controller：ScrollController 滑动控制器
- primary：当内容不足以滚动时，是否支持滚动 但是这里是不起作用的，因为CustomScrollView需要内容满了才能触发折叠效果，true 的话 controller 一定要为null
- physics：ScrollPhysics 控制用户滚动视图的交互
- shrinkWrap = false：滑动方向上是否允许最大允许高度
- anchor = 0.0：零滚动偏移位置，会在滚动方向上进行整体位置偏移 0～1
- slivers = const <Widget>[]：多个Sliver组件
- cacheExtent: 0.0 预加载的缓存区域
CustomScrollView中很多属性跟ListView是一样的，这里就不再展开详细讲解了：
Flutter（33）：Material组件之ListTile、RefreshIndicator、ListView、Divider
3. CustomScrollView
_mySliverLayoutBuilder() {
var _color = Colors.green;
return CustomScrollView(
scrollDirection: Axis.vertical,
reverse: false,
primary: true,
anchor: 0.2,
physics: BouncingScrollPhysics(),
dragStartBehavior: DragStartBehavior.down,
slivers: [
SliverLayoutBuilder(
builder: (BuildContext context, SliverConstraints constraints) {
print('SliverConstraints = $constraints');
if (constraints.userScrollDirection == ScrollDirection.forward) {
_color = Colors.blue;
} else if (constraints.userScrollDirection ==
ScrollDirection.idle) {
_color = Colors.green;
} else {
_color = Colors.cyan;
}
return SliverToBoxAdapter(
child: Container(
height: 200,
color: _color,
),
);
},
),
SliverList(
delegate: SliverChildBuilderDelegate(
(BuildContext context, int index) {
return Card(
child: Container(
height: 50,
color: Colors.primaries[(index % 18)],
),
);
},
childCount: 15,
),
),
],
);
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('CustomScrollView'),
),
body: _mySliverLayoutBuilder(),
);
}
image.png
下一节：Sliver组件之SliverAppBar
