如何在 SliverAppBar 中仅显示选项卡视图
How to show only the TabView in a SilverAppBar
我基本上希望在我的页面中间有一个 TabView 导航。
为此,我在 NestedScrollView 中使用了 SliverAppBar。
我的 SliverAppBar 仅由我的 TabView 组成,我将 TabView 包裹在 SliverAppBar 中,以便使用 pinned: true 属性。
return Scaffold(
appBar: AppBar(
title: Text('Title'),
),
body: NestedScrollView(
headerSliverBuilder: (BuildContext context, bool boxIsScrolled) {
return <Widget>[
SliverToBoxAdapter(
child: Container(
height: 500,
color: Colors.red,
)),
SliverAppBar(
pinned: true,
bottom: TabBar(
tabs: <Widget>[
Tab(
text: "Home",
icon: Icon(Icons.home),
),
Tab(
text: "Example page",
icon: Icon(Icons.help),
)
],
controller: _tabController,
)),
];
},
body: TabBarView(
children: <Widget>[
PageExample(),
PageExample(),
],
controller: _tabController,
),
),
);
它确实有效,我的问题是我想 hide/remove 包裹我的 TabBar 的这个 SliverAppBar:
我需要将 expandedHeight 设置为 0:
return脚手架(
应用栏:应用栏(
标题:文本('Title'),
),
body:嵌套滚动视图(
headerSliverBuilder: (BuildContext context, bool boxIsScrolled) {
return <Widget>[
SliverToBoxAdapter(
child: Container(
height: 500,
color: Colors.red,
)),
SliverAppBar(
expandedHeight: 0,
pinned: true,
bottom: TabBar(
tabs: <Widget>[
Tab(
text: "Home",
icon: Icon(Icons.home),
),
Tab(
text: "Example page",
icon: Icon(Icons.help),
)
],
controller: _tabController,
)),
];
},
body: TabBarView(
children: <Widget>[
PageExample(),
PageExample(),
],
controller: _tabController,
),
),
);
我基本上希望在我的页面中间有一个 TabView 导航。 为此,我在 NestedScrollView 中使用了 SliverAppBar。 我的 SliverAppBar 仅由我的 TabView 组成,我将 TabView 包裹在 SliverAppBar 中,以便使用 pinned: true 属性。
return Scaffold(
appBar: AppBar(
title: Text('Title'),
),
body: NestedScrollView(
headerSliverBuilder: (BuildContext context, bool boxIsScrolled) {
return <Widget>[
SliverToBoxAdapter(
child: Container(
height: 500,
color: Colors.red,
)),
SliverAppBar(
pinned: true,
bottom: TabBar(
tabs: <Widget>[
Tab(
text: "Home",
icon: Icon(Icons.home),
),
Tab(
text: "Example page",
icon: Icon(Icons.help),
)
],
controller: _tabController,
)),
];
},
body: TabBarView(
children: <Widget>[
PageExample(),
PageExample(),
],
controller: _tabController,
),
),
);
它确实有效,我的问题是我想 hide/remove 包裹我的 TabBar 的这个 SliverAppBar:
我需要将 expandedHeight 设置为 0:
return脚手架( 应用栏:应用栏( 标题:文本('Title'), ), body:嵌套滚动视图(
headerSliverBuilder: (BuildContext context, bool boxIsScrolled) {
return <Widget>[
SliverToBoxAdapter(
child: Container(
height: 500,
color: Colors.red,
)),
SliverAppBar(
expandedHeight: 0,
pinned: true,
bottom: TabBar(
tabs: <Widget>[
Tab(
text: "Home",
icon: Icon(Icons.home),
),
Tab(
text: "Example page",
icon: Icon(Icons.help),
)
],
controller: _tabController,
)),
];
},
body: TabBarView(
children: <Widget>[
PageExample(),
PageExample(),
],
controller: _tabController,
),
),
);