Flutter Web固定左侧抽屉的嵌套路由配置方案求助

核心思路是利用GoRouter的ShellRoute，将左侧抽屉作为固定的壳布局，右侧内容区域作为子路由的承载容器。这样切换菜单时仅更新右侧内容，抽屉保持展开状态，同时支持直接通过URL访问对应页面，不会触发整页重载。

1. 依赖准备 #

确保pubspec.yaml中引入最新版go_router：

dependencies:
  flutter:
    sdk: flutter
  go_router: ^12.1.0 # 可替换为最新版本

2. 完整实现代码 #

路由常量定义 #

class AppRoutes {
  static const String home = '/';
  static const String settings = '/settings';
}

固定壳布局（含左侧抽屉） #

class ShellLayout extends StatelessWidget {
  final Widget child;

  const ShellLayout({super.key, required this.child});

  @override
  Widget build(BuildContext context) {
    return Row(
      children: [
        // 始终展开的左侧抽屉
        Container(
          width: 240,
          color: Colors.grey[100],
          child: Column(
            children: [
              const SizedBox(height: 40),
              // 菜单1：首页
              ListTile(
                title: const Text('首页'),
                onTap: () => context.go(AppRoutes.home),
              ),
              // 菜单2：设置
              ListTile(
                title: const Text('设置'),
                onTap: () => context.go(AppRoutes.settings),
              ),
            ],
          ),
        ),
        // 右侧内容区域：承载子路由页面
        Expanded(child: child),
      ],
    );
  }
}

子页面示例 #

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

  @override
  Widget build(BuildContext context) {
    return const Center(child: Text('首页内容'));
  }
}

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

  @override
  Widget build(BuildContext context) {
    return const Center(child: Text('设置页面内容'));
  }
}

GoRouter配置与主入口 #

final GoRouter _router = GoRouter(
  routes: [
    // ShellRoute作为根路由，包裹固定抽屉布局
    ShellRoute(
      builder: (context, state, child) {
        return ShellLayout(child: child);
      },
      // 子路由对应各个菜单页面
      routes: [
        GoRoute(
          path: AppRoutes.home,
          builder: (context, state) => const HomePage(),
        ),
        GoRoute(
          path: AppRoutes.settings,
          builder: (context, state) => const SettingsPage(),
        ),
      ],
    ),
  ],
);

void main() {
  runApp(const MyApp());
}

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp.router(
      title: 'Flutter Web 固定抽屉示例',
      routerConfig: _router,
    );
  }
}

关键说明 #

• ShellRoute的作用是保留外层的抽屉布局，仅更新child参数对应的内容（即右侧页面），切换路由时不会重建整个页面。
• 使用context.go()方法跳转路由，会替换当前路由栈的顶部，确保URL正确更新且不会打开新页面。
• 直接复制URL粘贴时，GoRouter会根据路径匹配到对应的子路由，通过ShellLayout渲染出抽屉+对应页面，不会触发整页重载。

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