Flutter中使用Bloc实现依赖下拉的加载报错与状态问题求助

1. 解决setState() or markNeedsBuild() called when widget tree was locked错误 #

这个错误是因为UI树正处于构建/更新周期时，Bloc触发了状态发射（emit），导致框架内部冲突。大概率是你在Territory下拉的onChanged回调里，同步执行了更新选中状态+加载医生列表的操作，而此时下拉组件本身还在build流程中，触发emit就会撞车。

解决办法：

• 把加载医生列表的逻辑放到微任务队列，延迟到当前build周期结束后执行：

  onChanged: (selectedTerritory) {
    context.read<YourBloc>().add(UpdateSelectedTerritory(selectedTerritory));
    // 延迟执行加载逻辑，避开UI锁定周期
    Future.microtask(() {
      context.read<YourBloc>().add(LoadDoctorsByTerritory(selectedTerritory));
    });
  },
  

• 或者拆分事件：把「更新选中Territory」和「加载医生列表」拆成两个独立事件，让Bloc分别处理，避免在同一个事件流程里连续emit状态。

2. 解决移除加载emit后Territory选中项重置的问题 #

这说明你在_getCallCardDoctorListByTerritory方法里emit新状态时，copyWith没有保留当前已选中的Territory值。比如你可能写了这样的错误代码：

// 错误：漏传selectedTerritory，导致状态重置为初始值
emit(currentState.copyWith(
  isDoctorLoading: false,
  doctorList: newDoctorList,
));

正确写法必须把需要维持的状态字段都带上：

emit(currentState.copyWith(
  isDoctorLoading: false,
  doctorList: newDoctorList,
  selectedTerritory: currentState.selectedTerritory, // 保留选中值
));

另外要确保「更新选中Territory」的事件处理逻辑正确：

on<UpdateSelectedTerritory>((event, emit) {
  emit(currentState.copyWith(selectedTerritory: event.territory));
});

3. Bloc与UI优化建议 #

Bloc代码优化 #

• 拆分事件与状态：如果当前Bloc同时管Territory选择、医生加载等多个逻辑，把事件拆成细粒度的类，比如TerritorySelected、DoctorsRequested、DoctorsLoaded，每个事件只做一件事，代码可读性会大幅提升。
• 分离数据层：把API请求、数据处理逻辑抽离到Repository类里，Bloc只负责接收事件、调用Repository、发射状态，别让Bloc堆满网络请求代码：

  class DoctorRepository {
    Future<List<Doctor>> getDoctorsByTerritory(String territory) async {
      // 这里写API请求/数据解析逻辑
    }
  }
  

• 状态字段模块化：如果状态里字段太多，可以把相关字段封装成子对象，避免主状态过于臃肿：

  class TerritorySubState {
    final String selectedTerritory;
    final List<Territory> options;
    TerritorySubState({required this.selectedTerritory, required this.options});
  }
  
  class DoctorSubState {
    final bool isLoading;
    final List<Doctor> list;
    DoctorSubState({required this.isLoading, required this.list});
  }
  
  // 主状态包含子状态
  class PageState {
    final TerritorySubState territoryState;
    final DoctorSubState doctorState;
    PageState({required this.territoryState, required this.doctorState});
  }
  

• 用emit.forEach简化异步逻辑：加载医生列表这类异步操作，可以用emit.forEach简化状态发射流程，不用手动处理加载中、加载完成、错误状态：

  on<LoadDoctorsByTerritory>((event, emit) async {
    emit(currentState.copyWith(
      doctorState: currentState.doctorState.copyWith(isLoading: true)
    ));
    await emit.forEach(
      _doctorRepository.getDoctorsByTerritory(event.territory),
      onData: (doctors) => currentState.copyWith(
        doctorState: currentState.doctorState.copyWith(
          isLoading: false,
          list: doctors
        )
      ),
      onError: (error, stackTrace) => currentState.copyWith(
        doctorState: currentState.doctorState.copyWith(
          isLoading: false,
          // 可以加个错误提示字段
        )
      ),
    );
  });
  

UI层优化 #

• 用BlocSelector减少不必要重建：如果UI某部分只依赖状态里的单个字段（比如医生列表），用BlocSelector代替BlocBuilder，避免整个页面因其他状态变化而重建：

  BlocSelector<YourBloc, PageState, List<Doctor>>(
    selector: (state) => state.doctorState.list,
    builder: (context, doctors) {
      return DropdownButton<Doctor>(
        // 构建医生下拉组件
      );
    },
  )
  

• 下拉组件直接绑定Bloc状态：不要用本地变量存选中值，直接把下拉组件的value绑定到Bloc状态里的对应字段，避免状态不一致：

  DropdownButton<String>(
    value: context.select((YourBloc bloc) => bloc.state.territoryState.selectedTerritory),
    items: // 构建Territory选项,
    onChanged: (value) {
      context.read<YourBloc>().add(UpdateSelectedTerritory(value!));
    },
  )
  

• 统一处理加载状态：用BlocBuilder监听加载状态，在页面合适位置显示加载指示器，别把加载逻辑硬编码到下拉组件里。

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