Flutter中go_router结合Provider带初始参数的MVVM集成问题

方案1：将全局共享的ViewModel提升到根节点 #

既然ViewModel1不需要初始化参数，完全可以保留在应用根节点初始化，只把需要动态参数的ViewModel2放在页面级创建。这样所有页面都能访问到根节点的ViewModel1。

修改根节点的Provider配置：

runApp(
  MultiProvider(
    providers: [
      ChangeNotifierProvider(create: (context) => ViewModel1()),
      // 移除ViewModel2，因为它需要动态ID参数
    ],
    child: const MyApp(),
  ),
);

你的BaseScreen和Screen2代码可以保留，当Screen2中的ViewModel2需要访问ViewModel1时，直接通过context.read<ViewModel1>()就能拿到——根节点的Provider在所有页面的组件树之上，自然能被访问到。

方案2：使用GoRouter的ShellRoute共享Provider #

如果后续有更多需要跨页面共享的ViewModel，可以用ShellRoute创建一个共享父容器，把共享Provider放在Shell里，所有子页面都嵌套在这个Shell之下，就能自动访问到共享的Provider。

示例代码：

final router = GoRouter(
  routes: [
    ShellRoute(
      builder: (context, state, child) {
        // 在这里放置需要共享的Provider
        return ChangeNotifierProvider(
          create: (_) => ViewModel1(),
          child: child,
        );
      },
      routes: [
        GoRoute(
          path: '/screen1',
          builder: (context, state) => Screen1(), // Screen1可直接访问ViewModel1
        ),
        GoRoute(
          path: '/screen2/:id',
          builder: (context, state) {
            final id = int.parse(state.pathParameters['id']!);
            return Screen2(id: id); // Screen2自己创建ViewModel2，同时能访问Shell里的ViewModel1
          },
        ),
      ],
    ),
  ],
);

方案3：通过构造函数传递依赖（适合临时场景） #

如果不想修改Provider层级，可以在跳转到Screen2时，把ViewModel1的实例通过构造函数传递给Screen2，再传给ViewModel2。这种方式适合简单场景，但会增加组件间的耦合。

示例：

// 在Screen1中跳转
context.push('/screen2', extra: context.read<ViewModel1>());

// 在Screen2中接收
class Screen2 extends BaseView<ViewModel2> {
  final int id;
  final ViewModel1 viewModel1;

  Screen2({required this.id, required this.viewModel1});

  @override
  ViewModel2 createViewModel() => ViewModel2(id, viewModel1);

  // ...页面其他代码
}

// 在GoRouter中配置路由
GoRoute(
  path: '/screen2/:id',
  builder: (context, state) {
    final id = int.parse(state.pathParameters['id']!);
    final viewModel1 = state.extra as ViewModel1;
    return Screen2(id: id, viewModel1: viewModel1);
  },
),

这样ViewModel2内部就不需要通过context.read，直接使用构造函数传入的viewModel1即可。

内容的提问来源于stack exchange，提问作者Johnny-Luu