class SliverDemo extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
body: CustomScrollView(
slivers: <Widget>[
SliverAppBar( // 类似AppBar,但是可以设置滚动效果
title: Text('动画'), // 导航栏标题
// pinned: true, // 设置为true就会固定在顶部
floating: true, // 下拉显示效果
expandedHeight: 178.0, // 设置顶部向下伸展的高度
flexibleSpace: FlexibleSpaceBar( // 向下伸展的部分
title: Text('你好,欢迎光临!', style: TextStyle(fontSize: 15.0, fontWeight: FontWeight.w400),),
background: Image.network('https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1560266593833&di=96dc58ad2f09d707173a045c83026803&imgtype=0&src=http%3A%2F%2Fpic33.nipic.com%2F20131014%2F13419492_181704251155_2.jpg',
fit: BoxFit.cover,
),
),
),
SliverSafeArea( // 让内容显示在安全区域内
sliver: SliverPadding( // 添加内边距
padding: EdgeInsets.all(8.0),
sliver: SliverGridDemo(),
),
),
],
),
);
}
}
class SliverGridDemo extends StatelessWidget {
@override
Widget build(BuildContext context) {
return SliverGrid( // 构建网格视图
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 2,
crossAxisSpacing: 8.0,
mainAxisSpacing: 8.0,
childAspectRatio: 1.0, // 控制网格视图项目显示的比例
),
delegate: SliverChildBuilderDelegate(
(BuildContext context, int index) {
return Container(
child: Image.network(items[index].imageUrl, fit: BoxFit.cover,),
);
},
childCount: items.length,
),
);
}
}
网友评论