Flutter Bloc 7.2.0结合Equatable使用时BlocBuilder不重建UI的问题咨询

云原生阿岚

2026-4-30

问题分析与解决方案

嘿，我来帮你搞定这个BlocBuilder不更新的问题！

问题根源

你遇到的核心问题是没有正确使用Equatable。Equatable的作用是通过props数组判断两个对象是否相等，而你的MainCalculatedState和MainButtonPressedEvent都没重写props方法——它们继承了父类的空数组props，所以Equatable会认为所有MainCalculatedState实例都是相等的，不管exportText的值是什么。

Bloc的更新机制是：只有当新状态和旧状态不相等时，才会通知BlocBuilder重建UI。所以即使你的Bloc发出了新状态，Equatable判定它和旧状态相等，Bloc就不会触发UI更新了。

而当你移除Equatable继承时，Dart默认用对象的引用地址比较相等性——每次创建的MainCalculatedState都是新对象，引用不同，所以Bloc认为状态变化了，就会触发重建。但这其实是一种“伪解决”，因为它会导致很多不必要的UI更新（比如两次发出内容完全相同的状态时，也会重建）。

你的两个疑问解答

1. 为什么用Equatable会出问题？

Equatable本身是Bloc开发中非常推荐的工具，它能帮你轻松实现状态/事件的相等性判断，避免手动写==和hashCode的繁琐和错误。出现问题完全是因为你没正确使用它：状态类里所有影响相等性的属性，都必须加入props数组，这样Equatable才能正确比较两个状态是否真的不同。

2. 为什么Bloc扩展默认生成继承Equatable的代码？

因为相等性判断是Bloc架构的核心之一。Bloc需要通过状态的相等性决定是否触发UI更新，手动实现相等性逻辑很容易出错，而Equatable能帮你一键搞定这个问题，所以扩展默认把它集成进去了——这是最佳实践的体现。

修复后的代码

只需要修改你的状态和事件类，把它们的属性加入props数组即可：

Bloc部分修改

// states
class MainCalculatedState extends MainState {
  final String exportText;

  const MainCalculatedState(this.exportText);

  // 把exportText加入props数组
  @override
  List<Object> get props => [exportText];
}

// events
class MainButtonPressedEvent extends MainEvent {
  final String inputText;

  const MainButtonPressedEvent(this.inputText);

  // 把inputText加入props数组
  @override
  List<Object> get props => [inputText];
}

这样修改后，Equatable就能正确判断状态变化：当exportText的值不同时，新状态和旧状态会被判定为不相等，BlocBuilder就会正常响应状态更新了。

另外，你的UI代码里有个小问题：exportText是SubWidget的成员变量，在StatelessWidget里保存状态不合适，建议直接从state中获取值，比如：

builder: (context, state) {
  final displayText = state is MainCalculatedState ? state.exportText : '';
  return Center(
    child: Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        Text('$displayText data'),
        // 其他代码不变
      ],
    ),
  );
}

这样更符合StatelessWidget的设计，也避免了状态不同步的问题。

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