如何从state取值创建列表 避免新增群组时页面内容被覆盖

当前实现出现内容覆盖的核心原因有两点：

• 状态类AddGroupState仅存储单个Group实例，每次新增群组时会直接覆盖状态中原有的群组数据，没有保留历史群组
• 页面渲染逻辑仅返回单个ListTile组件，没有做列表遍历，自然无法展示多条群组数据

1. 调整状态类定义，新增群组列表存储字段 #

将原有存储单个Group的字段替换为List类型的群组列表字段，同时补充props配置保证状态可以被正确比较：

@immutable
abstract class NewGroupState {
  const NewGroupState();
  @override
  List<Object?> get props => [];
}

class NewGroupInitial extends NewGroupState {
  const NewGroupInitial();
}

// 改造后的AddGroupState，存储全量群组列表
class AddGroupState extends NewGroupState {
  const AddGroupState(this.groupList);
  // 存储所有已创建的群组数据
  final List<Group> groupList;

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

2. 修改Bloc事件处理逻辑，追加而非替换群组数据 #

处理新增群组事件时，先读取当前状态中已有的群组列表，将新群组追加到列表后再生成新状态，不要直接用单个新群组生成状态：

// 以处理AddGroupEvent事件为例
on<AddGroupEvent>((event, emit) async {
  // 读取当前已有的群组列表，初始状态下为空列表
  final existingGroups = state is AddGroupState
      ? List<Group>.from((state as AddGroupState).groupList)
      : <Group>[];
  
  // 将新群组追加到列表末尾
  existingGroups.add(event.newGroup);

  // 原有数据库写入逻辑保留
  await database.insertGroup(event.newGroup);

  // 传入新的群组列表生成状态
  emit(AddGroupState(existingGroups));
});

3. 调整页面渲染逻辑，遍历列表生成所有群组项 #

将原有单个ListTile的渲染逻辑改为列表遍历，渲染全量群组数据：

body: BlocBuilder<NewGroupBloc, NewGroupState>(
  builder: (context, state) {
    // 初始状态展示空提示
    if (state is! AddGroupState) {
      return const Center(child: Text('暂无群组，可点击按钮创建新群组'));
    }

    final groupList = state.groupList;
    // 遍历列表渲染所有群组项
    return ListView.builder(
      itemCount: groupList.length,
      itemBuilder: (context, index) {
        final group = groupList[index];
        return ListTile(
          title: Text(group.groupName),
        );
      },
    );
  },
),

• 不要直接修改原有状态中存储的groupList：Dart中List属于引用类型，直接修改原列表不会触发Bloc的状态变更检测，必须生成新的List实例再传入新状态
• 必须在状态类的props中加入groupList字段：否则状态比较逻辑会判定前后状态一致，无法触发页面重绘
• 如果需要页面初始化时就展示历史群组，可以在Bloc初始化阶段查询数据库中已存储的所有群组，直接生成AddGroupState传入查询到的列表即可

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