如图要实现的效果
Screenshot_1611201197.png
Screenshot_1611201251.png
Screenshot_1611201253.png
实现,代码很简单就不多说了。
@override
Widget build(BuildContext context) {
return Scaffold(
body: CustomScrollView(
slivers: <Widget>[
SliverAppBar(
title: Text('沉浸式布局'),
leading: IconButton(
icon: Image(
image: AssetImage("assets/images/navi/navi_back.png"),
color: null,
fit: BoxFit.scaleDown,
alignment: Alignment.center,
),
onPressed: () => Navigator.of(viewService.context).pop(),
),
floating: true,
expandedHeight: 250,
elevation: 0,
flexibleSpace: FlexibleSpaceBar(
background: Container(
child: Image.network(
'https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=2055879269,628258096&fm=26&gp=0.jpg',
fit: BoxFit.cover,
),
),
),
),
SliverFixedExtentList(
delegate: SliverChildBuilderDelegate(
(context, index) {
return Container(
margin: EdgeInsets.all(5),
height: 44,
color: Colors.red,
);
},
childCount: 50,
),
itemExtent: 80,
),
],
),
);
}