当前位置：首页 > news >正文

HarmonyOS7 Dialog 与 ActionSheet：弹窗全家桶对比

news 2026/7/13 12:27:16

文章目录

- 前言
- 一、AlertDialog：标准确认框
- - 代码实现
- 二、CustomDialog：自定义弹窗
- - 核心代码
- 三、ActionSheet：底部动作菜单
- - 完整示例
- 三类怎么选
- 常见误区（小白必踩）
- 完整可运行示例：Dialog 与 ActionSheet
- - 代码解析
- 写在最后

前言

弹窗是 app 里绕不开的交互：确认删除、选择性别、底部拉起分享菜单……HarmonyOS 提供了好几种弹窗组件，新手常搞不清该用哪个。

这篇文章我把最常用的三类——AlertDialog（确认框）、CustomDialog（自定义弹窗）、ActionSheet（底部动作菜单）——摆在一起对比，给你一张"闭眼选"的表。

一、AlertDialog：标准确认框

最简单，直接用，不用自己写布局：

代码实现

import{AlertDialog}from'@kit.ArkUI'AlertDialog.show({title:'确认删除',message:'删除后不可恢复，确定吗？',primaryButton:{value:'取消',action:()=>{}},secondaryButton:{value:'删除',fontColor:'#FF0000',action:()=>{this.doDelete()}}})

title/message：标题和正文。
primaryButton/secondaryButton：左右两个按钮，各带action回调。
适合"确认/取消"类简单提示，零布局成本。

二、CustomDialog：自定义弹窗

当内置弹窗装不下你的内容（比如要填表单、要放图片），用CustomDialog塞任意 UI：

核心代码

@CustomDialogstruct MyDialog{controller:CustomDialogController@Localname:string=''build(){Column(){Text('编辑昵称').fontSize(18)TextInput({text:this.name}).onChange(v=>this.name=v)Button('确定').onClick(()=>{this.controller.close()// 关闭弹窗})}.padding(16)}}// 使用时this.dialogCtrl=newCustomDialogController({builder:MyDialog()})this.dialogCtrl.open()// 打开

要点：

@CustomDialog装饰的 struct 就是弹窗内容，build里随便写。
CustomDialogController控制开/关，.open()弹出、.close()关闭。
这是"复杂弹窗"的唯一正解。

三、ActionSheet：底部动作菜单

从底部滑出一个选项列表，典型如"分享到微信/朋友圈/复制链接"：

完整示例

import{ActionSheet}from'@kit.ArkUI'ActionSheet.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 两种弹窗@Entry@Componentstruct 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)}}