HarmonyOS应用开发实战：猫猫大作战-customDialog 自定义弹窗

前言customDialog是 ArkUI 中自定义弹窗组件支持自由定制弹窗内容。在「猫猫大作战」中customDialog 用于游戏结束结算面板、设置页面、物品详情展示等。一、customDialog 基础import{promptAction}fromkit.ArkUI;BuilderfunctionGameOverDialog(score:number,highScore:number){Column(){Text( 游戏结束).fontSize(24).fontWeight(FontWeight.Bold).margin({bottom:16})Text(最终得分:${score}).fontSize(20).fontColor(#E74C3C).margin({bottom:8})if(scorehighScore){Text( 新纪录).fontSize(18).fontColor(#F39C12).fontWeight(FontWeight.Bold)}Row(){Button(重新开始).backgroundColor(#2ECC71).borderRadius(24)Button(返回菜单).backgroundColor(#95A5A6).borderRadius(24)}.margin({top:24}).width(100%).justifyContent(FlexAlign.SpaceEvenly)}.padding(32).backgroundColor(#FFFFFF).borderRadius(20)}二、打开方式// 通过 wrapBuilder 传递constwrappedDialogwrapBuilder(GameOverDialog);promptAction.openCustomDialog(wrappedDialog.builder(this.score,this.highScore),{alignment:DialogAlignment.Center,maskColor:rgba(44, 62, 80, 0.6),});// 通过 CustomDialog 装饰器CustomDialogstruct ScoreDialog{controller:CustomDialogController;score:number0;build(){Column(){Text(得分:${this.score}).fontSize(20)}}}三、customDialog vs alertDialog特性customDialogalertDialog内容自定义✅ 完全自由❌ 固定格式按钮控制自由设计固定按钮列表适用场景游戏结算、详情确认提示实现方式Builder wrapBuilderpromptAction四、最佳实践复杂布局用 customDialog游戏结算、设置面板简单确认用 alertDialog退出确认遮罩颜色统一rgba(44, 62, 80, 0.6)半透明深色弹窗尺寸控制宽度不超过屏幕 85%总结customDialog 通过 Builder 自定义弹窗内容适合游戏结算等复杂需求。核心要点wrapBuilder传递 Builder、alignment控制对齐、maskColor设置遮罩。如果这篇文章对你有帮助欢迎点赞、收藏⭐、关注你的支持是我持续创作的动力相关资源openCustomDialog API第 94 篇alert-dialog第 95 篇toast第 97 篇component-content