CustomeScrollView的基本用法
child: new CustomScrollView(
physics: ScrollPhysics(),
shrinkWrap: true,
slivers: <Widget>[
SliverToBoxAdapter(
//横向列表
child: SingleChildScrollView(
scrollDirection: Axis.horizontal,
child: new Row(
children: <Widget>[
new Container(
alignment: AlignmentDirectional.center,
height: 100,width: 200,
color: Colors.red,
child: new Text("1"),
),new Container(
alignment: AlignmentDirectional.center,
height: 100,width: 200,
color: Colors.black,
child: new Text("2"),
),new Container(
alignment: AlignmentDirectional.center,
height: 100,width: 200,
color: Colors.green,
child: new Text("3"),
)
],
),
),
),
SliverList(
delegate: new SliverChildBuilderDelegate(
(BuildContext context, int index) {
return new Container(
alignment: Alignment.center,
color: Colors.lightBlue[100 * (index % 9)],
child: SingleChildScrollView(
scrollDirection: Axis.horizontal,
child: new Text('grid item $index'),
),
);
}, childCount: 30 //50个列表项
),
),
new SliverPadding(
padding: EdgeInsets.all(2),
sliver: SliverToBoxAdapter(
child: desWidget,
),
),
//AppBar,包含一个导航栏
SliverAppBar(
pinned: true,
expandedHeight: 250.0,
flexibleSpace: FlexibleSpaceBar(
title: const Text('Demo'),
background: Image.asset(
"./images/avatar.png",
fit: BoxFit.cover,
),
),
),
// new SliverPadding(padding: EdgeInsets.all(2),
// sliver: SliverList(
// delegate: new S,
// ),),
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.cyan[100 * (index % 9)],
child: new Text('grid item $index'),
);
},
childCount: 20,
),
),
),
//List
new SliverFixedExtentList(
itemExtent: 50.0,
delegate: new SliverChildBuilderDelegate(
(BuildContext context, int index) {
//创建列表项
return new Container(
alignment: Alignment.center,
color: Colors.lightBlue[100 * (index % 9)],
child: new Text('list item $index'),
);
}, childCount: 50 //50个列表项
),
),
],
),
效果如下
![](https://img.haomeiwen.com/i2958544/afa72bf1563c2c39.jpg)
网友评论