Flutter BLoC/Cubit架构下嵌套列表更新状态不生效问题

核心原因 #

你遇到的问题由两个典型的不可变状态违反场景导致：

1. 仅用展开运算符拷贝了最外层的todoBoards列表，列表内存储的Board对象、Board嵌套的checklist子列表、checklist条目都是引用类型，直接修改newBoards[i].checklist?[index].done属于直接篡改原状态对象的属性，完全违背BLoC的不可变状态要求。
2. 基于Equatable的状态比对是值比对，如果你没有为Board、Checklist实体类正确重写props列表（漏填嵌套字段），或者没有创建全新的对象实例，Equatable会判定新旧状态完全相等，直接拦截emit，不会触发UI重建。

修复步骤 #

• 第一步：将Board、Checklist实体类改为不可变类，所有属性用final修饰，添加copyWith方法用于快速创建修改后的新实例，同时在Equatable的props中注册所有属性，包含嵌套的子列表字段。
  参考实现：

// Checklist实体类
class Checklist extends Equatable {
  final String id;
  final String content;
  final bool? done;

  const Checklist({
    required this.id,
    required this.content,
    this.done,
  });

  Checklist copyWith({
    String? id,
    String? content,
    bool? done,
  }) {
    return Checklist(
      id: id ?? this.id,
      content: content ?? this.content,
      done: done ?? this.done,
    );
  }

  @override
  List<Object?> get props => [id, content, done];
}

// Board实体类
class Board extends Equatable {
  final String id;
  final String title;
  final List<Checklist>? checklist;

  const Board({
    required this.id,
    required this.title,
    this.checklist,
  });

  Board copyWith({
    String? id,
    String? title,
    List<Checklist>? checklist,
  }) {
    return Board(
      id: id ?? this.id,
      title: title ?? this.title,
      checklist: checklist ?? this.checklist,
    );
  }

  @override
  List<Object?> get props => [id, title, checklist];
}

• 第二步：重写updateTask方法，全程不修改任何原有对象的属性，每一层嵌套修改都创建新的实例替换原有引用。
  正确实现代码：

void updateTask(int checklistIndex, String boardId) {
  final updatedTodoBoards = state.todoBoards.map((board) {
    // 非目标board直接返回原实例即可
    if (board.id != boardId) return board;

    // 拷贝当前board的checklist为新列表
    final newChecklist = List<Checklist>.from(board.checklist ?? []);
    // 校验索引合法性，替换目标checklist条目为新实例
    if (checklistIndex >= 0 && checklistIndex < newChecklist.length) {
      final targetItem = newChecklist[checklistIndex];
      newChecklist[checklistIndex] = targetItem.copyWith(
        done: !(targetItem.done ?? false),
      );
    }

    // 返回新的Board实例，替换checklist
    return board.copyWith(checklist: newChecklist);
  }).toList();

  emit(state.copyWith(todoBoards: updatedTodoBoards));
}

额外优化建议 #

你当前getBoards方法分4次调用fold发射状态，会导致UI多次无效刷新，且如果某一个接口请求失败，会直接覆盖其他已经加载成功的列表数据。建议等待四个接口的结果全部返回后，统一组装所有列表数据，再发射一次最终的success/error状态，避免状态不一致问题。

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