文章目录前言一、AlertDialog标准确认框代码实现二、CustomDialog自定义弹窗核心代码三、ActionSheet底部动作菜单完整示例三类怎么选常见误区小白必踩完整可运行示例Dialog 与 ActionSheet代码解析写在最后前言弹窗是 app 里绕不开的交互确认删除、选择性别、底部拉起分享菜单……HarmonyOS 提供了好几种弹窗组件新手常搞不清该用哪个。这篇文章我把最常用的三类——AlertDialog确认框、CustomDialog自定义弹窗、ActionSheet底部动作菜单——摆在一起对比给你一张闭眼选的表。一、AlertDialog标准确认框最简单直接用不用自己写布局代码实现import{AlertDialog}fromkit.ArkUIAlertDialog.show({title:确认删除,message:删除后不可恢复确定吗,primaryButton:{value:取消,action:(){}},secondaryButton:{value:删除,fontColor:#FF0000,action:(){this.doDelete()}}})title/message标题和正文。primaryButton/secondaryButton左右两个按钮各带action回调。适合确认/取消类简单提示零布局成本。二、CustomDialog自定义弹窗当内置弹窗装不下你的内容比如要填表单、要放图片用CustomDialog塞任意 UI核心代码CustomDialogstruct MyDialog{controller:CustomDialogControllerLocalname:stringbuild(){Column(){Text(编辑昵称).fontSize(18)TextInput({text:this.name}).onChange(vthis.namev)Button(确定).onClick((){this.controller.close()// 关闭弹窗})}.padding(16)}}// 使用时this.dialogCtrlnewCustomDialogController({builder:MyDialog()})this.dialogCtrl.open()// 打开要点CustomDialog装饰的 struct 就是弹窗内容build里随便写。CustomDialogController控制开/关.open()弹出、.close()关闭。这是复杂弹窗的唯一正解。三、ActionSheet底部动作菜单从底部滑出一个选项列表典型如分享到微信/朋友圈/复制链接完整示例import{ActionSheet}fromkit.ArkUIActionSheet.show({title:分享到,confirm:{value:取消,action:(){}},sheets:[{title:微信,action:()this.share(wechat)},{title:朋友圈,action:()this.share(moments)},{title:复制链接,action:()this.share(copy)}]})sheets是选项数组每个选项有标题和点击回调。系统自带底部滑出动画体验统一。三类怎么选弹窗适用是否需要自定义布局AlertDialog确认/取消提示否CustomDialog表单、复杂内容是ActionSheet底部多选项菜单否列表式一句话简单确认用 AlertDialog底部多选用 ActionSheet内容复杂用 CustomDialog。别为了一个简单的确定吗去写 CustomDialog杀鸡用牛刀。常见误区小白必踩误区说明简单确认写 CustomDialog就一个确定吗用AlertDialog零布局成本别杀鸡用牛刀。AlertDialog不写按钮回调primaryButton/secondaryButton的action不写点了没反应。CustomDialog 忘了close()弹窗里的按钮逻辑执行完要this.controller.close()否则关不掉。下面这段代码可以直接复制到 DevEco Studio 里运行。建议你边读边敲改一改文末「动手改一改」里的参数亲眼看看效果。完整可运行示例Dialog 与 ActionSheet对比「居中对话框」和「底部操作表」两种弹窗。代码解析// AlertDialog 与 ActionSheet 两种弹窗EntryComponentstruct PopDemo{build(){Column({space:16}){Button(普通对话框).onClick((){AlertDialog.show({title:提示,message:确定要删除吗,primaryButton:{value:取消,action:(){}},secondaryButton:{value:删除,action:(){}}})})Button(底部操作表).onClick((){ActionSheet.show({title:选择操作,confirm:{value:取消,action:(){}},sheets:[{title:拍照},{title:从相册选择}]})})}.padding(20)}}你会看到什么点第一个按钮中间弹出带「取消/删除」的对话框点第二个底部升起一个操作列表。两者都无需自己写布局系统样式统一。动手改一改给AlertDialog加showInSubWindow: true做成全局悬浮弹窗。给sheets每一项加action回调分别触发不同逻辑。用自定义CustomDialog替代系统弹窗做品牌化 UI。写在最后弹窗选型不难关键是别过度设计。我见过有人所有弹窗都写 CustomDialog结果几十行代码就为弹个确定取消——纯属浪费。把上面三个例子存进你的代码片段库下次要弹窗先想一句话确认、菜单、还是复杂内容对应选一个一分钟搞定。