Flutter中登录页与CupertinoTabView的导航异常问题

问题原因 #

每个CupertinoTabView都会生成独立的导航栈，你在MorePage中使用的context属于该标签页对应的子导航栈，调用pushReplacementNamed('/')只会替换子栈内的页面，无法影响根导航栈中的CupertinoHomePage，因此页面没有跳转反应。

解决方案 #

方法1：直接使用根导航器 #

修改MorePage中退出按钮的点击逻辑，通过rootNavigator: true获取根导航器实例操作：

ElevatedButton(
  onPressed: () {
    Navigator.of(context, rootNavigator: true).pushReplacementNamed('/');
  },
  child: const Text('Log out'),
)

方法2：全局导航Key控制 #

在MyApp中定义全局导航Key，通过Key直接操作根导航栈：

1. 更新MyApp类：

class MyApp extends StatelessWidget {
  static final GlobalKey<NavigatorState> navigatorKey = GlobalKey<NavigatorState>();
  
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return CupertinoApp(
      navigatorKey: navigatorKey,
      localizationsDelegates: [
        DefaultMaterialLocalizations.delegate,
        DefaultCupertinoLocalizations.delegate,
        DefaultWidgetsLocalizations.delegate,
      ],
      theme: const CupertinoThemeData(
        brightness: Brightness.light,
        primaryColor: Color.fromRGBO(85, 110, 140, 1),
      ),
      initialRoute: '/',
      routes: {
        '/': (context) => const LoginPage(),
        '/mainPage': (context) => const CupertinoHomePage(),
      },
    );
  }
}

2. 修改MorePage的退出按钮：

ElevatedButton(
  onPressed: () {
    MyApp.navigatorKey.currentState?.pushReplacementNamed('/');
  },
  child: const Text('Log out'),
)

补充说明 #

两种方案都能实现退出登录回到登录页的效果，方法1更简洁直接，方法2适合需要在全局多个位置统一控制导航的场景。

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