Flutter Web开发：如何保留导航栏并局部更新内容？

是不是必须使用Router？ #

不是必须，但强烈推荐使用Flutter 2.0+引入的Router API。

旧版Navigator的命名路由在Web场景下有明显局限：

• 无法天然同步浏览器URL，刷新页面后路由状态易丢失；
• 带参数的URL直接访问需要手动解析、适配，逻辑繁琐；
• 对浏览器历史栈的支持不够完善，前进后退行为容易出现异常。

而Router API是官方为Web优化的路由方案，原生支持URL解析、浏览器历史同步，能轻松实现带参数页面的直接访问，无需额外写大量适配代码。

如何避免MaterialApp.router重绘整页，仅更新内容区？ #

MaterialApp.router本身不会强制重绘整页，只要布局结构设计合理，就能只更新内容区域，保留左侧导航栏等外围布局。核心思路是将持久化布局（导航栏）与动态内容区分离，让Router只负责内容区的切换。

具体实现步骤：

1. 自定义RouterDelegate，在build方法中返回包含导航栏的完整布局，而非单独的页面内容：

class AppRouterDelegate extends RouterDelegate<AppRouteConfig>
    with ChangeNotifier, PopNavigatorRouterDelegateMixin<AppRouteConfig> {
  @override
  final GlobalKey<NavigatorState> navigatorKey;

  AppRouterDelegate() : navigatorKey = GlobalKey<NavigatorState>();

  // 当前路由状态，根据URL解析更新
  AppRouteConfig _currentRoute = HomeRoute();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Row(
        children: [
          // 左侧导航栏：用const修饰或确保无路由状态依赖，避免重建
          const LeftNavigationBar(),
          // 内容区：用Navigator承载动态页面
          Expanded(
            child: Navigator(
              key: navigatorKey,
              pages: [
                if (_currentRoute is HomeRoute) const MaterialPage(child: HomePage()),
                if (_currentRoute is UserRoute) MaterialPage(child: UserPage(userId: (_currentRoute as UserRoute).userId)),
                // 其他路由页面...
              ],
              onPopPage: (route, result) {
                if (!route.didPop(result)) return false;
                _currentRoute = HomeRoute();
                notifyListeners();
                return true;
              },
            ),
          ),
        ],
      ),
    );
  }

  @override
  Future<void> setNewRoutePath(AppRouteConfig configuration) async {
    _currentRoute = configuration;
    notifyListeners();
  }
}

2. 路由切换时，仅更新_currentRoute状态并通知刷新，此时只有内容区的Navigator会根据新的pages重建对应页面，左侧导航栏因无状态依赖会保持不变。
3. 解析URL参数：在自定义的RouteInformationParser中，将URL路径（如/user/123）解析为带参数的路由配置（如UserRoute(userId: '123')），传递给RouterDelegate更新内容页。

额外说明 #

如果执意使用旧版Navigator，也可以通过WidgetsBinding.instance.window.popRoute监听URL变化，手动同步路由状态，但需要自己处理参数解析、历史栈管理等细节，维护成本远高于Router API，不推荐在生产环境使用。

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