如何在flutter中实现自定义appbar布局滚动效果
How to achieve custom appbar layout scrollable effect in flutter
我尝试在 CustomScrollView
中使用 Flutter SliverAppBar
,但它无法正常工作。
要使用 SliverAppBar
并让应用栏收缩并粘在顶部,您可以按照以下示例操作:
Scaffold(
body: CustomScrollView(
slivers: <Widget>[
SliverAppBar(
expandedHeight: 200.0,
floating: true,
snap: true,
pinned: true,
flexibleSpace: FlexibleSpaceBar(
title: Text('SliverAppBar 1'),
centerTitle: true,
background: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
Text('text 1'),
Text('text 2'),
Text('text 3'),
],
),
),
),
SliverList(
delegate: SliverChildBuilderDelegate(
(context, index) {
return Container(
alignment: Alignment.center,
color: Colors.greenAccent,
child: Text('SliverList item'),
height: 60,
margin: EdgeInsets.all(4),
);
},
childCount: 20
),
),
],
)
);