解决的问题
当一个页面中,既有GridView 又有ListView,不能进行统一滑动时,二者有各自的滑动区域。CustomScrollView可以将二者结合起来,一起滑动。
CustomScrollView关键属性
- slivers: <Widget>[],将Silver化的GridView与ListView扔到里面即可。
SliverGrid,Silver化的GridView
const SliverGrid({
Key key,
@required SliverChildDelegate delegate,// 构建每个item的widget
@required this.gridDelegate,//计算每行/列的个数算法
})
SliverFixedExtentList,Sliver化的ListView
SliverFixedExtentList({
Key key,
@required SliverChildDelegate delegate, //构建每个item的widget
@required this.itemExtent,//指定行高
})

class _MyHomePageState extends State<MyHomePage> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: CustomScrollView(
slivers: <Widget>[
SliverPadding(
padding: const EdgeInsets.all(8.0),
sliver: new SliverGrid(
//Grid
gridDelegate: new SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 3, //Grid按两列显示
mainAxisSpacing: 10.0,
crossAxisSpacing: 10.0,
childAspectRatio: 4.0,
),
delegate: new SliverChildBuilderDelegate(
(BuildContext context, int index) {
//创建子widget
return new Container(
alignment: Alignment.center,
color: Colors.orange[100 * (index % 9)],
child: new Text('grid item $index'),
);
},
childCount: 10,
),
),
),
//List
new SliverFixedExtentList(
itemExtent: 50.0,
delegate: new SliverChildBuilderDelegate(
(BuildContext context, int index) {
//创建列表项
return new Container(
alignment: Alignment.center,
color: Colors.green[100 * (index % 9)],
child: new Text('list item $index'),
);
}, childCount: 5 //10个列表项
),
),
new SliverGrid(
//Grid
gridDelegate: new SliverGridDelegateWithMaxCrossAxisExtent(
maxCrossAxisExtent: 113, //Grid按两列显示
mainAxisSpacing: 10.0,
crossAxisSpacing: 10.0,
childAspectRatio: 4.0,
),
delegate: new SliverChildBuilderDelegate(
(BuildContext context, int index) {
//创建子widget
return new Container(
alignment: Alignment.center,
color: Colors.yellow[100 * (index % 9)],
child: new Text('grid item $index'),
);
},
childCount: 20,
),
),
],
),
);
}
}
网友评论