Dialog 弹窗体系全解析 — AlertDialog / ActionSheet / CustomDialog一、引言弹窗是应用与用户进行即时交互的重要方式用于确认操作、选择选项和展示提示信息。鸿蒙系统提供了丰富的弹窗体系包括 AlertDialog警告弹窗、ActionSheet操作列表和 CustomDialog自定义弹窗覆盖了从简单确认到复杂表单的各种场景。MoneyTrack 在删除确认、设置提醒、资产操作等流程中广泛使用这些弹窗类型为用户提供清晰的反馈和确认机制。理解弹窗的选型与交互流程有助于构建更好的用户体验。二、核心知识点2.1 警告弹窗AlertDialogAlertDialog 是最基础的弹窗类型用于向用户展示重要信息并等待确认。通过AlertDialog.show()方法调用其参数包括title弹窗标题通常为操作名称如确认删除message弹窗内容详细描述操作的影响buttons按钮数组每个按钮包含text显示文本和color文字颜色cancel布尔值/回调点击遮罩层是否关闭弹窗以及关闭后的回调AlertDialog.show({title:确认删除,message:删除后数据不可恢复是否继续,buttons:[{text:取消,color:#666666},{text:确认删除,color:#FF0000}],cancel:(){console.log(用户取消了操作)}})也可以使用contextUtil.getPromptAction().showDialog()方法其返回 Promise适合在异步流程中嵌入constresultawaitcontextUtil.getPromptAction().showDialog({title:确认删除,message:删除后数据不可恢复是否继续,buttons:[{text:取消,color:#666},{text:确认删除,color:#FF0000}]})// 根据用户点击的按钮索引判断if(result.index1){awaitthis.deleteAsset(assetId)}2.2 列表选择弹窗ActionSheetActionSheet 从底部弹出操作选项列表用户点击某一项后自动关闭并触发回调。适合提供多个并列操作的场景如分享、编辑、删除等。ActionSheet.show({title:选择操作,message:请选择要对这笔账单执行的操作,buttons:[{text:编辑,color:#333333},{text:删除,color:#FF0000},{text:取消,color:#999999}]})与 bindSheet 相比ActionSheet 更轻量由系统统一样式开发者只需提供按钮列表即可。2.3 自定义弹窗CustomDialogCustomDialog 是通过CustomDialog装饰器定义的完全可定制的弹窗。布局、样式和交互完全由开发者控制适合复杂的表单输入或多步骤操作。CustomDialogstruct BudgetSettingDialog{controller:CustomDialogController currentBudget:number0onConfirm:(budget:number)voidbuild(){Column(){Text(设置预算).fontSize(18).fontWeight(FontWeight.Bold)TextInput({placeholder:请输入预算金额,text:this.currentBudget.toString()}).onChange((val){this.currentBudgetparseInt(val)||0})Row(){Button(取消).onClick(()this.controller.close())Button(确认).onClick((){this.onConfirm(this.currentBudget)this.controller.close()})}}.padding(24)}}调用方式letdialognewCustomDialogController({builder:BudgetSettingDialog({currentBudget:1000,onConfirm:(val){/* 处理逻辑 */}})})dialog.open()2.4 三种弹窗选型对比维度AlertDialogActionSheetCustomDialog适用场景确认/提醒多项并列选择表单/复杂交互自定义程度低仅按钮文本颜色低仅选项列表高完全控制布局交互深度单次点击单次选择可包含输入、多步使用复杂度低低中高系统一致性高高需自行保证2.5 弹窗层级管理与避免叠加多个弹窗同时弹出会导致界面混乱。建议通过全局弹窗管理器维护弹窗队列// 使用单例管理弹窗状态classDialogManager{privatestaticinstance:DialogManagerprivateisShowing:booleanfalsestaticgetInstance():DialogManager{if(!this.instance)this.instancenewDialogManager()returnthis.instance}asyncshowDialog(options:any):Promiseboolean{if(this.isShowing)returnfalse// 已有弹窗时忽略this.isShowingtrueconstresultawaitcontextUtil.getPromptAction().showDialog(options)this.isShowingfalsereturnresult.index1}}2.6 Toast 与 Dialog 的场景分辨场景推荐使用原因操作成功反馈Toast轻量提示不打断用户操作失败提示Toast短暂提醒无需用户响应删除/清空确认Dialog需要用户二次确认敏感权限授权Dialog需要用户明确同意表单输入CustomDialog需要收集用户输入2.7 弹窗交互流程是简单确认多项选择复杂输入确认/选中取消用户触发操作需要确认?选择弹窗类型AlertDialog.showActionSheet.showCustomDialog.open用户点击按钮用户选择执行回调逻辑关闭弹窗/无操作关闭弹窗释放弹窗控制器三、项目代码案例3.1 AssetsVM 中的确认弹窗在products/entry/src/main/ets/viewmodel/assets/AssetsVM.ets中删除资产操作前通过showDialog弹出确认框asyncdeleteAsset(assetId:string):Promisevoid{constresultawaitcontextUtil.getPromptAction().showDialog({title:确认删除,message:删除后数据不可恢复是否继续,buttons:[{text:取消,color:#666},{text:确认删除,color:#FF0000}]})if(result.index1){awaitthis.repository.deleteAsset(assetId)this.refreshData()}}调用showDialog返回 Promise通过await等待用户操作判断result.index0 为取消1 为确认仅在确认时执行删除逻辑取消则无操作3.2 SettingPage 的敏感操作确认在设置页面中退出登录、重置数据等敏感操作触发 AlertDialog使用醒目的红色文字提示操作后果确认按钮突出显示。3.3 弹窗最佳实践高风险操作必须确认删除、清空等操作前必须弹出确认框防止误操作按钮语义明确确认按钮用积极语义如确定“确认删除”取消按钮保持中性异步处理使用 async/await 管理弹窗交互流程保持代码可读性避免过度弹窗非关键信息使用 Toast 代替弹窗减少对用户的干扰高风控场景涉及资金、隐私等场景弹窗应包含醒目的警示标识弹窗层级同一时间最多只展示一个弹窗避免弹窗叠加导致界面混乱四、总结鸿蒙弹窗体系提供了从轻量到复杂的完整方案AlertDialog 适合简单确认ActionSheet 适合选项列表CustomDialog 适合复杂交互。在实际开发中应根据场景复杂度选择合适类型——能用系统默认弹窗解决的问题优先使用 AlertDialog 或 ActionSheet以保持体验一致性仅当需要表单输入或复杂布局时才使用 CustomDialog。在 MoneyTrack 的实践中删除确认使用 AlertDialog操作选择使用 ActionSheet预算设置使用 CustomDialog三者各司其职共同构建了清晰、安全的用户交互流程。五、参考文档弹出框指南AlertDialog API 参考CustomDialog 装饰器ActionSheet API 参考
