使用相同 Bloc/Cubit 的多个 BlocBuilder，每个 BlocBuilder 用于不同的事件

Posted 2023-03-17

【中文标题】使用相同 Bloc/Cubit 的多个 BlocBuilder，每个 BlocBuilder 用于不同的事件

【英文标题】：Using multiple BlocBuilder of same Bloc/Cubit, each for different events

【发布时间】：2022-01-01 22:00:33

【问题描述】：

就像下面的官方代码示例一样，我使用CounterCubit 中的两个BlocBuilder 用于两个不同的事件increment 和decrement。

它运行时没有任何错误，但两个 BlocBuilder 都在调用每个事件。

我希望一个 Builder 应该调用增量，一个 Builder 应该调用减量。

class CounterView extends StatelessWidget 

@override
Widget build(BuildContext context) 
final textTheme = Theme.of(context).textTheme;

return Scaffold(
  appBar: AppBar(title: const Text('Counter')),
  body: Center(
      child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: <Widget>[
        BlocBuilder<CounterCubit, int>(
          builder: (context, state) 
            return Text('Increment $state', style: textTheme.headline2);
          ,
        ),
        BlocBuilder<CounterCubit, int>(
          builder: (context, state) 
            return Text('Decrement $state', style: textTheme.headline2);
          ,
        ),
      ])),
  floatingActionButton: Column(
    mainAxisAlignment: MainAxisAlignment.end,
    crossAxisAlignment: CrossAxisAlignment.end,
    children: <Widget>[
      FloatingActionButton(
        key: const Key('counterView_increment_floatingActionButton'),
        child: const Icon(Icons.add),
        onPressed: () => context.read<CounterCubit>().increment(),
      ),
      const SizedBox(height: 8),
      FloatingActionButton(
        key: const Key('counterView_decrement_floatingActionButton'),
        child: const Icon(Icons.remove),
        onPressed: () => context.read<CounterCubit>().decrement(),
      ),
    ],
  ),
 );
 

我可以使用单个 CounterCubit 来实现吗？

或者我需要创建两个不同的 Cubit 类，例如 IncrementCubit 和 DecrementCubit。

【问题讨论】：

您需要两个不同的计数器，还是只针对特定事件重建 UI？

@croxx5f 两个不同的计数器。

【参考方案1】：

您的 counter cubit 应该同时发出递增和递减状态。 一个 BlocBuilder 就是你应该使用的所有东西来保持它的简单。 请参考集团文件here

【讨论】：

是的，我的计数器腕尺在递增和递减状态下都发出，但是我想在递增和递减时更新一个小部件，并且两个小部件都可以在屏幕上的任何位置，所以我想要为每个单独的集团建设者。

如果您将 bloc builder 提供给整个小部件，则状态将是可访问的。然后为状态创建一个 if else 语句。

我的屏幕还有许多其他小部件，所以如果我们为整个小部件提供 bloc builder 则也不需要重建其他小部件，但我只想重建两个关于增量和减量结果的小部件.