我在用着NestedScrollView
在这里并试图放一个TabBar
in the bottom
的参数SliverAppBar
这是建立在headerSliverBuilder
功能。这TabBar
工作正常,但看起来像SliverAppBar
已幸免于难title
一些空间使标签栏看起来很奇怪,上面有大的填充。知道如何删除这个空间吗?提前致谢。
GIF https://i.stack.imgur.com/csC1U.gif
@override
Widget build(BuildContext context) {
double screenWidth = MediaQuery.of(context).size.width;
double screenHeight = MediaQuery.of(context).size.height;
return Scaffold(
body: SafeArea(
child: NestedScrollView(
headerSliverBuilder: (context, value){
return[
SliverOverlapAbsorber(
handle:NestedScrollView.sliverOverlapAbsorberHandleFor(context),
sliver: SliverAppBar(
pinned: true,
floating: false,
expandedHeight: 500,
title: Text("Space that I don't want"),
centerTitle: true,
flexibleSpace: FlexibleSpaceBar(
collapseMode: CollapseMode.pin,
background: Container(
decoration: BoxDecoration(
color: Colors.white,
image: DecorationImage(
image: AssetImage("assets/images/classroom.png")
)
),
child: Center(child: Text("Today's lesson cancelled", style: GoogleFonts.montserrat(textStyle: TextStyle(color: Colors.white, fontSize:20, fontWeight: FontWeight.w500),)))
),
),
bottom: TabBar(
controller: _controller,
labelColor: Colors.black,
indicatorColor: Colors.black,
unselectedLabelColor: Colors.grey,
tabs: _tabs.map((String name) => Tab(text: name)).toList()
)
)
),
];
},
body: TabBarView(
controller: _controller,
children: (_tabs.map((String name){
return SafeArea(
child:Builder(
builder: (BuildContext context){
return CustomScrollView(
key: PageStorageKey<String>(name),
slivers: <Widget>[
SliverOverlapInjector(
handle:NestedScrollView.sliverOverlapAbsorberHandleFor(context),
),
SliverToBoxAdapter(
child: _buildLeaderBoardTab(screenWidth,screenHeight)
)
],
);
},
)
);
})).toList(),
)
)
)
);
}