如何通过命名/生成式路由将Bloc/Cubit传递到新页面？

嘿，我完全懂你踩的这个坑！在ListView里给每个子组件绑定独立的Cubit，用匿名路由能顺顺当当把Cubit传到下一页，换成命名或者生成式路由就卡壳，对吧？别慌，我来给你拆解解决步骤～

首先得搞懂核心问题：匿名路由是直接在builder里用当前context拿到Cubit，但命名/生成式路由是通过路由参数传递数据的，所以我们要做的就是把已有的Cubit实例作为参数传给目标页面，然后在目标页面复用这个实例，而不是重新创建。

第一步：跳转时把Cubit作为路由参数传递 #

在ListView子组件的点击事件里，先从当前context取出对应的Cubit，然后通过Navigator.pushNamed的arguments参数传过去：

onTap: () {
  // 从当前组件的BlocProvider中拿到已有的MyCubit实例
  final targetCubit = BlocProvider.of<MyCubit>(context);
  // 用命名路由跳转，把Cubit放进arguments里
  Navigator.pushNamed(
    context,
    '/detailPage', // 这是你在路由表中定义的命名路由名称
    arguments: targetCubit,
  );
}

第二步：在目标页面复用传递过来的Cubit #

到了详情页，我们不能用BlocProvider(create: ...)来创建新的Cubit，而是要用BlocProvider.value来提供我们传过来的实例，这样才能保持状态的一致性：

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

  @override
  Widget build(BuildContext context) {
    // 从路由参数中取出传递过来的Cubit
    final receivedCubit = ModalRoute.of(context)!.settings.arguments as MyCubit;

    return BlocProvider.value(
      value: receivedCubit,
      child: Scaffold(
        appBar: AppBar(title: const Text('Cubit详情')),
        body: BlocBuilder<MyCubit, MyCubitState>(
          builder: (context, state) {
            // 这里就可以正常使用原Cubit的状态数据啦
            return Center(
              child: Text('当前数据：${state.targetData}'),
            );
          },
        ),
      ),
    );
  }
}

额外避坑要点 #

• 务必用BlocProvider.value：如果用create方法，会生成一个新的Cubit实例，完全不是你想要的那个，状态也会丢失，这是最容易踩的坑！
• 提前注册命名路由：在MaterialApp的routes里要提前定义好你的命名路由，不然跳转时会报错：

  MaterialApp(
    initialRoute: '/',
    routes: {
      '/': (context) => const HomePage(),
      '/detailPage': (context) => const DetailPage(),
    },
  );
  

要是用生成式路由（比如auto_route）怎么办？ #

思路其实一样，只是参数传递的方式更规范：

1. 定义路由时允许传递MyCubit类型参数：

@MaterialAutoRouter(
  routes: [
    AutoRoute(page: HomePage),
    AutoRoute(page: DetailPage),
  ],
)
class $AppRouter {}

2. 跳转时通过生成的路由类传参：

onTap: () {
  final targetCubit = BlocProvider.of<MyCubit>(context);
  // 用auto_route生成的pushRoute方法，直接传Cubit
  context.pushRoute(DetailPageRoute(arguments: targetCubit));
}

3. 详情页接收参数并提供：

class DetailPage extends StatelessWidget {
  const DetailPage({super.key, required this.targetCubit});

  // 直接通过构造函数接收传递过来的Cubit
  final MyCubit targetCubit;

  @override
  Widget build(BuildContext context) {
    return BlocProvider.value(
      value: targetCubit,
      child: Scaffold(
        // 剩下的UI和状态监听代码和之前一样
      ),
    );
  }
}

这样不管是命名路由还是生成式路由，都能完美把ListView里的Cubit传递到新页面啦～

备注：内容来源于stack exchange，提问作者totoskiller