Flutter持久化BottomNavigationBar路由异常：登出跳转问题求助

算力阿峰

2026-5-9

解决Flutter持久化BottomNavigationBar登出路由异常问题

嘿，我仔细看了你的问题和仓库代码，立马就找到问题所在啦！

问题根源

你遇到的核心问题是导航上下文选错了：你的MainScreen内部维护了自己的导航栈（用来切换底部导航的页面），当你调用Navigator.of(context)时，默认拿到的是MainScreen内部的导航器实例。所以你执行pushAndRemoveUntil时，只是清空了MainScreen里的子页面栈，把LoginScreen加到了这个子栈里——这就导致LoginScreen被嵌套在带有BottomNavigationBar的MainScreen中，完全不是你想要的全屏登录页效果。

解决方案

只需要修改登出代码，确保你操作的是根导航器（也就是MaterialApp层级的导航器），而不是MainScreen内部的子导航器：

1. 修改登出导航代码

把原来的Navigator.of(context)改成带rootNavigator: true的版本：

// 正确的登出导航代码
Navigator.of(context, rootNavigator: true).pushAndRemoveUntil(
  MaterialPageRoute(builder: (context) => LoginScreen()),
  (Route<dynamic> route) => false,
);

rootNavigator: true会强制获取最顶层的导航器，这样执行pushAndRemoveUntil时，会清空整个根路由栈，把LoginScreen作为新的根页面，自然就不会带着BottomNavigationBar了。

2. 优化初始路由配置（可选但推荐）

为了让路由结构更清晰，建议在MaterialApp里根据登录状态配置初始路由，确保LoginScreen和MainScreen都在根路由层级：

MaterialApp(
  // 根据登录状态决定初始页面
  initialRoute: isUserLoggedIn ? '/main' : '/login',
  routes: {
    '/login': (context) => LoginScreen(),
    '/main': (context) => MainScreen(),
  },
);

这样不管是登录还是登出，所有页面切换都是在根导航栈里操作，能避免很多嵌套导航的坑。