Flutter Bloc：API调用成功后向GateInLoaded状态列表添加新项

状态更新的逻辑必须放在Bloc层，UI层只负责触发事件和展示状态，这样才能保证状态的一致性和单向数据流的规范，避免UI与Bloc状态不一致的问题。

具体实现步骤： #

1. 完善事件定义（gate_in_event.dart）

添加携带新数据的添加事件，或复用现有事件传递参数：

abstract class GateInEvent {}

// 加载列表事件
class LoadGateInList extends GateInEvent {}

// 添加新项事件，携带待添加的GateIn数据
class AddGateIn extends GateInEvent {
  final GateIn newGateIn;

  AddGateIn(this.newGateIn);
}

2. 在Bloc中处理状态更新（gate_in_bloc.dart）

在Bloc的事件处理逻辑中，调用添加API成功后，基于当前GateInLoaded状态更新列表并emit新状态：

class GateInBloc extends Bloc<GateInEvent, GateInState> {
  GateInBloc() : super(GateInInitial()) {
    on<LoadGateInList>((event, emit) async {
      // 调用加载API，成功后触发GateInLoaded状态
      final list = await _fetchGateInListFromApi();
      emit(GateInLoaded(listGateIn: list));
    });

    on<AddGateIn>((event, emit) async {
      // 调用添加API
      final success = await _addGateInToApi(event.newGateIn);
      if (success) {
        // 检查当前状态是否为GateInLoaded，避免空状态操作
        if (state is GateInLoaded) {
          final currentState = state as GateInLoaded;
          // 创建新列表并添加新项（遵循不可变性原则，不修改原列表）
          final updatedList = List<GateIn>.from(currentState.listGateIn)..add(event.newGateIn);
          // 发送更新后的状态
          emit(GateInLoaded(listGateIn: updatedList));
        }
      } else {
        // 添加失败时触发错误状态
        emit(GateInError(message: "添加失败"));
      }
    });
  }

  // 模拟API调用，替换为实际请求逻辑
  Future<List<GateIn>> _fetchGateInListFromApi() async => [];
  Future<bool> _addGateInToApi(GateIn gateIn) async => true;
}

3. UI层的处理（BlocConsumer）

UI仅负责触发AddGateIn事件，并监听GateInLoaded状态刷新列表：

BlocConsumer<GateInBloc, GateInState>(
  listener: (context, state) {
    if (state is GateInError) {
      // 显示错误提示
      ScaffoldMessenger.of(context).showSnackBar(SnackBar(content: Text(state.message)));
    }
  },
  builder: (context, state) {
    if (state is GateInLoaded) {
      return ListView.builder(
        itemCount: state.listGateIn.length,
        itemBuilder: (context, index) {
          // 渲染列表项
          return ListTile(title: Text(state.listGateIn[index].name));
        },
      );
    } else if (state is GateInInitial) {
      // 初始状态触发加载事件
      context.read<GateInBloc>().add(LoadGateInList());
      return const CircularProgressIndicator();
    }
    return const SizedBox();
  },
)

为什么不建议在UI层处理？ #

如果在UI的BlocConsumer中维护本地列表，会导致状态分散在Bloc和UI两层，极易出现两者状态不一致的情况（比如Bloc重新加载数据时，UI本地列表无法同步更新），大幅增加后续维护复杂度。将更新逻辑放在Bloc层，所有状态变更由Bloc统一管理，保证了数据的单一数据源，符合Bloc的设计原则。

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