一个自定义滚动效果的滚动视图。
CustomScrollView允许您创建各种滚动效果,比如列表、网格和展开头。例如,要创建一个滚动视图,其中包含一个扩展的应用程序栏,然后是一个列表和一个网格,请使用:SliverAppBar(展开头)、SliverList(列表)和SliverGrid(网格)。
若要控制滚动视图的初始滚动偏移,请为 控制器提供其ScrollController.initialScrollOffset属性集。
参数详解
属性 | 说明 |
scrollDirection | 方向,默认Axis.vertical(垂直滚动) |
reverse | 数据方向,默认false(正序) |
controller | 控制器 |
primary | |
physics | |
shrinkWrap | 默认false |
anchor | 默认0.0 |
cacheExtent | |
slivers | const <Widget>[] |
semanticChildCount | |
dragStartBehavior | 默认DragStartBehavior.start |
代码示例
CustomScrollView(
slivers: <Widget>[
const SliverAppBar(
pinned: true,
expandedHeight: 250.0,
flexibleSpace: FlexibleSpaceBar(
title: Text('Demo'),
),
),
SliverGrid(
gridDelegate: SliverGridDelegateWithMaxCrossAxisExtent(
maxCrossAxisExtent: 200.0,
mainAxisSpacing: 10.0,
crossAxisSpacing: 10.0,
childAspectRatio: 3.0,//子控件宽高比
),
delegate: SliverChildBuilderDelegate(
(BuildContext context, int index) {
return Card(
child: Container(
alignment: Alignment.centerLeft,
padding: EdgeInsets.all(10),
child: Text('data $index'),
),
);
},
childCount: 20,
),
),
SliverList(
delegate: SliverChildListDelegate(
//返回组件集合
List.generate(20, (int index){
//返回 组件
return GestureDetector(
onTap: () {
print("点击$index");
},
child: Card(
child: Container(
alignment: Alignment.centerLeft,
padding: EdgeInsets.all(10),
child: Text('data $index'),
),
),
);
}),
),
),
],
),