Flutter底部导航嵌套路由切换tab时重置根页面问题求助

解决方案 #

你只需要修改main_screen.dart中底部导航栏的onTap回调逻辑即可实现需求，具体修改如下：

第一步：修改BottomNavigationBar的onTap回调 #

找到原有代码中BottomNavigationBar的onTap属性：

onTap: (index) {
  setState(() {
    _selectedIndex = index;
  });
},

替换为以下代码：

onTap: (index) {
  if (index != _selectedIndex) {
    // 弹出目标tab导航栈中所有子页面，回到根路由
    _navigatorKeys[index].currentState?.popUntil((route) => route.isFirst);
    setState(() {
      _selectedIndex = index;
    });
  }
},

可选优化 #

你当前子页面跳转时直接调用Navigator.push默认会使用当前上下文最近的Navigator，也就是每个tab自己的嵌套Navigator，符合预期不需要额外修改。如果后续出现跳转会把底部导航栏盖住的情况，说明代码拿到了根Navigator，此时可以在跳转时明确指定使用子Navigator：

// 以HomePage跳转Screen2为例
Navigator.of(context, rootNavigator: false).push(
  PageRouteBuilder(pageBuilder: (_,__,___) => Screen2())
);

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