如何使用 BlocBuilder 在 Flutter 中刷新 Dialog

Question

我有一个对话框，我将其包装在 blocbuilder 中以根据状态类型更新它，但该对话框只是第一次构建，在状态更改后它不会重建。

showDialog(
  context: context,
  builder: (_) {
  BlocBuilder<ExampleCubit, ExampleState>(
      bloc: cubit,
      builder: (context, state) {
        return CustomDialog(
          title:"title",
          onSave: (File file) {
            cubit.uploadImage(file);
          },
          progress: (state is ExtendedExampleState)? state.progress:0,
          onDelete: () {},
          onCancel: () {
             cubit.cancelUploading();
          },
        );
      },
    );

注意：使用 Bloc 模式很重要StateFulBuilder。

Answer 1

您可以使用BlocBuilderinDialog以便每次发生更改时都会重建它。为此，您还需要使用 传递当前的立方位（块）BlocProvider.value。

  // Get the cubit(bloc) instance
  final exampleCubit = context.read<ExampleCubit>();

  showDialog(
    context: context,
    builder: (BuildContext context) {
      // Provide the existing cubit(bloc) instance to the new route (the dialog)
      return BlocProvider<ExampleCubit>.value(
        value: exampleCubit,
        child: CustomDialog(
            //... your implementation
        ),
      );
    },
  );
  

现在，确保您正在使用BlocBuilderin CustomDialog，如下所示：

class CustomDialog extends StatelessWidget {

  const CustomDialog({
    Key? key,  
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return BlocBuilder<ExampleCubit, ExampleState>(
      builder: (context, state) {
        // rebuild widget...
      }
    )
  }

通过此设置，对话框将使用 bloc 进行更新。