Flutter应用中如何全局固定bottomNavigationBar 切换页面不消失

你遇到的底部导航栏切换页面消失的问题，核心原因是子页面跳转时使用了全局Navigator，将承载底部导航的外层Scaffold整体覆盖导致。你现有代码的结构已经用了Offstage保活各个Tab页，只要调整嵌套路由结构即可实现全应用常驻底部导航。

第一步：修正入口挂载 #

首先修改MainPage，将你的导航组件作为根页面挂载：

class MainPage extends StatelessWidget {
  Widget build(BuildContext context) {
    return MaterialApp(
      localizationsDelegates: [
        GlobalMaterialLocalizations.delegate,
        GlobalWidgetsLocalizations.delegate,
        GlobalCupertinoLocalizations.delegate,
      ],
      supportedLocales: [
        const Locale('fa', 'iran'),
      ],
      // 挂载导航组件作为根页面
      home: MyNavigationBar(),
    );
  }
}

第二步：给每个Tab页绑定独立路由栈 #

给_pages列表里的每个页面套上独立的Navigator，这样子页面跳转只会在对应Tab的路由栈内生效，不会影响外层的底部导航：

Stack _buildScreens() {
  List<Widget> children = [];
  _pages.asMap().forEach((index, value) {
    children.add(
      Offstage(
        offstage: _currentIndex != index,
        child: TickerMode(
          enabled: _currentIndex == index,
          // 给每个Tab套独立Navigator，单独维护子路由栈
          child: Navigator(
            key: GlobalKey<NavigatorState>(debugLabel: 'tab$index'),
            onGenerateRoute: (settings) {
              return MaterialPageRoute(
                builder: (context) => value,
                settings: settings,
              );
            },
          ),
        ),
      ),
    );
  });
  return Stack(children: children);
}

第三步：调整子页面跳转逻辑 #

• 子页面内需要保留底部导航的跳转，直接用当前上下文的Navigator即可：

  // 子页面内普通跳转写法
  Navigator.of(context).push(MaterialPageRoute(builder: (context) => NextPage()));
  

• 如果需要跳转到不需要底部导航的全屏页面（比如登录页、全屏详情页），指定使用根Navigator：

  Navigator.of(context, rootNavigator: true).push(MaterialPageRoute(builder: (context) => FullScreenPage()));
  

冗余代码清理提示 #

你现有代码中声明的_selectedIndex变量和_onItemTapped方法没有实际调用，可以直接删除避免冗余；另外BottomNavigationBar的selectedIconTheme参数里有多余的逗号，建议删除避免编译警告。

内容的提问来源于stack exchange，提问作者siitaw