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

最新推荐文章于 2025-09-04 10:02:45 发布

原创

最新推荐文章于 2025-09-04 10:02:45 发布 · 2.5k 阅读

11 ·

CC 4.0 BY-SA版权

文章标签：

#harmonyos #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.')  })  .catch((error: Business