如何用Go_Router实现带静态顶部导航栏的Flutter Web路由？

核心实现思路 #

借助Go_Router的ShellRoute实现静态顶部栏+动态子页面的结构：

• 顶部导航栏作为外层静态组件，通过ShellRoute包裹所有子路由，切换页面时顶部栏始终保持渲染
• 子路由配置覆盖普通页面和带参数的页面，URL会随页面切换自动同步更新
• 顶部导航栏的菜单按钮通过context.go()触发路由跳转，直接关联对应URL路径

完整代码示例 #

import 'package:flutter/material.dart';
import 'package:go_router/go_router.dart';

// 静态顶部导航栏组件
class TopNavBar extends StatelessWidget {
  const TopNavBar({super.key});

  @override
  Widget build(BuildContext context) {
    return AppBar(
      title: const Text('前端Web应用'),
      actions: [
        TextButton(
          onPressed: () => context.go('/'),
          child: const Text('首页', style: TextStyle(color: Colors.white)),
        ),
        TextButton(
          onPressed: () => context.go('/settings'),
          child: const Text('设置', style: TextStyle(color: Colors.white)),
        ),
        TextButton(
          onPressed: () => context.go('/profile/456'), // 传递用户ID参数
          child: const Text('我的主页', style: TextStyle(color: Colors.white)),
        ),
      ],
    );
  }
}

// 子页面：首页
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('设置页面内容'));
  }
}

// 子页面：带参数的个人主页
class ProfilePage extends StatelessWidget {
  const ProfilePage({super.key, required this.userId});

  final String userId;

  @override
  Widget build(BuildContext context) {
    return Center(child: Text('用户ID：$userId 的个人主页'));
  }
}

// Go_Router核心配置
final GoRouter appRouter = GoRouter(
  routes: [
    // ShellRoute作为路由容器，包裹顶部栏和所有子路由
    ShellRoute(
      builder: (context, state, child) {
        return Scaffold(
          appBar: const TopNavBar(),
          body: child, // child为当前匹配的子页面组件
        );
      },
      routes: [
        // 首页路由
        GoRoute(
          path: '/',
          builder: (context, state) => const HomePage(),
        ),
        // 设置页路由
        GoRoute(
          path: '/settings',
          builder: (context, state) => const SettingsPage(),
        ),
        // 带路径参数的个人主页路由
        GoRoute(
          path: '/profile/:userId', // :userId为路径参数占位符
          builder: (context, state) {
            final userId = state.pathParameters['userId']!;
            return ProfilePage(userId: userId);
          },
        ),
      ],
    ),
  ],
);

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: appRouter,
    );
  }
}

关键细节说明 #

• ShellRoute的作用：它是一个持久化的路由容器，外层的顶部导航栏会被固定渲染，子路由的页面只会替换body中的child部分，实现静态栏+动态页的分离效果
• 参数路由处理：用:参数名定义路径参数，通过state.pathParameters['参数名']提取URL中的参数值，直接传递给目标页面组件
• URL同步逻辑：调用context.go(路径)时，Go_Router会自动更新浏览器地址栏的URL，刷新页面也能根据当前URL正确匹配到对应页面
• 导航栏状态高亮：如果需要给当前活跃的导航项添加样式，可以通过GoRouterState的location属性判断当前路径，给对应按钮设置激活状态

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