Flutter BlocConsumer点击下载按钮时保留列表并显示加载弹窗问题

核心思路 #

1. 让BlocConsumer的builder在LoadingState时仍渲染已加载的列表数据，而非空白组件；
2. 通过listener监听状态变化，控制加载弹窗的显示/隐藏。

具体实现代码 #

BlocConsumer<PayrollBloc, PayrollState>(
  listener: (context, state) {
    if (state is LoadingState) {
      // 显示加载弹窗，可替换为项目自定义加载组件
      showDialog(
        context: context,
        barrierDismissible: false,
        builder: (_) => const Center(child: CircularProgressIndicator()),
      );
    } else if (state is HideLoadingState) {
      // 关闭加载弹窗
      Navigator.of(context).pop();
    }
  },
  builder: (context, state) {
    // 优先复用已加载的列表数据：需确保LoadingState携带之前的列表信息
    final payrollList = switch(state) {
      LoadedState(list: final list) => list,
      LoadingState(list: final list) => list,
      _ => [],
    };

    // 始终渲染列表（无数据时可显示空状态）
    return payrollList.isEmpty 
        ? const Center(child: Text("暂无薪资数据"))
        : ListView.builder(
            itemCount: payrollList.length,
            itemBuilder: (context, index) => PayrollListItem(item: payrollList[index]),
          );
  },
)

关键补充 #

• 需调整LoadingState的定义，使其携带已加载的薪资列表数据（比如class LoadingState extends PayrollState { final List<Payroll> list; LoadingState(this.list); }），这样在进入加载状态时能直接复用现有数据；
• 弹窗的实现可根据项目UI规范替换为自定义组件，注意设置barrierDismissible: false避免用户误关弹窗；
• 若HideLoadingState是用于隐藏加载状态，需确保Bloc在下载完成后正确emit该状态以关闭弹窗。

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