我试图在一个应用程序的初始页面建立一个底部导航栏，我在这个底部栏中添加了几个选项卡，用户应该能够点击其中一个选项卡来获得不同的选项卡。 但该条仅用于导航到其他页面。 在其中一个页面中，我添加了一个卡，用户可以点击它们进入详细页面。 然而，当它在详细页中时，导航栏消失了。 我想知道如何使我的导航栏始终可见的应用程序。
下面的代码是关于如何在主页中建立底栏的，
......
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()));
},
......
我正在寻找一种方法来解决问题的基础上，我已有的代码，但如果有任何其他有效的方法来解决它，我将非常感激。
使用这个插件prestistant_bottom_nav_bar.根据问题你需要在每个页面的bottomnav栏。你可以禁用bottomnav在特定的屏幕签出以上链接
在我看来，这是一个很好的插件。在这个链接中签出导航样式。你可以更改底部导航栏的设计: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,
),
);
}
我也遇到过类似的问题。 我从您的查询中了解到，不同的页面在不同的选项卡上被调用（在底部导航栏中），但是app bar/底部导航栏本身是不可见的。
我建议您创建另一个dart文件。 为了方便起见，我们说它blank.dart。 在这个blank.dart中，您为底部导航栏编写代码（您已经编写过了），并调用这个blank.dart中的所有不同页面，因此，基本上，导航栏将与在这个blank.dart中调用的所有其他页面通用。您可以将它理解为blank.dart是父选项卡，而所有其他不同选项卡是其子选项卡，因此父选项卡可以导航到其子小部件。
您可以在我的GitHub上查看类似的解决方案，网址是lib/screens/blank.dart:http://GitHub.com/samflab/fitility
