Flutter使用BLOC开发计数器时增减操作后UI不更新问题求解

• 你创建了两个完全独立的CounterBloc实例：在MyApp的BlocProvider中已经初始化了一个实例，但是在_MyHomePageState中又单独新建了_counterBloc实例。BlocBuilder监听的是上层BlocProvider提供的实例，而你的悬浮按钮将事件发送到了单独新建的实例上，两者完全不互通，因此UI不会收到状态更新通知。
• 悬浮按钮的事件触发逻辑和图标不匹配：减号图标按钮触发的是Incrementevent，加号图标按钮触发的是Decrementevent，即便修复了实例问题，增减逻辑也是反的。
• （可选优化）所有状态都用CounterInitial一种类型虽然不直接影响运行，但不符合Bloc的规范设计，建议配合equatable做相等判断避免意外的状态不刷新。

1. 移除_MyHomePageState中单独创建的CounterBloc实例，直接使用BlocProvider提供的实例 #

修改_MyHomePageState代码：

class _MyHomePageState extends State<MyHomePage> {
  // 删除手动创建Bloc的代码：final _counterBloc = CounterBloc();
  // 无需自定义dispose逻辑，BlocProvider会自动管理Bloc的生命周期

  @override
  Widget build(BuildContext context) {
    // 从上下文获取BlocProvider提供的CounterBloc实例
    final counterBloc = BlocProvider.of<CounterBloc>(context);
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: BlocBuilder<CounterBloc, CounterState>(
        builder: (context, state) {
          return Center(
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                Text(
                  'You have pushed the button this many times:',
                ),
                Text(
                  '${state.counter}',
                  style: Theme.of(context).textTheme.headline4,
                ),
              ],
            ),
          );
        },
      ),
      floatingActionButton: Row(
        mainAxisAlignment: MainAxisAlignment.end,
        children: [
          FloatingActionButton(
            onPressed: () => counterBloc.add(Decrementevent()), // 减号按钮对应减事件
            tooltip: 'Decrement',
            child: Icon(Icons.remove),
          ),
          SizedBox(width: 10),
          FloatingActionButton(
            onPressed: () => counterBloc.add(Incrementevent()), // 加号按钮对应加事件
            tooltip: 'Increment',
            child: Icon(Icons.add),
          ),
        ],
      ),
    );
  }
}

2. 可选优化：添加equatable依赖，让状态正确判断相等性 #

如果后续出现相同数值状态不触发刷新的问题，可以给CounterState继承Equatable规范相等判断逻辑：
首先在pubspec.yaml添加equatable依赖，然后修改counter_state.dart：

part of 'counter_bloc.dart';

@immutable
abstract class CounterState extends Equatable {
  final int counter;
  const CounterState(this.counter);

  @override
  List<Object> get props => [counter];
}

class CounterInitial extends CounterState {
  const CounterInitial(int counter) : super(counter);
}

内容的提问来源于stack exchange，提问作者Binary_Beast