文章目录
- 核心功能说明
- 1. 组件作用
- 2. 调用方式
- 3. 核心参数
- 代码逐模块解析
- 1 页面结构
- 2 基础对话框
- 3 双按钮对话框
- 4 单按钮确认对话框
- 运行效果
- 完整代码
- 总结
核心功能说明
1. 组件作用
AlertDialog是系统级警告对话框，用于向用户展示提示信息、确认操作、警告内容，是 ArkUI 最常用的弹窗组件之一。
2. 调用方式
静态方法调用
AlertDialog.show(options)3. 核心参数
| 参数 | 说明 |
|---|---|
| title | 对话框标题 |
| message | 对话框内容文本 |
| primaryButton | 主按钮（确认按钮） |
| secondaryButton | 次按钮（取消按钮） |
| cancel | 点击空白区域/返回键关闭弹窗的回调 |
| action | 按钮点击回调 |
代码逐模块解析
1 页面结构
使用纵向布局Column展示三个按钮，分别触发三种不同样式的对话框。
Column({space:20}){Text("AlertDialog 示例")Button("1. 基础对话框")Button("2. 双按钮对话框")Button("3. 确认提示对话框")}2 基础对话框
最简用法：仅标题 + 内容，点击空白关闭。
AlertDialog.show({title:"基础对话框",message:"这是最简单的提示框",cancel:()=>{}})3 双按钮对话框
包含确认和取消两个按钮，用于操作确认场景。
AlertDialog.show({title:"确认操作",message:"确定要执行这个操作吗？",primaryButton:{value:"确定",action:()=>console.log("点击确定")},secondaryButton:{value:"取消",action:()=>console.log("点击取消")},cancel:()=>{}})4 单按钮确认对话框
仅一个确认按钮，用于操作完成/提示反馈。
AlertDialog.show({title:"操作提示",message:"当前功能已正常运行",primaryButton:{value:"我知道了",action:()=>console.log("关闭提示")},cancel:()=>{}})运行效果
- 基础对话框：显示标题和内容，点击空白关闭。
- 双按钮对话框：显示确认、取消按钮，可监听点击事件。
- 确认提示对话框：显示单个提示按钮，用于操作结果反馈。
效果如图：
完整代码
@Entry@Componentstruct AlertDialogExample{build(){Column({space:20}){Text("AlertDialog 示例").fontSize(25).fontWeight(FontWeight.Bold).margin(30)// 1. 基础对话框Button("1. 基础对话框").onClick(()=>{AlertDialog.show({title:"基础对话框",message:"这是最简单的提示框",cancel:()=>{}})})// 2. 双按钮对话框Button("2. 双按钮对话框").onClick(()=>{AlertDialog.show({title:"确认操作",message:"确定要执行这个操作吗？",primaryButton:{value:"确定",action:()=>console.log("点击确定")},secondaryButton:{value:"取消",action:()=>console.log("点击取消")},cancel:()=>{}})})// 3. 确认按钮对话框（可正常显示）Button("3. 确认提示对话框").onClick(()=>{AlertDialog.show({title:"操作提示",message:"当前功能已正常运行",primaryButton:{value:"我知道了",action:()=>console.log("关闭提示")},cancel:()=>{}})})}.width('100%').padding(20).justifyContent(FlexAlign.Center)}}总结
- 按钮文本使用
value。 - 关闭回调用
cancel。 - 优先使用
AlertDialog.show()静态调用。 - 对话框会居中显示，遮罩背景，阻塞页面交互。
如果这篇文章对你有帮助，欢迎点赞、收藏、关注，你的支持是持续创作的动力
