如何在 Flutter 中使用 BlocBuilder 刷新对话框

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

您可以在 Dialog 中使用 BlocBuilder，这样每次更改时都会重建。为此，您还需要使用 BlocProvider.value.

传递当前的 cubit(bloc)

  // 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
        ),
      );
    },
  );

现在，请确保您在 CustomDialog 中使用 BlocBuilder，如下所示：

class CustomDialog extends StatelessWidget {

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

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

使用此设置，对话框会使用 bloc 进行更新。

如何在 Flutter 中使用 BlocBuilder 刷新对话框

How to use BlocBuilder to refresh a Dialog in Flutter

flutter

bloc

flutter-dialog

cubit

flutter-cubit