Flutter如何实现点击设备返回键时弹窗确认关闭Dialog

问题现状 #

• 已封装DialogBase基类，支持传入内容组件统一渲染弹窗；业务中存在二级确认逻辑：用户在一级输入弹窗点击取消按钮时，会在当前弹窗上层弹出二级确认弹窗，用户选择确认才关闭一级弹窗，选择取消则回到一级弹窗
• 异常表现：点击设备实体返回键时，弹窗会直接关闭，不会触发关闭确认提示；此前尝试使用WillPopScope包裹Dialog组件时，出现弹窗完全无法关闭的问题

现有代码 #

Dialog基类实现 #

class DialogBase {
  final bool isDismissable;
  final Function()? doAfterwards;
  final Function(bool)? onConfirmClose;

  DialogBase(
      {required this.isDismissable, this.doAfterwards, this.onConfirmClose});

  show(BuildContext context, Widget content) async {
    await showDialog(
        barrierDismissible: isDismissable,
        context: context,
        builder: (context) {
          return Dialog(
                child: Padding(
                  padding: const EdgeInsets.all(20),
                  child: content,
                ),
              );
        }).then((value) {
      if (onConfirmClose != null && value != null) {
        onConfirmClose!(value);
      }
    }).whenComplete(() async {
      if (doAfterwards != null) {
        doAfterwards!();
      }
    });
  }
}

弹窗取消按钮逻辑 #

onPressed: () async {
  await DialogBase(
      isDismissable: false,
      onConfirmClose: (bool result) {
        if (result) {
          Navigator.of(context).pop();
        }
      }).show(context, const ConfirmAbortDialogContent());
},

一级弹窗触发逻辑 #

void openAddNewPostDialog(BuildContext context) {
  DialogBase(
      isDismissable: false).show(context, const AddThreadPostDialogContent());
}

修复方案 #

此前WillPopScope使用后弹窗完全无法关闭，核心原因是回调返回值设置错误，且未在用户确认关闭后手动触发弹窗关闭逻辑。按以下步骤修改即可：

1. 修改基类弹窗构建逻辑，拦截返回事件 #

在showDialog的builder中，使用WillPopScope包裹Dialog组件，重写onWillPop回调：

• 若未配置关闭确认回调，按isDismissable配置走默认关闭逻辑
• 若配置了关闭确认回调，拦截默认关闭行为，弹出二级确认弹窗，用户确认后再手动关闭当前弹窗
  修改后的基类show方法代码如下：

show(BuildContext context, Widget content) async {
  await showDialog(
      barrierDismissible: isDismissable,
      context: context,
      builder: (context) {
        return WillPopScope(
          onWillPop: () async {
            // 无关闭确认逻辑时，按isDismissable配置决定是否允许默认关闭
            if (onConfirmClose == null) {
              return Future.value(isDismissable);
            }
            // 存在关闭确认逻辑，弹出二级确认框，拦截默认关闭行为
            DialogBase(
                isDismissable: false,
                onConfirmClose: (confirmResult) {
                  if (confirmResult) {
                    // 用户确认关闭，传递关闭结果并pop当前弹窗
                    Navigator.of(context).pop(true);
                  }
                }
            ).show(context, const ConfirmAbortDialogContent());
            // 返回false阻止系统自动关闭弹窗
            return Future.value(false);
          },
          child: Dialog(
            child: Padding(
              padding: const EdgeInsets.all(20),
              child: content,
            ),
          ),
        );
      }).then((value) {
    if (onConfirmClose != null && value != null) {
      onConfirmClose!(value);
    }
  }).whenComplete(() async {
    if (doAfterwards != null) {
      doAfterwards!();
    }
  });
}

2. 补全一级弹窗的关闭确认回调 #

打开一级输入弹窗时，传入onConfirmClose回调，和取消按钮的关闭逻辑保持一致：

void openAddNewPostDialog(BuildContext context) {
  DialogBase(
      isDismissable: false,
      // 新增关闭确认回调，逻辑和取消按钮保持一致
      onConfirmClose: (bool result) {
        if (result) {
          Navigator.of(context).pop();
        }
      }
  ).show(context, const AddThreadPostDialogContent());
}

适配说明 #

• Flutter 3.12及以上版本中WillPopScope已被标记为废弃，可替换为PopScope组件实现相同逻辑：将canPop参数设为false拦截默认pop行为，在onPopInvoked回调中编写上述确认弹窗逻辑即可
• 二级确认弹窗无需配置onConfirmClose，点击返回键不会触发额外弹窗，符合常规交互预期
• 若需要点击弹窗遮罩时也触发关闭确认，可在Dialog外层包裹GestureDetector，在onTap回调中复用返回键的确认逻辑即可

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