我目前正在使用SliverAppBar,并且在滚动sliverList时遇到问题。
在上面的图片中,我的TabBar一直到通知栏。当sliverAppBar折叠时,我希望我的Tabbar贴到AppBar的底部。
这是我正在尝试的代码...
return Scaffold(
body: CustomScrollView(
slivers: <Widget>[
SliverAppBar(
//backgroundColor: Colors.transparent,
actions: <Widget>[
IconButton(icon: Icon(Icons.favorite), onPressed: () {}),
IconButton(icon: Icon(Icons.share), onPressed: () {})
],
floating: false,
pinned: true,
expandedHeight: getHeight(context),
flexibleSpace: FlexibleSpaceBar(
title: Text("text"),
background: Container(
height: double.infinity,
width: double.infinity,
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage(currentImage),
fit: BoxFit.cover)),
),
),
),
SliverList(
delegate: SliverChildListDelegate(bottomListView),
),
],
)
,
);
只需使用SliverAppBar的bottom参数并将TabBar传递给它。在FlexibleSpaceBar中添加titlePadding以从TabBar添加填充。如果需要更改TabBar的颜色,可以检查this question。
请注意FlexibleSpaceBar内部的标题和AppBar中的操作图标,因为长标题会导致最小化的Appbar中出现重叠。
child: CustomScrollView(
slivers: <Widget>[
SliverAppBar(
//backgroundColor: Colors.transparent,
actions: <Widget>[
IconButton(icon: Icon(Icons.favorite), onPressed: () {}),
IconButton(icon: Icon(Icons.share), onPressed: () {})
],
floating: false,
pinned: true,
expandedHeight: getHeight(context),
flexibleSpace: FlexibleSpaceBar(
title: Text("text"),
// Adding padding from TabBar
titlePadding: EdgeInsets.only(bottom: 64, left: 60),
background: Container(
height: double.infinity,
width: double.infinity,
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage(currentImage),
fit: BoxFit.cover)),
),
),
// Adding TabBar to the bottom of SliverAppBar
bottom: TabBar(
tabs: [
for (var i = 0; i < 3; i++)
Tab(
text: 'test $i',
),
]
),
),
SliverList(
delegate: SliverChildListDelegate(bottomListView),
),
],
),