如何在Bloc中修改状态？Bloc颜色切换状态修改求助

问题根源 #

Bloc的核心设计是状态不可变，不能直接修改现有状态对象的属性（比如state.color = Colors.red），必须通过emit方法发送新的状态实例来触发状态更新。另外你当前的代码还有两个问题：

1. 事件类型直接用Color不符合Bloc设计规范，事件应该代表动作（如“切换颜色”）而非数据类型；
2. emit(state.color)类型不匹配，你的Bloc状态泛型是SumState，但state.color是Color类型，无法正确触发状态更新。

正确实现方式 #

1. 定义规范的事件类

首先创建专门的事件类来表示颜色相关动作：

abstract class SumEvent {}

// 用于切换颜色（比如红↔蓝）
class ToggleColorEvent extends SumEvent {}

// 用于直接设置指定颜色
class ChangeColorEvent extends SumEvent {
  final Color newColor;
  
  ChangeColorEvent(this.newColor);
}

2. 修改Bloc逻辑

更新Bloc的事件处理逻辑，通过创建新的SumSelected实例来更新状态：

class SumBloc extends Bloc<SumEvent, SumState> {
  SumBloc() : super(SumNotChosen()) {
    // 处理颜色切换事件
    on<ToggleColorEvent>((event, emit) {
      if (state is SumSelected) {
        // 获取当前颜色，切换为相反颜色
        final currentColor = (state as SumSelected).color;
        final newColor = currentColor == Colors.red ? Colors.blue : Colors.red;
        // 发送新的状态实例
        emit(SumSelected(color: newColor));
      } else {
        // 从未选中状态切换为选中状态，初始颜色设为红色
        emit(SumSelected(color: Colors.red));
      }
    });

    // 处理指定颜色的事件
    on<ChangeColorEvent>((event, emit) {
      // 无论当前状态是选中还是未选中，都发送新的选中状态
      emit(SumSelected(color: event.newColor));
    });
  }
}

3. UI中触发事件

在界面中通过BlocProvider触发事件即可更新状态：

// 触发颜色切换
context.read<SumBloc>().add(ToggleColorEvent());

// 触发设置指定颜色
context.read<SumBloc>().add(ChangeColorEvent(Colors.green));

关键要点总结 #

• 状态不可变：永远不要修改现有状态对象的属性，必须创建新的状态实例；
• 事件代表动作：事件应该描述用户操作或业务动作，而非直接传递数据；
• emit正确类型：emit的必须是Bloc状态泛型对应的类型（这里是SumState的子类）。

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