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(),
);
}
下一节:Sliver组件之SliverAppBar