如何为不同的 UI 使用多个 Bloc？

Posted 2023-02-19

【中文标题】如何为不同的 UI 使用多个 Bloc？

【英文标题】：How to use multiple Blocs for different UIs?

【发布时间】：2021-07-03 08:05:05

【问题描述】：

我有一个没有任何 Bloc 的 Landing UI、一个带有 Bloc 的 Register UI、一个带有 Bloc 的 Verification UI 和一个带有 Bloc 的 Home UI。 在每一个中，我都定义了 BlocProvider.of。 主要我在 Material App 的主页上定义了一个 Multiple Bloc Provider，每个都有它的孩子，并且提供者的主要孩子是这样的登录页面：

 home: MultiBlocProvider(
        providers: [
           BlocProvider<UserBloc>(
             create: (context) => UserBloc(UsRepoImp()),
              child: RegisterUi(),
           ),
           BlocProvider<VerificationBloc>(
             create: (context) => VerificationBloc(VerRepoImp()),
               child: VerificationUi(),
         ),
           BlocProvider<HomeBloc>(
             create: (context) => HomeBloc(HomeRepoImp()),
               child: HomeUi(),
         ),
        ],
        child: LandingUi(),
      ),

还有一件事，验证 UI 从 Register Bloc 状态返回，如下所示：

 BlocBuilder<UserBloc, UserState>(
                    builder: (context, state) 
                      if (state is UserLoading) 
                        return CircularProgressIndicator(
                          valueColor:
                              AlwaysStoppedAnimation<Color>(Color(0xff7b68ee)),
                        );
                       else if (state is UserRegistered) 
                        return VerifyAccount();
                       else if (state is UserError) 
                        return Text('Error');
                      
                      return SizedBox(
                        height: 10.0,
                      );
                    ,
                  ),

但是当我运行时，我遇到了 Bloc 不应该有祖先的错误。 我应该如何使这些 Bloc 与 UI 更改正确通信？

【参考方案1】：

我认为您以错误的方式使用MultiBlocProvider。你不应该在那里提供child，而只是在那里提供create函数的参数，然后在这个MultiBlocProvider下面的小部件树中，你可以使用BlocBuilder来收听上面提供的任何块树，如果需要在同一个小部件中监听多个块，则需要嵌套BlocBuilders。

示例：

  @override
  Widget build(BuildContext context) => MultiBlocProvider(
        providers: [
          BlocProvider<RecorderBloc>(
            create: (context) => myFirstBloc(),
          ),
          BlocProvider<PermissionBloc>(
            create: (context) => mySecondBloc(),
          )
        ],
        child:myChild()
      );

然后在 my_child.dart 内：

  @override
  Widget build(BuildContext context) 
    return BlocBuilder<MyFirstBloc, MyFirstBlocState>(
      builder: (context, myFirstBlocState) =>
          BlocBuilder<MySecondBloc, MySecondBlocState>(
        builder: (context, secondBlocState) 
          //return widget based on the states of both blocs...
        ,
      ),
    );