如何从路由跳转页面访问MultiBlocProvider中声明的Bloc

问题根源 #

你遇到的No ancestor could be found错误，核心原因是**TodoPage.createRoute()里的context不在MultiBlocProvider的子树范围内**。

MaterialPageRoute的builder参数提供的context是路由栈中新创建的上下文，它和ListView里能访问到TodoBloc的上下文不是同一个层级——你的MultiBlocProvider只包裹了ListPage的子树，路由跳转后的新页面默认不在这个子树里，自然找不到Bloc实例。

解决方案 #

针对你希望Bloc处于更高层级、让列表页能响应创建页操作结果的需求，推荐两种靠谱的解决方式：

方案1：将Bloc实例从当前上下文传递到新路由

修改TodoPage的路由方法，让它接收TodoBloc参数，跳转时从当前可访问Bloc的上下文里获取实例并传入：

1. 修改TodoPage的路由方法：

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

  // 新增参数接收TodoBloc实例
  static Route<void> createRoute(TodoBloc todoBloc) {
    return MaterialPageRoute(
      builder: (context) => BlocProvider.value(
        value: todoBloc,
        child: const TodoPage(),
      ),
    );
  }
}

2. 修改ListView中FAB的跳转逻辑：

floatingActionButton: BlocBuilder<TodoBloc, TodoState>(
  builder: (context, state) {
    return FloatingActionButton(
      onPressed: () async {
        // 从当前上下文获取TodoBloc实例，再传给路由
        final todoBloc = context.read<TodoBloc>();
        await Navigator.of(context).push(
          TodoPage.createRoute(todoBloc),
        );
      },
    );
  },
),

方案2：将MultiBlocProvider移到全局层级（更贴合你的需求）

如果希望ListBloc和TodoBloc能被多个页面共享（比如列表页要监听创建页的操作失败状态），直接把MultiBlocProvider移到MaterialApp的上层，这样整个应用的路由都能访问到这些Bloc：

void main() {
  runApp(const MyApp());
}

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

  @override
  Widget build(BuildContext context) {
    return MultiBlocProvider(
      providers: [
        BlocProvider<ListBloc>(
          create: (context) => ListBloc(
            todosRepository: context.read<TodoRepository>(),
          ),
        ),
        BlocProvider<TodoBloc>(
          create: (context) => TodoBloc(
            todosRepository: context.read<TodoRepository>(),
          ),
        ),
      ],
      child: MaterialApp(
        home: const ListPage(),
        // 其他路由配置...
      ),
    );
  }
}

之后TodoPage的路由可直接内部获取Bloc，无需额外传递：

static Route<void> createRoute() {
  return MaterialPageRoute(
    builder: (context) => const TodoPage(),
  );
}

// 在TodoPage内部直接使用
@override
Widget build(BuildContext context) {
  final todoBloc = context.read<TodoBloc>();
  // ...其他代码
}

补充说明 #

• 方案2更符合你的需求：Bloc处于全局层级后，ListPage可通过BlocListener或BlocBuilder监听TodoBloc的状态变化，当创建操作失败时直接在列表页做出响应（比如显示提示 SnackBar）。
• 不要在路由的builder上下文里尝试获取上层Bloc，这个上下文是路由独立的，和之前页面的上下文没有层级关系。

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