Question

我有这个应用程序，我的小部件用 MultiBlocProvider( providers: [ BlocProvider<AppCubit>( create: (BuildContext context) => AppCubit(), ), BlocProvider<ProfileCubit>( create: (BuildContext context) => ProfileCubit(), ), ], child: HomePage(), 包裹，我在其中发送了 2 个提供商：

HomePage

在 BlocConsumer 小部件上，我使用 BlocConsumer 访问第一个小部件，但我不知道如何获取所有这些小部件。我是否需要将 builder 嵌套到 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, ); }, ... ); } } 部分才能访问我的提供程序？访问我发送到小部件的 x 个提供程序的推荐方式是什么？

deck_of_cards = {suit: cards.copy() for suit in suits}

Answer 1

MultiBlocProvider 正在将您的 Blocs 添加到上下文中的 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。因此，您必须决定在哪个 State 中嵌套下一个 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 访问多个提供者

1 个答案: