如何让NavigationBar实现Material 3规范的嵌套页面导航正确行为？

核心方案：为每个Tab配置独立的嵌套Navigator #

Material 3规范要求Tab内的嵌套导航保持底部栏可见，官方推荐的实现方式是给每个Tab页面单独维护一个Navigator——页面跳转发生在Tab内部的导航栈，而非全局Navigator，从而保证底部NavigationBar始终显示，同时兼容Cupertino侧滑返回功能。

实现步骤 #

• 为每个Tab的Navigator创建全局Key，用于管理各自的导航栈
• 使用IndexedStack包裹各Tab的嵌套Navigator，切换Tab时保留导航栈状态
• 在Tab页面内，通过嵌套Navigator完成详情页跳转

完整代码示例 #

class _MyWidgetState extends State<MyWidget> {
  int currentIndex = 0;
  // 为每个Tab的Navigator分配全局Key，独立管理导航栈
  final List<GlobalKey<NavigatorState>> _navigatorKeys = [
    GlobalKey<NavigatorState>(),
    GlobalKey<NavigatorState>(),
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      bottomNavigationBar: NavigationBar(
        onDestinationSelected: (int index) {
          setState(() {
            currentIndex = index;
          });
        },
        selectedIndex: currentIndex,
        destinations: const <Widget>[
          NavigationDestination(icon: Icon(Icons.home), label: "Page 1"),
          NavigationDestination(icon: Icon(Icons.person), label: "Page 2"),
        ],
      ),
      // IndexedStack缓存Tab状态，切换时不重置导航栈
      body: IndexedStack(
        index: currentIndex,
        children: [
          // Tab1的嵌套Navigator
          Navigator(
            key: _navigatorKeys[0],
            onGenerateRoute: (settings) {
              return MaterialPageRoute(
                settings: settings,
                builder: (context) => const Page1(),
              );
            },
          ),
          // Tab2的嵌套Navigator
          Navigator(
            key: _navigatorKeys[1],
            onGenerateRoute: (settings) {
              return MaterialPageRoute(
                settings: settings,
                builder: (context) => const Page2(),
              );
            },
          ),
        ],
      ),
    );
  }
}

Tab页面内的详情页跳转逻辑 #

在Page1或其子组件中，使用嵌套Navigator跳转，而非全局Navigator：

// Page1中跳转详情页
void navigateToDetail() {
  // 方式1：通过全局Key获取当前Tab的Navigator
  _navigatorKeys[0].currentState?.push(
    CupertinoPageRoute(builder: (context) => const DetailPage()),
  );

  // 方式2：在子组件中获取嵌套Navigator（无需传递Key）
  // Navigator.of(context, rootNavigator: false).push(
  //   CupertinoPageRoute(builder: (context) => const DetailPage()),
  // );
}

关键说明 #

• 底部栏持续可见：嵌套Navigator的页面跳转仅影响Tab内部区域，底部NavigationBar属于外层Scaffold，因此始终显示
• 兼容侧滑返回：使用CupertinoPageRoute可完整保留iOS风格的侧滑返回交互
• Tab状态保留：IndexedStack会缓存每个Tab的导航栈状态，切换Tab时不会丢失用户之前的页面层级
• 符合Material 3规范：这种嵌套导航的实现方式是官方明确推荐的Tab内导航方案，完全匹配Material 3的交互要求

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