[英]How to conditionally show bottom navigation bar when changing upper tab bar in flutter
I have the following test screen on my app:我的应用程序上有以下测试屏幕:
As seen, my intention is that I will have 3 widgets connected to each upper tab.正如所见,我的意图是将 3 个小部件连接到每个上部选项卡。 And I also want to have a bottom navigation bar but I only want it to be visible when the user is under Upper Tab 3 .
而且我还想要一个底部导航栏,但我只希望它在用户位于Upper Tab 3下时可见。 For instance, the user is under Upper Tab 1 in the screenshot above but the bottom navigation bar is still visible.
例如,用户在上面屏幕截图中的上选项卡 1下,但底部导航栏仍然可见。
Here is my code that I have written to achieve this but it just does not work.这是我为实现这一目标而编写的代码,但它不起作用。 I keep seeing the bottom navigation bar no matter under which upper tab bar I am.
无论我在哪个上部标签栏下,我都会看到底部导航栏。 What am I supposed to do to achieve that my bottom navigation bar is only seen when the user is under Upper Tab 3 tab bar?
我应该怎么做才能使我的底部导航栏仅在用户位于Upper Tab 3标签栏下时才能看到?
import 'package:flutter/material.dart';
class TestPage extends StatefulWidget {
@override
_TestPageState createState() => _TestPageState();
}
class _TestPageState extends State<TestPage>
with AutomaticKeepAliveClientMixin {
@override
void initState() {
super.initState();
}
@override
bool get wantKeepAlive => true;
int _currentBottomBarIndex = 0;
bool _showBottomBar = false;
final _tabs = [
Center(child: Text('Bottom Tab 1')),
Center(child: Text('Bottom Tab 2')),
];
Widget _changeUpperTab(upperTabIdx, isBottomBar) {
setState(() {
_showBottomBar = isBottomBar;
});
if (_showBottomBar) {
return _tabs[_currentBottomBarIndex];
} else {
return Center(child: Text('Tab ' + upperTabIdx.toString()));
}
}
@override
Widget build(BuildContext context) {
super.build(context);
return DefaultTabController(
length: 3,
child: Scaffold(
appBar: AppBar(
title: Text('Test App'),
bottom: TabBar(
indicatorColor: Colors.white,
tabs: [
Tab(
child: Text(
'Upper Tab 1',
style: TextStyle(fontWeight: FontWeight.bold),
)),
Tab(
child: Text(
'Upper Tab 2',
style: TextStyle(fontWeight: FontWeight.bold),
)),
Tab(
child: Text(
'Upper Tab 3',
style: TextStyle(fontWeight: FontWeight.bold),
)),
],
),
),
body: TabBarView(
children: [
_changeUpperTab(1, false),
_changeUpperTab(2, false),
_changeUpperTab(3, true),
],
),
bottomNavigationBar: (_showBottomBar)
? BottomNavigationBar(
currentIndex: _currentBottomBarIndex,
items: [
BottomNavigationBarItem(
icon: Icon(Icons.search),
label: 'Search',
backgroundColor: Colors.yellow),
BottomNavigationBarItem(
icon: Icon(Icons.home),
label: 'Home',
backgroundColor: Colors.red),
],
onTap: (index) {
setState(() {
_currentBottomBarIndex = index;
});
},
)
: null,
),
);
}
}
You can use this code to create it in the tab you want, but i would recommend you to create a separate statelessWidget for that tab and you can have it more organized.您可以使用此代码在您想要的选项卡中创建它,但我建议您为该选项卡创建一个单独的 statelessWidget,并且您可以让它更有条理。
class TestPage extends StatefulWidget {
@override
_TestPageState createState() => _TestPageState();
}
class _TestPageState extends State<TestPage>
with AutomaticKeepAliveClientMixin {
@override
void initState() {
super.initState();
}
@override
bool get wantKeepAlive => true;
int _currentBottomBarIndex = 0;
bool _showBottomBar = false;
final _tabs = [
Center(child: Text('Bottom Tab 1')),
Center(child: Text('Bottom Tab 2')),
];
Widget _changeUpperTab(upperTabIdx, isBottomBar) {
setState(() {
_showBottomBar = isBottomBar;
});
if (_showBottomBar) {
return Scaffold(
body: _tabs[_currentBottomBarIndex],
bottomNavigationBar: BottomNavigationBar(
currentIndex: _currentBottomBarIndex,
items: [
BottomNavigationBarItem(
icon: Icon(Icons.search),
label: 'Search',
backgroundColor: Colors.yellow),
BottomNavigationBarItem(
icon: Icon(Icons.home),
label: 'Home',
backgroundColor: Colors.red),
],
onTap: (index) {
setState(() {
_currentBottomBarIndex = index;
});
},
),
);
} else {
return Center(child: Text('Tab ' + upperTabIdx.toString()));
}
}
@override
Widget build(BuildContext context) {
super.build(context);
return DefaultTabController(
length: 3,
child: Scaffold(
appBar: AppBar(
title: Text('Test App'),
bottom: TabBar(
indicatorColor: Colors.white,
tabs: [
Tab(
child: Text(
'Upper Tab 1',
style: TextStyle(fontWeight: FontWeight.bold),
)),
Tab(
child: Text(
'Upper Tab 2',
style: TextStyle(fontWeight: FontWeight.bold),
)),
Tab(
child: Text(
'Upper Tab 3',
style: TextStyle(fontWeight: FontWeight.bold),
)),
],
),
),
body: TabBarView(
children: [
_changeUpperTab(1, false),
_changeUpperTab(2, false),
_changeUpperTab(3, true),
],
),
),
);
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.