鸿蒙开发:openCustomDialog关闭指定Dialog

前言

本文基于Api13

openCustomDialog弥补了CustomDialogController在使用上存在的诸多限制,实现了可以在任意位置上弹出,可以说是非常的方便;但是,在使用的时候遇到了一些小阻碍,比如一个页面中可能存在多个弹窗,而这些弹窗的隐藏顺序是不确定的,如何可以根据一定的条件,隐藏其中对应的弹窗呢,也就是,如何隐藏指定的弹窗,而不是最上层的弹窗。

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

存储ComponentContent实现关闭指定Dialog

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

弹出Dialog

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

TypeScript 复制代码
 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中的元素。

TypeScript 复制代码
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

TypeScript 复制代码
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

TypeScript 复制代码
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场景,当然了,也适用于常见的普通场景。

相关推荐
二蛋和他的大花38 分钟前
HarmonyOS运动开发:如何集成百度地图SDK、运动跟随与运动公里数记录
华为·harmonyos
SuperHeroWu71 小时前
【HarmonyOS 5】鸿蒙页面和组件生命周期函数
华为·harmonyos·鸿蒙·自定义组件·页面·生命周期函数
HarmonyOS小助手2 小时前
Flutter适配HarmonyOS 5开发知识地图
harmonyos·鸿蒙·harmonyos next·鸿蒙flutter
搞瓶可乐3 小时前
鸿蒙ArkTs实战之截图保存图片到相册,详细教程,不使用SaveButton的方法,附上源码和效果图
华为·harmonyos·arkts·保存图片·操作沙箱·鸿蒙解决方案·媒体操作
__Benco3 小时前
OpenHarmony平台驱动开发(九),MIPI DSI
人工智能·驱动开发·harmonyos
深海的鲸同学 luvi5 小时前
【HarmonyOS 5】App Linking 应用间跳转详解
华为·harmonyos·applinking·应用间跳转
Bruce_Liuxiaowei5 小时前
HarmonyOS NEXT深度解析:自研框架ArkUI-X的技术革命与跨平台实践
华为·harmonyos
仓颉编程语言19 小时前
南京大学OpenHarmony技术俱乐部正式揭牌 仓颉编程语言引领生态创新
harmonyos·鸿蒙·仓颉编程语言
yuanlaile19 小时前
Flutter开发HarmonyOS实战-鸿蒙App商业项目
flutter·华为·harmonyos·flutter开发鸿蒙
HarmonyOS小助手21 小时前
用 DevEco Studio 模拟器这些能力 没真机也能高效调测鸿蒙原生应用
harmonyos·鸿蒙·deveco studio·harmonyos next