android - 如何在 Flutter 的详细页面中保持底部导航栏可见?
问题描述
我试图在应用程序的初始页面中构建一个底部导航栏,我在这个底部栏中添加了几个选项卡,用户应该能够点击其中一个以访问不同的选项卡。但该栏仅用于导航到其他页面。在其中一个页面中,我添加了一个card
,用户应该点击它们进入详细页面。但是,当它在详细信息页面中时,导航栏消失了。我想知道如何让我的导航栏在应用程序中始终可见。
下面的代码是关于我如何在主页中建立底部栏,
......
int currentTab = 0; // to keep track of active tab index
final List<Widget> screens = [
recommend(),
optional(),
backtest(),
machine(),
]; // to store tab views
Widget currentScreen = recommend(); // initial pages
final PageStorageBucket bucket = PageStorageBucket();
......
bottomNavigationBar: BottomAppBar(
color: Colors.white,
elevation: 0.2,
shape: CircularNotchedRectangle(),
notchMargin: 10,
child: Container(
height: 60,
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
MaterialButton(
minWidth: 40,
onPressed: (){
setState(() {
currentScreen = recommend();
currentTab = 0;
});
},
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Icon(
Icons.format_line_spacing,
color: currentTab == 0 ? Colors.redAccent : Colors.grey,),
Text(
'',
style: TextStyle(
color: currentTab == 0 ? Colors.redAccent : Colors.grey, ),)
],),
),
MaterialButton(
minWidth: 40,
onPressed: (){
setState(() {
currentScreen = optional();
currentTab = 1;
});
},
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Icon(
Icons.offline_pin,
color: currentTab == 1 ? Colors.redAccent : Colors.grey,),
Text(
'',
style: TextStyle(
color: currentTab == 1 ? Colors.redAccent : Colors.grey, ),)
],),
),
],
),
Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
MaterialButton(
minWidth: 40,
onPressed: (){
setState(() {
currentScreen = backtest();
currentTab = 2;
});
},
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Icon(
Icons.replay,
color: currentTab == 2 ? Colors.redAccent : Colors.grey,),
Text(
'',
style: TextStyle(
color: currentTab == 2 ? Colors.redAccent : Colors.grey, ),)
],),
),
MaterialButton(
minWidth: 40,
onPressed: (){
setState(() {
currentScreen = machine();
currentTab = 3;
});
},
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Icon(
Icons.android,
color: currentTab == 3 ? Colors.redAccent : Colors.grey,),
Text(
'',
style: TextStyle(
color: currentTab == 3 ? Colors.redAccent : Colors.grey, ),)
],),
),
],
)
],
),
),
),
下面的代码是我如何导航到详细信息页面,
return Container(
child: Card(
child: new InkWell(
onTap: (){
Navigator.push(context,
MaterialPageRoute(builder: (context) => stockDetail()));
},
......
我正在寻找一种基于我现有代码解决问题的方法,但如果有任何其他有效的方法来解决它,我将不胜感激。
解决方案
使用此插件P Resistance_bottom_nav_bar。根据问题,您需要每个页面中的底部导航栏。您可以在链接上方的特定屏幕结帐中禁用底部导航
在我看来这是一个非常好的插件。在此链接中结帐导航样式。您可以更改底部导航栏 navBarStyle 的设计:NavBarStyle.style9,只需将 style9 更改为插件提供的任何数字。我相信其中有 15 个可用
您可以使用自定义图标而不是默认图标,也可以代替这个 CupertinoColors.systemPurple 你也可以使用 Colors.red 这样的让我知道它是否有效
PersistentTabController _controller =PersistentTabController(initialIndex: 0);
//Screens for each nav items.
List<Widget> _NavScreens() {
return [
recommend(),
optional(),
backtest(),
machine(),
];
}
List<PersistentBottomNavBarItem> _navBarsItems() {
return [
PersistentBottomNavBarItem(
icon: Icon(Icons.home),
title: ("Recommend"),
activeColor: CupertinoColors.activeBlue,
inactiveColor: CupertinoColors.systemGrey,
),
PersistentBottomNavBarItem(
icon: Icon(Icons.favorite),
title: ("Optional"),
activeColor: CupertinoColors.activeGreen,
inactiveColor: CupertinoColors.systemGrey,
),
PersistentBottomNavBarItem(
icon: Icon(Icons.person_pin),
title: ("Backtest"),
activeColor: CupertinoColors.systemRed,
inactiveColor: CupertinoColors.systemGrey,
),
PersistentBottomNavBarItem(
icon: Icon(Icons.local_activity),
title: ("Machine"),
activeColor: CupertinoColors.systemIndigo,
inactiveColor: CupertinoColors.systemGrey,
),
];
}
@override
Widget build(BuildContext context) {
return Center(
child: PersistentTabView(
controller: _controller,
screens: _NavScreens(),
items: _navBarsItems(),
confineInSafeArea: true,
backgroundColor: Colors.white,
handleAndroidBackButtonPress: true,
resizeToAvoidBottomInset: true,
hideNavigationBarWhenKeyboardShows: true,
decoration: NavBarDecoration(
borderRadius: BorderRadius.circular(10.0),
),
popAllScreensOnTapOfSelectedTab: true,
navBarStyle: NavBarStyle.style9,
),
);
}
推荐阅读
- mysql - 我需要加密 MySQL 表。
- java - Swagger 2.0 无法解析引用,因为:无法解析指针
- docker - Docker 409 客户端错误。如何获得真正的错误并查看容器中的真实日志?
- angular - Angular:表单验证 - 匹配的密码不起作用
- ios - 如何在运行时更改 iOS 应用程序的应用程序名称和应用程序图标?
- xslt - 用于 XSD 的现成 XSLT
- tcl - 有没有办法停止 Tcl/itcl 中的函数覆盖?
- sql - 如何在 SQL Server 存储过程的列表中搜索值
- python - 将 .rolling 应用于带有对象的 pandas 数据框
- c++ - 如何将 getline 从文件中分离为字符串和整数。C++