Flutter如何获取非祖先级父Navigator 避免页面覆盖底部导航栏

问题根因 #

你之前的判断正确，跳转逻辑调用了MaterialApp对应的根层级Navigator，根Navigator的路由栈覆盖整个应用显示区域，所以push的页面会覆盖底部导航栏。你已经为每个Tab定义了独立的navigatorKey，只要调整跳转逻辑调用对应Tab的嵌套Navigator即可。

解决方案步骤 #

• 步骤1：确认每个Tab都嵌套了独立的Navigator组件，并绑定你预先定义的navigatorKey
  示例代码：

  // 在HomePage的State中定义三个Tab对应的导航key和当前选中下标
  final List<GlobalKey<NavigatorState>> _navigatorKeys = [
    GlobalKey<NavigatorState>(),
    GlobalKey<NavigatorState>(),
    GlobalKey<NavigatorState>(),
  ];
  int _currentTabIndex = 0;
  
  // 每个Tab的页面主体用Navigator包裹
  Widget _buildTabPage(int tabIndex, Widget initialPage) {
    return Navigator(
      key: _navigatorKeys[tabIndex],
      onGenerateRoute: (settings) {
        return MaterialPageRoute(builder: (context) => initialPage);
      },
    );
  }
  

• 步骤2：修改跳转逻辑，直接用当前选中Tab的navigatorKey获取导航实例执行push
  调整后的跳转代码：

  void _push({required String routeName}) {
    // 直接取当前激活Tab的导航key对应的导航状态
    final currentTabNav = _navigatorKeys[_currentTabIndex].currentState;
    if (currentTabNav == null) return;
    final routeBuilders = _routeBuilders(currentTabNav.context);
    currentTabNav.push(
      MaterialPageRoute(
        builder: (context) => routeBuilders[routeName]!(context),
      ),
    );
  }
  

• 步骤3：可选补充系统返回键适配逻辑
  给Home页包裹WillPopScope，实现优先返回当前Tab栈内页面的逻辑：

  @override
  Widget build(BuildContext context) {
    return WillPopScope(
      onWillPop: () async {
        final currentTabNav = _navigatorKeys[_currentTabIndex].currentState;
        if (currentTabNav?.canPop() ?? false) {
          currentTabNav?.pop();
          return false;
        }
        return true;
      },
      child: Scaffold(
        body: IndexedStack(
          index: _currentTabIndex,
          children: [
            // 传入每个Tab的初始页生成对应的嵌套Navigator
            _buildTabPage(0, const HomeTabPage()),
            _buildTabPage(1, const TimesheetTabPage()),
            _buildTabPage(2, const MineTabPage()),
          ],
        ),
        bottomNavigationBar: BottomNavigationBar(
          currentIndex: _currentTabIndex,
          onTap: (index) => setState(() => _currentTabIndex = index),
          // 其余底部导航配置
        ),
      ),
    );
  }
  

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