Flutter Bloc添加多个事件仅触发最后一个，如何获取所有事件响应？

你遇到的问题核心是Bloc的状态采用替换模式：每次调用emit都会用新状态完全覆盖旧状态。你当前每个事件都emit仅包含单一模块数据的独立状态，最后一次emit(HomeState.onDancingSuccess(dancingList))会覆盖之前所有状态，导致UI只能获取最后一个事件的状态数据。

要实现一次性渲染所有内容，需要将状态重构为包含所有模块数据的聚合结构，每次处理事件时基于当前状态更新对应字段，再emit完整的新状态。

1. 重构HomeState #

把分散的单一状态合并为包含所有数据的聚合状态类，同时保留加载、错误状态以优化交互：

class HomeState {
  final List<Story>? stories;
  final List<Trending>? trending;
  final List<BestWorking>? bestWorking;
  final List<Dancing>? dancing;
  final bool isLoading;
  final String? error;

  HomeState({
    this.stories,
    this.trending,
    this.bestWorking,
    this.dancing,
    this.isLoading = false,
    this.error,
  });

  // 复制方法，用于仅更新部分字段
  HomeState copyWith({
    List<Story>? stories,
    List<Trending>? trending,
    List<BestWorking>? bestWorking,
    List<Dancing>? dancing,
    bool? isLoading,
    String? error,
  }) {
    return HomeState(
      stories: stories ?? this.stories,
      trending: trending ?? this.trending,
      bestWorking: bestWorking ?? this.bestWorking,
      dancing: dancing ?? this.dancing,
      isLoading: isLoading ?? this.isLoading,
      error: error ?? this.error,
    );
  }
}

2. 修改Bloc事件处理逻辑 #

处理每个事件时，基于当前状态更新对应数据字段，再emit新的聚合状态：

on<HomeEvent>((event, emit) async {
  await event.when(
    getStories: () async {
      emit(state.copyWith(isLoading: true));
      try {
        // 替换为实际的API请求逻辑
        emit(state.copyWith(
          stories: storiesList,
          isLoading: false,
        ));
      } catch (e) {
        emit(state.copyWith(
          error: e.toString(),
          isLoading: false,
        ));
      }
    },
    getTrending: () {
      emit(state.copyWith(trending: trendingList));
    },
    getBestWorking: () {
      emit(state.copyWith(bestWorking: bestWorkingList));
    },
    getDancing: () {
      emit(state.copyWith(dancing: dancingList));
    },
  );
});

3. 设置Bloc初始状态 #

在HomeBloc构造函数中初始化基础状态：

class HomeBloc extends Bloc<HomeEvent, HomeState> {
  HomeBloc() : super(HomeState()) {
    on<HomeEvent>(...); // 注册事件处理逻辑
  }
}

4. UI层监听状态并渲染 #

在UI中监听Bloc状态，当所有数据加载完成后渲染完整内容：

BlocBuilder<HomeBloc, HomeState>(
  builder: (context, state) {
    if (state.isLoading) {
      return const CircularProgressIndicator();
    }
    if (state.error != null) {
      return Text('加载失败: ${state.error}');
    }
    // 检查所有数据是否已准备完成
    if (state.stories != null && state.trending != null && state.bestWorking != null && state.dancing != null) {
      return Column(
        children: [
          StoriesWidget(stories: state.stories!),
          TrendingWidget(trending: state.trending!),
          BestWorkingWidget(list: state.bestWorking!),
          DancingWidget(list: state.dancing!),
        ],
      );
    }
    return const SizedBox.shrink();
  },
)

如果四个事件都是异步请求，可以在Bloc初始化时并行处理所有请求，减少状态更新次数：

class HomeBloc extends Bloc<HomeEvent, HomeState> {
  HomeBloc() : super(HomeState(isLoading: true)) {
    on<HomeEvent>((event, emit) async {
      await event.when(
        getInitialData: () async {
          try {
            // 并行发起所有数据请求
            final futures = [
              fetchStories(),
              fetchTrending(),
              fetchBestWorking(),
              fetchDancing(),
            ];
            final results = await Future.wait(futures);
            
            emit(state.copyWith(
              stories: results[0],
              trending: results[1],
              bestWorking: results[2],
              dancing: results[3],
              isLoading: false,
            ));
          } catch (e) {
            emit(state.copyWith(
              error: e.toString(),
              isLoading: false,
            ));
          }
        },
        // 其他事件处理逻辑...
      );
    });
  }

  // 模拟API请求方法
  Future<List<Story>> fetchStories() async => ...;
  Future<List<Trending>> fetchTrending() async => ...;
  Future<List<BestWorking>> fetchBestWorking() async => ...;
  Future<List<Dancing>> fetchDancing() async => ...;
}

此时BlocProvider中只需添加一个事件：

BlocProvider<HomeBloc>(
  create: (context) => homeBloc..add(const HomeEvent.getInitialData()),
  child: widget,
)

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