Flutter BlocConsumer 在按钮操作上显示加载对话框

Question

这是我的“EmployeePayrollInfoScreen”

当我触发下载按钮时。它将触发 DownloadStubEvent

stubAction: () {
 context.read<PersonalInfoBloc>().add(DownloadStubEvent(
 masterId: state.data?.payrollInfo?[index].payMasterId ?? 0,
 fiscalYear:state.data?.payrollInfo?[index].payMasterId ?? 2,));
 },

DownloadStubEvent（状态更改示例）

emit(LoadingState()); // first start loading
final res = await ReportService().downloadStrubReport(); // get data 
emit(const HideLoadingState());  // download complete hide

结果状态更改为 LoadingState，因此主体显示 SizedBox() 小部件。但我希望当状态为 LoadingState （单击下载按钮后）显示列表数据而不是 SizedBox()。

提前致谢

class EmployeePayrollInfoScreen extends StatelessWidget {
  const EmployeePayrollInfoScreen({super.key});

  @override
  Widget build(BuildContext context) {
    return BlocConsumer<PersonalInfoBloc, PersonalInfoState>(
      listener: (context, state) {
        if (state is LoadingState) {
          DialogHelper.showLoading(context: context);
          return;
        }

        if (state is HideLoadingState) {
          DialogHelper.hideLoading(context);
          return;
        }
      },
      builder: (context, state) {
        return Scaffold(
          backgroundColor: ColorManager.bgColor,
          body: state is LoadedState
              ? Padding(
                  padding: const EdgeInsets.all(SizeManager.padding),
                  child: SingleChildScrollView(
                    child: Column(
                      children: [
                        PrimaryContainer(
                          child: CurrentPayrollCardItem(
                            data: state.data?.currentPayroll,
                          ),
                        ),
                        const VerticalMargin(),
                        YtdCard(ytdInfo: state.data?.ytdInfo),
                        ListView.builder(
                            shrinkWrap: true,
                            physics: const BouncingScrollPhysics(),
                            itemCount: state.data?.payrollInfo?.length,
                            itemBuilder: (context, index) {
                              return EmployeePayrollInfoItem(
                                data: state.data?.payrollInfo?[index],
                                stubAction: () {
                                  //=====> DOWNLOAD BUTTON <======
                                  context.read<PersonalInfoBloc>().add(DownloadStubEvent(
                                        masterId: state.data?.payrollInfo?[index].payMasterId ?? 0,
                                        fiscalYear:
                                            state.data?.payrollInfo?[index].payMasterId ?? 2,
                                      ));
                                },
                              );
                            })
                      ],
                    ),
                  ),
                )
              : const SizedBox(),
        );
      },
    );
  }
}

Answer 1

根据您发布的代码，您所描述的结果是预期的。

当您发出

LoadingState

时，

builder

将返回

SizeBox

，因为

state is LoadedState

将返回 false。

我假设您想在加载列表上显示加载对话框。您可以在

isLoading

中引入一个名为

LoadedState

的变量。

改变你的集团逻辑：

emit(LoadedState(isLoading = true)); // first start loading
final res = await ReportService().downloadStrubReport(); // get data 
emit(LoadedState(isLoading = false));  // download complete hide

改变你的

listener

：

if (state.isLoading) {
    DialogHelper.showLoading(context: context);
} else {
    DialogHelper.hideLoading(context);
}