我想实现一个浮动的 AppBar,底部有一个固定的 TabBar。以下是测试代码(dartPad):
Widget build(BuildContext context) {
return Scaffold(
body: NestedScrollView(
floatHeaderSlivers: true,
headerSliverBuilder: (BuildContext context, bool innerBoxIsScrolled) {
return <Widget>[
SliverAppBar(
backgroundColor: Colors.yellow,
title: Text(
"WhatsApp type sliver appbar",
),
centerTitle: true,
pinned: true,
floating: true,
bottom: PreferredSize(
preferredSize: Size.fromHeight(kToolbarHeight),
child: Container(
color: Colors.orange,
alignment: Alignment.topLeft,
child: TabBar(
isScrollable: true,
indicatorColor: Colors.white,
indicatorSize: TabBarIndicatorSize.label,
controller: _tabController,
labelPadding: EdgeInsets.only(
top: 13, bottom: 13, left: 16, right: 16),
tabs: [
Text(
"TAB A",
),
Text(
"TAB B",
),
]),
),
),
),
];
},
body: TabBarView(
controller: _tabController,
children: [
TabA(),
const Center(
child: Text('Display Tab 2',
style: TextStyle(fontSize: 16, fontWeight: FontWeight.bold)),
),
],
),
),
);
}
我发现向下滚动时,它会在 TabBar 上有一个顶部填充。有什么办法可以去掉那个空间吗?我已经设置了 SliverAppBar 的工具栏高度,但即使我降低高度,该空间也会保持在那里。
答案 0 :(得分:1)
只需设置属性 pinned: false
固定→ bool 应用栏是否应在滚动视图开始时保持可见。 [...] 最后
同时从底部删除 tabBar:并将其添加到列内的 tabbarview 上方
答案 1 :(得分:0)
感谢您的帮助。
最后,我还有另一个可以考虑的解决方案。我在这里发帖供其他人参考。
Widget build(BuildContext context) {
return Scaffold(
body: NestedScrollView(
floatHeaderSlivers: true,
headerSliverBuilder: (BuildContext context, bool innerBoxIsScrolled) {
return <Widget>[
SliverAppBar(
backgroundColor: Colors.yellow,
title: Text(
"WhatsApp type sliver appbar",
),
elevation: 0.0,
forceElevated: false,
pinned: false,
floating: true,
primary: false,
centerTitle: false,
titleSpacing: NavigationToolbar.kMiddleSpacing,
automaticallyImplyLeading: false,
),
SliverAppBar(
backgroundColor: Colors.orange,
pinned: true,
primary: false,
centerTitle: false,
titleSpacing: 0,
toolbarHeight: 48,
automaticallyImplyLeading: false,
forceElevated: true,
title: Align(
alignment: Alignment.topLeft,
child: TabBar(
isScrollable: true,
indicatorColor: Colors.white,
indicatorSize: TabBarIndicatorSize.label,
controller: _tabController,
labelPadding: EdgeInsets.only(
top: 13, bottom: 13, left: 16, right: 16),
tabs: [
Text(
"TAB A",
),
Text(
"TAB B",
),
]),
),
),
];
},
body: TabBarView(
controller: _tabController,
children: [
TabA(),
const Center(
child: Text('Display Tab 2',
style: TextStyle(fontSize: 16, fontWeight: FontWeight.bold)),
),
],
),
),
);
}
基本上,我所做的是分离 2 个 SliverAppBar,一个不是固定和浮动的;另一个被固定。这使得上方的应用栏在向下滚动时消失并在向上滚动时显示,而标签栏将保持固定在那里。