前言当系统 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
前言当系统 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
