企业官网建设流程全解析

Dialog 弹窗体系全解析 — AlertDialog / ActionSheet / CustomDialog

一、引言

弹窗是应用与用户进行即时交互的重要方式，用于确认操作、选择选项和展示提示信息。鸿蒙系统提供了丰富的弹窗体系，包括 AlertDialog（警告弹窗）、ActionSheet（操作列表）和 CustomDialog（自定义弹窗），覆盖了从简单确认到复杂表单的各种场景。MoneyTrack 在删除确认、设置提醒、资产操作等流程中广泛使用这些弹窗类型，为用户提供清晰的反馈和确认机制。理解弹窗的选型与交互流程，有助于构建更好的用户体验。

二、核心知识点

2.1 警告弹窗（AlertDialog）

AlertDialog 是最基础的弹窗类型，用于向用户展示重要信息并等待确认。通过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，适合在异步流程中嵌入：

constresult=awaitcontextUtil.getPromptAction().showDialog({title:'确认删除',message:'删除后数据不可恢复，是否继续？',buttons:[{text:'取消',color:'#666'},{text:'确认删除',color:'#FF0000'}]})// 根据用户点击的按钮索引判断if(result.index===1){awaitthis.deleteAsset(assetId)}

2.2 列表选择弹窗（ActionSheet）

ActionSheet 从底部弹出操作选项列表，用户点击某一项后自动关闭并触发回调。适合提供多个并列操作的场景，如分享、编辑、删除等。

ActionSheet.show({title:'选择操作',message:'请选择要对这笔账单执行的操作',buttons:[{text:'编辑',color:'#333333'},{text:'删除',color:'#FF0000'},{text:'取消',color:'#999999'}]})

与 bindSheet 相比，ActionSheet 更轻量，由系统统一样式，开发者只需提供按钮列表即可。

2.3 自定义弹窗（CustomDialog）

CustomDialog 是通过@CustomDialog装饰器定义的完全可定制的弹窗。布局、样式和交互完全由开发者控制，适合复杂的表单输入或多步骤操作。

@CustomDialogstruct BudgetSettingDialog{controller:CustomDialogController currentBudget:number=0onConfirm:(budget:number)=>voidbuild(){Column(){Text('设置预算').fontSize(18).fontWeight(FontWeight.Bold)TextInput({placeholder:'请输入预算金额',text:this.currentBudget.toString()}).onChange((val)=>{this.currentBudget=parseInt(val)||0})Row(){Button('取消').onClick(()=>this.controller.close())Button('确认').onClick(()=>{this.onConfirm(this.currentBudget)this.controller.close()})}}.padding(24)}}

调用方式：

letdialog=newCustomDialogController({builder:BudgetSettingDialog({currentBudget:1000,onConfirm:(val)=>{/* 处理逻辑 */}})})dialog.open()

2.4 三种弹窗选型对比

2.5 弹窗层级管理与避免叠加

多个弹窗同时弹出会导致界面混乱。建议通过全局弹窗管理器维护弹窗队列：

// 使用单例管理弹窗状态classDialogManager{privatestaticinstance:DialogManagerprivateisShowing:boolean=falsestaticgetInstance():DialogManager{if(!this.instance)this.instance=newDialogManager()returnthis.instance}asyncshowDialog(options:any):Promise<boolean>{if(this.isShowing)returnfalse// 已有弹窗时忽略this.isShowing=trueconstresult=awaitcontextUtil.getPromptAction().showDialog(options)this.isShowing=falsereturnresult.index===1}}

2.6 Toast 与 Dialog 的场景分辨

2.7 弹窗交互流程

三、项目代码案例

3.1 AssetsVM 中的确认弹窗

在products/entry/src/main/ets/viewmodel/assets/AssetsVM.ets中，删除资产操作前通过showDialog弹出确认框：

asyncdeleteAsset(assetId:string):Promise<void>{constresult=awaitcontextUtil.getPromptAction().showDialog({title:'确认删除',message:'删除后数据不可恢复，是否继续？',buttons:[{text:'取消',color:'#666'},{text:'确认删除',color:'#FF0000'}]})if(result.index===1){awaitthis.repository.deleteAsset(assetId)this.refreshData()}}

• 调用showDialog返回 Promise，通过await等待用户操作
• 判断result.index：0 为取消，1 为确认
• 仅在确认时执行删除逻辑，取消则无操作

3.2 SettingPage 的敏感操作确认

在设置页面中，退出登录、重置数据等敏感操作触发 AlertDialog，使用醒目的红色文字提示操作后果，确认按钮突出显示。

3.3 弹窗最佳实践

1. 高风险操作必须确认：删除、清空等操作前必须弹出确认框，防止误操作
2. 按钮语义明确：确认按钮用积极语义（如"确定"“确认删除”），取消按钮保持中性
3. 异步处理：使用 async/await 管理弹窗交互流程，保持代码可读性
4. 避免过度弹窗：非关键信息使用 Toast 代替弹窗，减少对用户的干扰
5. 高风控场景：涉及资金、隐私等场景，弹窗应包含醒目的警示标识
6. 弹窗层级：同一时间最多只展示一个弹窗，避免弹窗叠加导致界面混乱

四、总结

鸿蒙弹窗体系提供了从轻量到复杂的完整方案：AlertDialog 适合简单确认，ActionSheet 适合选项列表，CustomDialog 适合复杂交互。在实际开发中，应根据场景复杂度选择合适类型——能用系统默认弹窗解决的问题，优先使用 AlertDialog 或 ActionSheet，以保持体验一致性；仅当需要表单输入或复杂布局时才使用 CustomDialog。在 MoneyTrack 的实践中，删除确认使用 AlertDialog，操作选择使用 ActionSheet，预算设置使用 CustomDialog，三者各司其职，共同构建了清晰、安全的用户交互流程。

五、参考文档

• 弹出框指南
• AlertDialog API 参考
• CustomDialog 装饰器
• ActionSheet API 参考