如何解决BlocProvider.of()调用时提示上下文不存在HomeBloc的问题？

问题根源 #

1. 上下文层级错误：你传递给MyHomeScreen的context是GoRoute builder的上下文，该上下文位于BlocProvider的父层级，因此在MyHomeScreen中用此上下文调用BlocProvider.of(context)时，无法找到父层级之下的HomeBloc实例。
2. Bloc实例化时机不当：你在路由映射初始化时就直接创建了HomeBloc实例，而非在路由被访问时延迟创建，这会导致Bloc生命周期与路由生命周期脱节，也可能引发重复实例化问题。

解决方案 #

方案一：修正上下文传递（快速修复）

通过Builder组件将BlocProvider的子上下文传递给页面组件，确保页面能获取到正确的Bloc实例：

GoRoute(
  path: "/",
  builder: (BuildContext context, GoRouterState state) {
    return BlocProvider(
      create: (context) => homeBuilder!.create,
      child: Builder(
        // 使用BlocProvider的子上下文传入页面
        builder: (ctx) => homeBuilder!.builder(ctx, state),
      ),
    );
  },
  routes: otherPageRouters,
),

方案二：规范Bloc创建方式（推荐）

调整RouterWidgetBuilder的定义，让Bloc在路由访问时才创建，同时解决上下文问题：

1. 修改RouterWidgetBuilder的类型定义：

// 定义Bloc创建函数的类型
typedef BlocCreator = BlocBase<Object?> Function();

class RouterWidgetBuilder {
  final BlocCreator create;
  final Widget Function(BuildContext context, GoRouterState state) builder;

  RouterWidgetBuilder({required this.create, required this.builder});
}

2. 初始化路由映射时传递Bloc创建函数：

static final GoRouter routers = RouterX.generateRoutes(
  routeMaps: {
    "/" : RouterWidgetBuilder(
      create: () => HomeBloc(), // 传递创建函数而非直接实例
      builder: (context, params) => const MyHomeScreen(),
    ),
    "/details" : RouterWidgetBuilder(
      create: () => DetailBloc(),
      builder: (context, params) => const DetailsScreen(),
    ),
  }
);

3. 在路由中调用函数创建Bloc并传递正确上下文：

GoRoute(
  path: "/",
  builder: (BuildContext context, GoRouterState state) {
    return BlocProvider(
      create: (context) => homeBuilder!.create(), // 调用函数创建实例
      child: Builder(
        builder: (ctx) => homeBuilder!.builder(ctx, state),
      ),
    );
  },
  routes: otherPageRouters,
),

备选方案：在页面内部处理上下文

如果不想修改路由层代码，也可以在MyHomeScreen内部用Builder包裹需要访问Bloc的组件：

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Builder(
        builder: (ctx) {
          // 使用Builder提供的子上下文获取Bloc
          final homeBloc = BlocProvider.of<HomeBloc>(ctx);
          return // 页面内容;
        },
      ),
    );
  }
}

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