SliverGrid
class SliverGridDemo extends StatelessWidget {
@override
Widget build(BuildContext context) {
return SliverGrid(
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 2,
crossAxisSpacing: 8.0,
mainAxisSpacing: 8.0,
childAspectRatio: 1.6,
),
delegate: SliverChildBuilderDelegate(
(BuildContext context, int inde) {
return Container(
child: Image.network(
posts[index].imageUrl,
fit: BoxFit.cover,
),
);
},
childCount: posts.length,
),
);
}
}
SliverList
class SliverListDemo extends StatelessWidget {
@override
Widget build(BuildContext context) {
return SliverList(
delegate: SliverChildBuilderDelegate(
(BuildContext context, int index) {
return Padding(
padding: EdgeInsets.only(bottom: 32.0),
child: Material(
borderRadius: BorderRadius.circular(13.0), //设置圆角
elevation: 14.0, //设置海拔
shadowColor: Colors.grey.withOpacity(0.5), //不透明度
child: Stack(
children: <Widget>[
AspectRatio(
//方向比例
aspectRatio: 16 / 9, //设置比例16:9
child: Image.network(
posts[index].imageUrl,
fit: BoxFit.cover,
),
),
Positioned(
top: 32.0,
left: 32.0,
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
//交叉轴对齐设置为开始对齐
children: <Widget>[
Text(posts[index].title, style: TextStyle(
fontSize: 20.0,
color: Colors.white,
),),
Text(posts[index].author, style: TextStyle(
fontSize: 12.0,
color: Colors.white,),
],
),
),
],
),
),
);
},
childCount: posts.length,
),
);
}
}
SliverAppBar
class SliverDemo extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
body: CustomScrollView(
slivers: <Widget>[
SliverAppBar(
title: Text("我是标题"),
// pinned: true,//设置固定在界面顶部
floating: true, //随之滚动,向下滚动一点就接着显示
expandedHeight: 160.0, //设置伸展高度
flexibleSpace: FlexibleSpaceBar(
title: Text(
"我是标题1111".toUpperCase(), style: TextStyle(
fontSize: 15.0,
letterSpacing: 3.0,
fontWeight: FontWeight.w400,
),
),
background: Image.network(
r"http://pic4.zhimg.com/50/v2-7fece9a613445edb78271216c8c20c6d_hd.jpg",
fit: BoxFit.cover,),
),
),
SliverSafeArea(
sliver: SliverPadding(
padding: EdgeInsets.all(8.0),
sliver: SliverGridDemo(),
),
),
],
),
);
}
}