如何在 Flutter 的详细页面中保持底部导航栏可见？答案

【问题标题】：How to keep the bottom navigation bar visible in detail pages in Flutter?如何在 Flutter 的详细页面中保持底部导航栏可见？
【发布时间】：2020-08-05 14:12:44
【问题描述】：

我试图在应用程序的初始页面中构建一个底部导航栏，我在这个底部栏中添加了几个选项卡，用户应该能够点击其中一个以访问不同的选项卡。但该栏仅用于导航到其他页面。在其中一个页面中，我添加了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()));
          },
......

我正在寻找一种基于我现有代码解决问题的方法，但如果有任何其他有效的方法来解决它，我将不胜感激。

【问题讨论】：

标签： android flutter

【解决方案1】：

使用此插件Presistant_bottom_nav_bar。根据问题，您需要每个页面中的底部导航栏。您可以在链接上方的特定屏幕结帐中禁用底部导航

在我看来这是一个非常好的插件。在这个链接中查看导航样式。你可以更改底部导航栏的设计：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,
      ),
    );
}

【讨论】：

感谢您的帮助。我在我的项目中使用了这个包，但是当我尝试更改确切的样式时遇到了一个错误说A PersistentTabController was used after being disposed.。问题是怎么来的？
你能用修改后的代码更新问题吗？ @LeYoungChen

【解决方案2】：

我遇到了类似的问题。根据我从您的查询中了解到的是，在不同的选项卡上（在底部导航栏中）调用了不同的页面，但应用栏/底部导航栏本身不可见。

我建议您创建另一个 dart 文件。为方便起见，让我们说它blank.dart。在此 blank.dart 中，您为底部导航栏（您已经编写过）编写代码并调用此 blank.dart 中的所有不同页面所以基本上，导航栏对于将在此空白.dart 中调用的所有其他页面都是通用的您可以将其理解为 blank.dart 是父级，所有其他不同的选项卡都是其子级，因此父级可以导航到其子小部件。

您可以在我的 GitHub 上查看 lib/screens/blank.dart 中的类似解决方案：http://github.com/samflab/fitility

【讨论】：

【解决方案3】：

您好，您可以通过在 main.dart 中添加 BottomNavigationBar 来解决此问题，然后根据 BottomNavigationBaritem 的 currentIndex，您可以更改脚手架中的屏幕（body:anyScreenAccordingToindex）。例如如果 currentIndex==2 那么 body:secondPage()

【讨论】：