Flutter中RouterDelegate监听AppState变更未触发重建、页面不切换问题求助

问题原因及修复方案 #

1. AppState实例不统一（最高概率根因）

你在AppRouterDelegate中直接初始化了独立的AppState实例，若导航栏、页面组件中使用的是其他AppState实例，修改操作不会同步到RouterDelegate监听的实例，自然不会触发路由更新。
修复方案：将AppState改为单例模式，保证全局所有组件操作的是同一个实例：

class AppState extends ChangeNotifier {
  // 单例实现
  static final AppState _instance = AppState._internal();
  factory AppState() => _instance;
  AppState._internal();

  String _selectedPage = '';
  // 其余原有代码保持不变
}

2. Navigator页面无更新标识，不触发重建

RouterDelegate收到AppState更新通知后会触发build，但你返回的pages数组中永远只有一个无标识的MaterialPage，Flutter会判定页面未发生变化，不会重建WebPageMainLayout，内部的页面自然不会切换。
修复方案：给MaterialPage添加关联选中页面的唯一key：

@override
Widget build(BuildContext context) {
  return Navigator(
    key: navigatorKey,
    pages: [
      MaterialPage(
        key: ValueKey(appState.selectedPage), // 新增唯一key
        child: WebPageMainLayout(appState: appState,)
      )
    ],
    // 原有onPopPage逻辑不变
  );
}

3. 组件树未监听AppState变化

如果你的WebsitePageDisplay是Stateful组件，或者需要避免整页重建，直接读取appState.selectedWidget不会自动响应状态变化，需要用可监听组件包裹。
修复方案：使用ListenableBuilder监听AppState变化，自动刷新页面区域：

// WebsitePageDisplay的build方法修改
return Column(
  mainAxisAlignment: MainAxisAlignment.spaceBetween,
  children: <Widget>[
    NavigationBar(),
    Expanded(
      child: ListenableBuilder(
        listenable: widget.appState,
        builder: (context, child) => widget.appState.selectedWidget,
      ),
    )
  ],
);

4. 地址栏修改不生效修复

Web端默认使用hash模式的URL策略，路径带#可能导致路由匹配失败，需主动开启路径URL策略：

import 'package:flutter_web_plugins/flutter_web_plugins.dart';

void main() {
  setUrlStrategy(PathUrlStrategy()); // 开启路径URL策略
  runApp(const MyApp());
}

同时确认MaterialApp.router的routerDelegate和routeInformationParser是全局单例，不要每次build都创建新实例。

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