Flutter中Bloc架构下RefreshIndicator无法持续转圈至API请求完成

问题根源在于你的_refresh方法仅发送了Bloc事件就立即返回，没有等待Bloc完成网络请求并更新状态，导致RefreshIndicator提前停止转圈。以下是具体解决方案：

步骤1：补充状态枚举（必要时） #

首先给PostStatus添加loading状态，让Bloc在处理刷新请求时能明确标记加载状态：

enum PostStatus { initial, loading, success, failure }

步骤2：修改Bloc的事件处理逻辑 #

在Bloc中处理RefreshEvent时，先切换到loading状态，完成网络请求后再更新为success或failure：

on<RefreshEvent>((event, emit) async {
  // 先发出加载状态，标记正在刷新
  emit(state.copyWith(status: PostStatus.loading));
  try {
    // 执行网络请求获取最新数据
    final newPosts = await postRepository.fetchPosts();
    // 请求成功，更新状态为成功并替换数据
    emit(
      state.copyWith(
        status: PostStatus.success,
        posts: newPosts,
        hasReachedMax: false,
      ),
    );
  } catch (_) {
    // 请求失败，更新状态为失败
    emit(state.copyWith(status: PostStatus.failure));
  }
});

步骤3：修改_refresh方法，让它等待状态更新 #

通过监听Bloc的状态流，直到请求完成（成功或失败）再结束Future，这样RefreshIndicator会一直转圈到请求结束。

方法一：使用Completer #

Future<void> _refresh() async {
  final completer = Completer<void>();
  final postBloc = context.read<PostBloc>();
  
  // 发送刷新事件
  postBloc.add(RefreshEvent());
  
  // 监听状态变化，直到请求完成
  final subscription = postBloc.stream.listen((state) {
    if (state.status == PostStatus.success || state.status == PostStatus.failure) {
      completer.complete();
      subscription.cancel(); // 取消监听，避免内存泄漏
    }
  });
  
  return completer.future;
}

方法二：使用await for循环 #

Future<void> _refresh() async {
  final postBloc = context.read<PostBloc>();
  final initialStatus = postBloc.state.status;
  
  postBloc.add(RefreshEvent());
  
  // 等待状态更新为刷新后的成功/失败状态
  await for (final state in postBloc.stream) {
    if (state.status != initialStatus && 
        (state.status == PostStatus.success || state.status == PostStatus.failure)) {
      break;
    }
  }
}

最终效果 #

修改后，onRefresh会等待_refresh的Future完成，RefreshIndicator会持续转圈直到Bloc完成网络请求并更新状态，达到你需要的效果。

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