HarmonyOS 鸿蒙Next中openCustomDialog如何关闭指定的Dialog

HarmonyOS 鸿蒙Next中openCustomDialog如何关闭指定的Dialog openCustomDialog弥补了CustomDialogController在使用上存在的诸多限制，实现了可以在任意位置上弹出，可以说是非常的方便；但是，在使用的时候遇到了一些小阻碍，比如一个页面中可能存在多个弹窗，而这些弹窗的隐藏顺序是不确定的，如何可以根据一定的条件，隐藏其中对应的弹窗呢，也就是，如何隐藏指定的弹窗，而不是最上层的弹窗。这篇文章就为大家解读。

3 回复

目前呢，有两种实现方式，一种是通过存储ComponentContent来实现，另一种就是通过存储dialogId来实现，那么我们本篇文章，就针对这两种实现方式一一进行举例说明。

存储ComponentContent实现关闭指定Dialog

我们知道在openCustomDialog的时候，会接收一个ComponentContent，在关闭弹窗的时候也会使用到这个ComponentContent，所以，我们就可以对ComponentContent做一个简单的存储，这里的存储，不建议持久化存储，毕竟一般都是在一个页面中进行的，即便不在同一个页面上，我们也可以使用全局的变量存储，如何找到存储的ComponentContent呢？，这里推荐使用HashMap，键值对这种形式存储，可以很方便的使用key找到对应的value。

弹出Dialog

在弹窗弹出之后，使用map集合进行存储，在弹出Dialog的时候，需要传一个标识，也就是这个Dialog对应的key。

private showDialog(key: string) {
    let uiContext = this.getUIContext()
    let promptAction = uiContext.getPromptAction()
    let contentNode = new ComponentContent(uiContext, wrapBuilder(TextDialog))
    promptAction.openCustomDialog(contentNode).then(() => {
      //临时存储
      this.mCustomDialogMap.set(key, contentNode)
    })
  }

隐藏Dialog

隐藏的时候，直接传递对应的key即可，记得，隐藏之后移除map中的元素。

private hideDialog(key: string) {
    if (this.mCustomDialogMap.hasKey(key)) {
      let uiContext = this.getUIContext()
      let promptAction = uiContext.getPromptAction()
      let contentNode = this.mCustomDialogMap.get(key)
      promptAction.closeCustomDialog(contentNode).then(() => {
        //隐藏之后删除
        this.mCustomDialogMap.remove(key)
      })
    }
  }

存储dialogId实现关闭指定Dialog

存储dialogId和存储ComponentContent逻辑上基本上是一致的，但是显示出UI的方式需要切换下，由于dialogId的获取，必须通过builder的方式，所以这里，传递ComponentContent改为内部定义的@Builder，如果想要使用全局的UI组件，可以在定义的Builder里进行。

弹出Dialog

private showDialog(key: string) {
    let uiContext = this.getUIContext()
    let promptAction = uiContext.getPromptAction()
    promptAction.openCustomDialog({
      builder: () => {
        this.TextDialog(message)
      }
    }).then((dialogId: number) => {
      this.mCustomDialogMap.set(key, dialogId)
    })
  }

隐藏Dialog

private hideDialog(key: string) {
    if (this.mCustomDialogMap.hasKey(key)) {
      let uiContext = this.getUIContext()
      let promptAction = uiContext.getPromptAction()
      let dialogId = this.mCustomDialogMap.get(key)
      promptAction.closeCustomDialog(dialogId)
      //隐藏之后删除
      this.mCustomDialogMap.remove(key)
    }
  }

相关总结

以上呢就是两种隐藏指定的Dialog方式，比较的简单，具体的场景，常见于，页面多个弹出Dialog，但是需要隐藏指定的Dialog场景，当然了，也适用于常见的普通场景。

更多关于HarmonyOS 鸿蒙Next中openCustomDialog如何关闭指定的Dialog的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在HarmonyOS Next中，使用close方法关闭指定的自定义弹窗。首先，在CustomDialogController中定义弹窗实例，然后通过调用this.controller.close()来关闭当前弹窗。若需关闭特定弹窗，需确保每个弹窗有独立的控制器实例，并调用对应实例的close方法。

在HarmonyOS Next中，使用openCustomDialog打开的弹窗，其关闭控制依赖于调用该方法时返回的DialogController对象。要关闭指定的弹窗，核心在于保存和管理这些控制器实例。

关键点：通过DialogController进行精准控制

openCustomDialog方法会返回一个DialogController对象，这是关闭该特定弹窗的唯一句柄。

典型做法如下：

  1. 声明存储控制器的变量或集合：在页面或组件中，根据你的业务逻辑（例如，通过弹窗类型、关联的数据ID等），将返回的DialogController保存到变量、数组或Map中。

    // 示例：使用Map来存储，键可以是弹窗标识（如类型或ID）
private dialogMap: Map<string, DialogController> = new Map();

  2. 打开弹窗并保存控制器：

    // 打开一个弹窗，并指定一个标识符，例如 'dialogA'
let dialogController: DialogController = openCustomDialog(this, {
    // ... 你的弹窗参数，例如builder、alignment等
});
// 将控制器存储起来，关联标识符
this.dialogMap.set('dialogA', dialogController);

  3. 关闭指定弹窗：当需要关闭特定弹窗时，通过其标识符从存储中获取对应的DialogController，并调用其close方法。

    // 关闭标识为 'dialogA' 的弹窗
let targetController: DialogController | undefined = this.dialogMap.get('dialogA');
if (targetController) {
    targetController.close(); // 关闭这个指定的弹窗
    this.dialogMap.delete('dialogA'); // 从管理集合中移除
}

总结与注意事项：

  • DialogController.close() 是关闭由其管理的那个特定弹窗的直接方法。
  • 弹窗关闭后，建议将其对应的控制器从你的管理集合中移除，以避免内存泄漏或引用过期的控制器。
  • 如果你需要关闭所有已打开的弹窗，可以遍历你的存储集合（如Map或Array），对每个控制器依次调用close()方法。
  • 这种方式赋予了开发者完全的、精准的弹窗生命周期控制能力，不受弹窗打开顺序或层叠关系的影响。
回到顶部