Flutter 在 MultiBlocProvider 中使用 BlocListener 和 BlocBuilder

Posted 2023-02-23

【中文标题】Flutter 在 MultiBlocProvider 中使用 BlocListener 和 BlocBuilder

【英文标题】：Flutter use BlocListener and BlocBuilder inside MultiBlocProvider

【发布时间】：2022-01-06 05:41:47

【问题描述】：

在我的程序中，我有两个不同的 Bloc bloc1 和 bloc2。我使用MultiBlocProvider 并添加这两个集团。现在我想在MultiBlocProvider 中同时使用BlocListener 和BlocBuilder。对于bloc1 我要BlocBuilderand 对于bloc2 我要BlocListener。我该怎么做？

Scaffold(
      body: MultiBlocProvider(
        providers: [
          BlocProvider<GenerateFieldsBloc>(
            create: (_) => bloc1,
          ),
          BlocProvider<SubmitFieldBloc>(
            create: (_) => bloc2,
          ),
        ],
        child:() //here how can I use both BlocListener and BlocBuilder ???
     ),
);

【参考方案1】：

您可以按如下方式嵌套它们：

BlocListener<SubmitFieldBloc, SubmitFieldState>(
  listener: (context, state) 
    // listen to SubmitFieldBloc
  ,
  child: BlocBuilder<GenerateFieldsBloc, GenerateFieldsState>(
    builder: (context, state) 
       // build with GenerateFieldsBloc 
    
  ),
)

【参考方案2】：

如果您使用构建器小部件包装孩子，则可以使用这些提供程序。但是在读取提供程序时，请确保使用构建器的上下文。

Scaffold(
      body: MultiBlocProvider(
          providers: [
            BlocProvider<GenerateFieldsBloc>(
              create: (_) => bloc1,
            ),
            BlocProvider<SubmitFieldBloc>(
              create: (_) => bloc2,
            ),
          ],
        child: Builder(
          builder: (context) 
            return BlocListener<GenerateFieldsBloc, GenerateFieldsState>(
            listener: (context, state) 
              // TODO: implement listener
            ,
            child: BlocBuilder<SubmitFieldBloc, SubmitFieldState>(
              builder: (context, state) 
                return Text('asdasd');
              ,
            ),
          );
          
        ),
      ),
    );

【讨论】：

这也是正确的。非常感谢。