访问多个提供者的 BlocConsumer

Question

我有这个应用程序，其中我的小部件用 MultiBlocProvider 包裹，我发送了 2 个提供商：

MultiBlocProvider(
    providers: [
      BlocProvider<AppCubit>(
        create: (BuildContext context) => AppCubit(),
      ),
      BlocProvider<ProfileCubit>(
        create: (BuildContext context) => ProfileCubit(),
      ),
    ],
    child: HomePage(),

在 HomePage 小部件上，我使用 BlocConsumer 访问第一个小部件，但我不知道如何获取所有小部件。我是否需要将 BlocConsumer 嵌套到 builder 部分才能访问我的提供商？访问我发送到我的小部件的 x 数量的提供商的推荐方法是什么？

class HomePage extends StatefulWidget {
  @override
  Widget build(BuildContext context) {
    return BlocConsumer<AppCubit, AppState>(
      ...
      builder: (context, state) {
        return Scaffold(
          backgroundColor: Theme.of(context).primaryColorLight,
          body: null,
        );
      },
      ...
    );
  }
}

Answer 1

MultiBlocProvider 正在将您的 Bloc 添加到 BuildTree 下的上下文中到 MultiBlocProvider 的子项，因此到 HomePage()。 BlocConsumer 类似于使用 BlocBuilder（用于在状态更改后重建 UI）和 BlocListener（用于其他反应，例如状态更改后的导航）。您可以在 initState() 中分配您的 Bloc，如下所示：

 @override
  void initState() {
    super.initState();
    appCubit = BlocProvider.of<AppCubit>(context); 
    profileCubit = BlocProvider.of<ProfileCubit>(context);
    appCubit.add(SomeFetchEvent());
    profileCubit.add(SomeFetchEvent());
  }

注意：在BlocConsumer/BlocBuilder中你想显示UI关于当前状态。因此，您必须决定在哪个状态下嵌套下一个 BlocConsumer/BlocBuilder。例如：

BlocConsumer<AppCubit, AppState>(
      ...
      builder: (context, state) {
       if (state == *someState*){
        // Nest next Consumer
          BlocConsumer<ProfileCubit, AppState>(
          ...
          builder: (context, state) {
          if(state == *someState*){ return ...}
         },
         ...
        );
       }
      },
      ...
    );

您可能会发现，这样做并没有多大用处。如果在 AppCubit 中的州发生变化时不需要更改 UI，那么考虑将其放入 BlocListener 并将 Profile Cubit 放入 BlocConsumer/BlocBuilder。例如：

 @override
  Widget build(BuildContext context) {
     return Scaffold(
          backgroundColor: Theme.of(context).primaryColorLight,
          body: BlocListener<AppCubit, AppState>(
               listener: (context, state) {
               // do some stuff here, like Navigating, Changing Variable at specific 
               // state
               },
               child: BlocBuilder<ProfileCubit, ProfileState>(
                builder: (context, state){
                // Change your UI according to the current state
                if(state == *someState*){
                 return *someWidget*
                  }
                }
           )
       ); 
   }

您可以在此处找到更多详细信息： https://bloclibrary.dev/#/flutterbloccoreconcepts?id=multiblocprovider

访问多个提供者的 BlocConsumer

BlocConsumer accessing multiple providers

flutter

bloc