前言

当系统 AlertDialog 无法满足复杂的 UI 需求时，HarmonyOS 提供了 openCustomDialog 自定义弹窗能力。通过 wrapBuilder 包装自定义组件，可以实现任意复杂度的弹窗内容。

本文以「猫猫大作战」的猫咪详情弹窗为锚点，讲解 openCustomDialog 的使用方法。

提示：本系列不讲 ArkTS 基础语法与环境搭建，假设你已跟完第 1–95 篇。本篇是阶段三第 96 篇。

一、openCustomDialog 基本用法

1.1 定义弹窗组件

@Builder
function CatDetailDialog(cat: Cat) {
  Column() {
    Text(CatConfig[cat.level].emoji).fontSize(60)
    Text(`等级: ${cat.level}`).fontSize(18)
    Text(`位置: (${cat.x}, ${cat.y})`).fontSize(14).fontColor('#666')
    Button('关闭').onClick(() => {
      promptAction.closeDialog()
    })
  }
  .padding(24)
  .backgroundColor('#FFF')
  .borderRadius(16)
}

1.2 打开弹窗

promptAction.openCustomDialog(CatDetailDialog(cat), {
  alignment: DialogAlignment.Center,
  offset: { dx: 0, dy: 0 }
})

二、游戏中的应用

showCatDetail(cat: Cat) {
  promptAction.openCustomDialog(this.CatDetailDialog(cat))
}

三、总结

openCustomDialog 通过 @Builder 自定义弹窗内容，支持任意复杂度的 UI 布局。

核心要点：

• openCustomDialog(builder, options) 打开自定义弹窗
• closeDialog() 关闭弹窗

下一篇预告：第 97 篇将深入 ComponentContent——弹窗内容节点的管理。

如果这篇文章对你有帮助，欢迎点赞👍、收藏⭐、关注🔔，你的支持是我持续创作的动力！

相关资源：

• CustomDialog API 参考
• 开源鸿蒙跨平台社区
• 第 95 篇：Toast 提示
• 第 97 篇：ComponentContent