如何在Flutter应用的指定页面保持BottomNavigationBar持久显示

核心原理 #

你当前跳转时BottomNavigationBar消失，是因为默认Navigator.push操作的是应用全局的根导航栈，新页面会直接覆盖包含BottomNavigationBar的外层Scaffold。我们需要为每个Tab页创建独立的子导航栈，跳转操作在子栈内执行，外层Scaffold（含BottomNavigationBar）就不会被替换。同时新增控制变量即可实现BottomNavigationBar的显隐切换，全程使用Material组件，无需引入Cupertino相关库。

具体实现步骤 #

1. 新增控制变量 #

在当前State类中新增两个变量：

// 控制BottomNavigationBar是否显示
bool _showBottomNav = true;
// 每个Tab对应一个GlobalKey，用于管理独立的子导航栈
final List<GlobalKey<NavigatorState>> _navKeys = [
  GlobalKey<NavigatorState>(),
  GlobalKey<NavigatorState>(),
  GlobalKey<NavigatorState>(),
  GlobalKey<NavigatorState>(),
];

2. 重构Tab页渲染逻辑，接入子导航栈 #

封装子导航栈构建方法，同时在路由监听中实现BottomNavigationBar的显隐控制：

// 子导航栈构建方法
Widget _buildTabNavigator(int tabIndex, Widget initialPage) {
  return Navigator(
    key: _navKeys[tabIndex],
    onGenerateRoute: (settings) {
      return MaterialPageRoute(
        builder: (context) => settings.arguments as Widget? ?? initialPage,
      );
    },
    // 监听子栈路由变化，控制BottomNavigationBar显隐
    observers: [
      NavigatorObserver(
        didPush: (route, previousRoute) {
          // 在此处判断路由名称，自定义显隐规则，比如课程详情页隐藏、其他页面保留
          if(route.settings.name == '/courseDetail') {
            if(_showBottomNav) setState(() => _showBottomNav = false);
          } else {
            if(!_showBottomNav) setState(() => _showBottomNav = true);
          }
        },
        didPop: (route, previousRoute) {
          // 页面返回时同步更新显隐状态
          if(previousRoute?.settings.name == '/courseDetail') {
            if(_showBottomNav) setState(() => _showBottomNav = false);
          } else {
            if(!_showBottomNav) setState(() => _showBottomNav = true);
          }
        }
      )
    ],
  );
}

修改build方法中的代码，替换原有的页面渲染逻辑，同时增加BottomNavigationBar显隐控制：

// 拦截安卓返回键，优先退出子栈页面，再退出应用
return WillPopScope(
  onWillPop: () async {
    final canPop = await _navKeys[selectedIndex].currentState?.maybePop() ?? false;
    if(canPop) return false;
    return true;
  },
  child: user == null
    ? Scaffold(
        bottomNavigationBar: Visibility(
          visible: _showBottomNav,
          child: buildUnAuthenticatedBottomNavigationBar(context),
        ),
        body: SafeArea(
          child: _buildTabNavigator(selectedIndex, unAuthenticatedScreens[selectedIndex]),
        ),
      )
    : Scaffold(
        bottomNavigationBar: Visibility(
          visible: _showBottomNav,
          child: buildAuthenticatedBottomNavigationBar(context),
        ),
        body: SafeArea(
          child: _buildTabNavigator(selectedIndex, authenticatedScreens[selectedIndex]),
        ),
      ),
);

3. 修改Tab内页面的跳转逻辑 #

原有全局跳转改为使用当前Tab的子导航栈操作：

// 旧写法（会覆盖全局导航栈，BottomNavigationBar消失）
// Navigator.push(context, MaterialPageRoute(builder: (context) => CourseDetailPage()));

// 新写法（在子栈内跳转，保留BottomNavigationBar）
_navKeys[selectedIndex].currentState?.push(
  MaterialPageRoute(
    // 给需要隐藏BottomNavigationBar的页面设置对应路由名，方便监听判断
    settings: const RouteSettings(name: '/courseDetail'),
    builder: (context) => const CourseDetailPage(),
  ),
);

4. 优化BottomNavigationBar点击逻辑 #

切换Tab时自动恢复BottomNavigationBar显示，重复点击当前Tab回到初始页：

// 替换你原有BottomNavigationBar中的onTap逻辑
onTap: (index) {
  if (index == selectedIndex) {
    // 重复点击当前Tab，清空子栈回到初始页
    _navKeys[index].currentState?.popUntil((route) => route.isFirst);
    setState(() => _showBottomNav = true);
  } else {
    setState(() => selectedIndex = index);
    // 切换Tab时自动恢复BottomNavigationBar显示
    if(!_showBottomNav) setState(() => _showBottomNav = true);
  }
},

额外优化建议 #

你当前的buildAuthenticatedBottomNavigationBar和buildUnAuthenticatedBottomNavigationBar两个方法代码完全重复，仅最后一个Tab对应的页面不同，可合并为一个公用方法，后续修改样式只需调整一次即可。

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