HarmonyOS鸿蒙Next中如何用代码关闭这个弹框

HarmonyOS鸿蒙Next中如何用代码关闭这个弹框

uiContext.showAlertDialog(
  {
    title: 'title',
    message: 'text',
    autoCancel: true,
    alignment: DialogAlignment.Bottom,
    offset: { dx: 0, dy: -20 },
    gridCount: 3,
    confirm: {
      value: 'button',
      action: () => {
        console.info('Button-clicking callback')
      }
    },
    cancel: () => {
      console.info('Closed callbacks')
    }
  }
);

只看见了showAlertDialog方法，没找到dismiss方法啊！


更多关于HarmonyOS鸿蒙Next中如何用代码关闭这个弹框的实战教程也可以访问 https://www.itying.com/category-93-b0.html

9 回复

你好：

【背景知识】

使用弹出框 (Dialog)：弹出框是一种模态窗口，通常用于在保持当前上下文环境的同时，临时展示用户需关注的信息或待处理的操作。用户需在模态弹出框内完成相关交互任务之后，才能退出模态模式。弹出框可以不与任何组件绑定，其内容通常由多种组件组成，如文本、列表、输入框、图片等，以实现布局。ArkUI当前提供了自定义和固定样式两类弹出框组件。

固定样式弹出框：固定样式弹出框采用固定的布局格式，这使得开发者无需关心具体的显示布局细节，只需输入所需显示的文本内容，从而简化了使用流程，提升了便捷性。

自定义弹窗 (CustomDialog)：通过CustomDialogController类显示自定义弹窗。使用弹窗组件时，优先考虑自定义弹窗，便于弹窗样式与内容的自定义。

CustomDialogController：

  • CustomDialogController仅在作为@CustomDialog和@Component struct成员变量，且在@Component struct内部定义时赋值才有效，具体用法可参考下方示例。
  • 若尝试在CustomDialog中传入多个其他的Controller，以实现在CustomDialog中打开另一个或另一些CustomDialog，那么此处需要将指向自己的Controller放在所有Controller的后面。详细用法可参考示例1弹出嵌套弹窗。

【解决方案】

  • 弹窗大致可以分为固定样式和自定义弹窗。固定样式弹窗如showAlertDialog等，未开放直接关闭弹窗的API方法（如dismiss或cancel），关闭行为依赖用户交互（点击按钮或遮罩层）。
  • 想要用代码控制弹窗，可以选择自定义弹窗来实现。用open打开弹窗，用close来关闭弹窗。代码参考示例1（弹出嵌套弹窗）。

更多关于HarmonyOS鸿蒙Next中如何用代码关闭这个弹框的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


这设计api的人不考虑全面吗？啊，我就一个对话框，居然还要自定义，坑啊，

当前系统提供的showAlertDialog接口未开放直接关闭弹窗的API方法（如dismiss或cancel），关闭行为依赖用户交互（点击按钮或遮罩层）。

如果必要使用手动关闭，可以改用CustomDialogController实现弹窗，可通过控制器主动关闭：

// 自定义弹窗控制器
private dialogController: CustomDialogController = new CustomDialogController({
  builder: CustomDialogComponent({ /* 自定义内容 */ }),
  cancel: () => { /* 关闭回调 */ }
});

// 显示弹窗
this.dialogController.open();

// 主动关闭
this.dialogController.close();

这设计api的人不考虑全面吗？啊，我就一个对话框，居然还要自定义，坑啊，

目前是没有直接关闭这个弹窗的API的，如果场景比较复杂可以考虑用自定义弹窗 (CustomDialog)来实现，不过这个弹窗的操作只能在UI页面操作

不想自己自定义使用第三方库也很OK 都定义好了的，参考这个库：OpenHarmony三方库中心仓

哈哈，目前没有手动关闭的方法，只能换一个思路，比如自定义弹窗

可以换成这弹框

promptAction.openCustomDialog

promptAction.closeCustomDialog

在HarmonyOS Next中关闭弹框，需要使用Dialog的destroy()方法。如果是自定义弹框，调用this.destroy()即可。对于系统弹框(如AlertDialog)，在点击事件中调用dialog.destroy()。代码示例：

// 对于自定义弹框
@CustomDialog
struct MyDialog {
  controller: CustomDialogController
  
  build() {
    Button('关闭')
      .onClick(() => {
        this.controller.close()
      })
  }
}

// 调用时
let dialogController = new CustomDialogController({
  builder: MyDialog()
})
dialogController.show()

注意控制器调用的是close()方法。

在HarmonyOS Next中，showAlertDialog返回的是一个AlertDialog对象，可以通过调用该对象的close方法来关闭弹框。修改后的代码示例如下：

// 保存返回的AlertDialog对象
const alertDialog = uiContext.showAlertDialog({
  title: 'title',
  message: 'text',
  autoCancel: true,
  alignment: DialogAlignment.Bottom,
  offset: { dx: 0, dy: -20 },
  gridCount: 3,
  confirm: {
    value: 'button',
    action: () => {
      console.info('Button-clicking callback')
    }
  },
  cancel: () => {
    console.info('Closed callbacks')
  }
});

// 需要关闭时调用
alertDialog.close();

关键点：

  1. showAlertDialog方法会返回AlertDialog对象
  2. 调用该对象的close()方法即可关闭弹窗
  3. 可以在任何需要的地方调用关闭方法，比如按钮事件或定时关闭等场景，
回到顶部