鸿蒙UI开发——全局自定义弹窗实现

1、前 言

我们在鸿蒙UI系统组件08——自定义弹窗（CustomDialog）文章中介绍到，我们可以通过CustomDialogController类显示自定义弹窗。

由于CustomDialogController在使用上存在诸多限制，例如：不支持动态创建、不支持动态刷新。

在相对较复杂的应用场景中我们使用UIContext中获取到的PromptAction对象提供的openCustomDialog接口来实现自定义弹窗。下面针对openCustomDialog的使用做一个简单介绍。

2、弹出自定义弹窗

在使用弹窗前，我们需要创建ComponentContent对象，ComponentContent用于定义自定义弹窗的内容。创建一个ComponentContent对象的实例代码如下(核心代码 23 ~ 24行)：​​​​​

import { ComponentContent } from '@kit.ArkUI';// 自定义弹窗的Builder函数（构建弹窗的内容）@Builderfunction buildText(params: Params) {
    Column() {
      Text(params.text)      .fontSize(50)      .fontWeight(FontWeight.Bold)      .margin({ bottom: 36 })    Button('Close')      .onClick(() => {
          PromptActionClass.closeDialog()      })  }.backgroundColor('#FFF0F0F0')}@Entry@Componentstruct Index {
    @State message: string = "鸿蒙自习室"  private ctx: UIContext = this.getUIContext();  private contentNode: ComponentContent<Object> =    new ComponentContent(this.ctx, wrapBuilder(buildText), new Params(this.message));  build() {
    // ...  }}

其中，wrapBuilder(buildText)封装自定义组件，new Params(this.message)是自定义组件的入参，可以缺省，也可以传入基础数据类型。

通过调用openCustomDialog接口打开弹窗。代码如下：

this.ctx.getPromptAction().openCustomDialog(this.contentNode, this.options)  .then(() => {
      console.info('OpenCustomDialog complete.')  })