如何用go_router在Flutter的add_account_page内实现嵌套导航？

完全可以用GoRouter实现这个需求，核心是配置嵌套路由层级，并在父页面中嵌入导航容器承载子步骤页面。下面是具体实现方案：

1. 配置嵌套路由结构 #

首先在GoRouter的路由表中，将三个步骤页面作为/add-account路由的子路由，确保路由名称和路径正确关联：

final GoRouter router = GoRouter(
  initialLocation: '/accounts',
  routes: [
    // 现有页面路由
    GoRoute(
      path: '/accounts',
      builder: (context, state) => const AccountsPage(),
    ),
    GoRoute(
      path: '/import-accounts',
      builder: (context, state) => const ImportAccountsPage(),
    ),
    
    // 新增账户父路由，包含子步骤路由
    GoRoute(
      path: '/add-account',
      builder: (context, state) => const AddAccountPage(),
      // 子步骤路由配置
      routes: [
        GoRoute(
          path: 'account-info',
          name: 'account_info_step', // 对应跳转的名称
          builder: (context, state) => const AccountInfoStepPage(),
        ),
        GoRoute(
          path: 'account-type',
          name: 'account_type_step',
          builder: (context, state) => const AccountTypeStepPage(),
        ),
        GoRoute(
          path: 'account-detail',
          name: 'account_detail_step',
          builder: (context, state) => const AccountDetailStepPage(),
        ),
      ],
    ),
  ],
);

2. 改造AddAccountPage承载嵌套导航 #

在AddAccountPage中嵌入Navigator组件，用于渲染子步骤页面。这个Navigator会和GoRouter的子路由绑定，确保跳转逻辑生效：

class AddAccountPage extends StatelessWidget {
  const AddAccountPage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('新增账户')),
      // 嵌套导航容器，用于显示子步骤页面
      body: Navigator(
        key: const ValueKey('add_account_nested_nav'),
        onGenerateRoute: (settings) {
          // 根据路由路径匹配对应的步骤页面
          final path = settings.name ?? '';
          Widget page;
          if (path.contains('account-type')) {
            page = const AccountTypeStepPage();
          } else if (path.contains('account-detail')) {
            page = const AccountDetailStepPage();
          } else {
            // 默认显示第一个步骤
            page = const AccountInfoStepPage();
          }
          return MaterialPageRoute(builder: (_) => page);
        },
      ),
    );
  }
}

3. 步骤页面内的跳转逻辑 #

在任意步骤页面中，直接调用context.pushNamed()即可跳转到下一个步骤，比如在AccountInfoStepPage中：

// 跳转到账户类型选择步骤
ElevatedButton(
  onPressed: () => context.pushNamed('account_type_step'),
  child: const Text('下一步'),
)

常见问题排查（针对你之前pushNamed无反应的情况） #

• 子路由未嵌套：确保三个步骤路由是放在/add-account的routes列表下，而非根路由级别。
• 路由名称不匹配：检查pushNamed的名称和路由配置中的name字段完全一致（大小写敏感）。
• 父页面无导航容器：如果AddAccountPage没有嵌入Navigator，GoRouter没有载体显示子页面，跳转自然无反应。

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