Flutter使用Bloc模式时列表内Widget无响应问题求助

根本原因 #

1. 直接修改Bloc状态对象，违反不可变原则
   Bloc/Cubit的状态必须保持不可变性，你在chooseFrontCardSetting方法里直接调用state.frontSidesSetting.remove/add修改了原状态的列表，这会导致状态的引用未发生变化，Equatable对比时会判定前后状态一致，从而不触发UI更新。

2. Equatable对比逻辑失效
   你的FlashCardSettingState继承了Equatable，props直接返回列表对象。由于直接修改原状态列表的操作破坏了不可变性，即使后续用List.from创建新列表，Equatable默认对比的是列表引用而非内容，导致emit的新状态被判定为与旧状态相同，BlocBuilder不会重建UI。

修正代码 #

修正后的Cubit代码 #

class FlashCardSettingCubit extends Cubit<FlashCardSettingState> {
  FlashCardSettingCubit() : super(FlashCardSettingState.initial());

  void chooseFrontCardSetting(FrontSideDisplaySetting setting) {
    // 复制原列表，避免修改原状态对象
    final updatedList = List<FrontSideDisplaySetting>.from(state.frontSidesSetting);
    final isContain = updatedList.contains(setting);
    if (isContain) {
      updatedList.remove(setting);
    } else {
      updatedList.add(setting);
    }
    // 发射全新的状态实例
    emit(state.copyWith(frontSidesSetting: updatedList));
  }

  void chooseBackCardSetting(BackSideDisplaySetting setting) {
    final updatedList = List<BackSideDisplaySetting>.from(state.backSidesSetting);
    final isContain = updatedList.contains(setting);
    if (isContain) {
      updatedList.remove(setting);
    } else {
      updatedList.add(setting);
    }
    emit(state.copyWith(backSidesSetting: updatedList));
  }
}

状态类优化（可选，增强不可变性） #

为了彻底避免意外修改状态，可以将列表设置为不可变类型：

enum FlashCardSettingStatus { selected, cancel, initial }

class FlashCardSettingState extends Equatable {
  final List<FrontSideDisplaySetting> frontSidesSetting;
  final List<BackSideDisplaySetting> backSidesSetting;
  final FlashCardSettingStatus status;

  @override
  List<Object> get props => [frontSidesSetting, backSidesSetting, status];

  const FlashCardSettingState({
    required this.frontSidesSetting,
    required this.backSidesSetting,
    required this.status,
  });

  FlashCardSettingState.initial()
      : this(
            frontSidesSetting: List.unmodifiable([]),
            backSidesSetting: List.unmodifiable([]),
            status: FlashCardSettingStatus.initial);

  FlashCardSettingState copyWith({
    List<FrontSideDisplaySetting>? frontSidesSetting,
    List<BackSideDisplaySetting>? backSidesSetting,
    FlashCardSettingStatus? status,
  }) {
    return FlashCardSettingState(
      frontSidesSetting: frontSidesSetting != null 
          ? List.unmodifiable(frontSidesSetting) 
          : this.frontSidesSetting,
      backSidesSetting: backSidesSetting != null
          ? List.unmodifiable(backSidesSetting)
          : this.backSidesSetting,
      status: status ?? this.status,
    );
  }
}

额外检查点 #

• 确认BlocBuilder的buildWhen逻辑：当前prev.frontSidesSetting != current.frontSidesSetting对比的是列表引用，修正后新列表为全新引用，该逻辑可正常触发UI重建。
• 确保Cubit已通过BlocProvider正确注入到Widget树中，保证context.read<FlashCardSettingCubit>()能获取到有效实例。

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