目标学习鸿蒙 ArkUI 的弹窗、菜单、气泡组件的使用。涉及知识•弹窗DialogAlertDialog、CustomDialog 等弹窗组件•菜单Menu右键菜单、下拉菜单等•气泡Tooltip/Popup信息提示气泡要求•实现至少 2 种不同的弹窗效果•例如点击按钮弹出确认对话框、长按显示菜单、悬停显示气泡提示等•以学习笔记形式记录学习过程附核心代码分析开发工具DevEco Studio 4.1语言ArkTS从系统弹窗 AlertDialog 入门首先学习系统提供的 AlertDialog。它的用法非常直接调用 showAlertDialog() 方法传入配置对象即可适合快速实现提示和确认场景。typescriptthis.getUIContext().showAlertDialog({title: ‘提示’,message: ‘这是一个系统弹窗’,confirm: {value: ‘知道了’,action: () console.info(‘用户点击了知道了’)}})运行后弹窗会自动覆盖在页面中央背景变暗点击“知道了”即可关闭。实现自定义弹窗 CustomDialog系统弹窗样式固定当需要自定义布局时就需要使用 CustomDialog。它需要定义一个专门的 struct并在其中声明 CustomDialogController 成员用于关闭弹窗typescriptCustomDialogstruct MyDialog {controller?: CustomDialogControllerbuild() {Column({ space: 20 }) {Text(‘这是一个自定义弹窗’).fontSize(18).fontWeight(FontWeight.Bold)Button(‘关闭’).onClick(() {this.controller?.close()})}.padding(24).width(‘70%’).backgroundColor(Color.White).borderRadius(16)}}父组件中需要实例化 CustomDialogController并通过 builder 关联自定义组件typescriptdialogController: CustomDialogController new CustomDialogController({builder: MyDialog(),autoCancel: true,alignment: DialogAlignment.Center})点击按钮时调用 this.dialogController.open() 即可弹出。长按弹出菜单 bindContextMenu一开始我尝试了 bindMenu它是点击触发。但为了更贴近选题四“长按显示菜单”的要求我查阅资料后改用了 bindContextMenu 配合 ResponseType.LongPress 实现长按触发。typescriptBuilderMyMenu() {Menu() {MenuItem({ content: ‘复制’ }).onClick(() console.info(‘点击了复制’))MenuItem({ content: ‘粘贴’ }).onClick(() console.info(‘点击了粘贴’))MenuItem({ content: ‘删除’ }).onClick(() console.info(‘点击了删除’))}}绑定到按钮上typescriptButton(‘长按弹出菜单’).backgroundColor(Color.Green).bindContextMenu(this.MyMenu, ResponseType.LongPress)这样只有长按按钮才会弹出菜单点击无效。核心代码分析完整的核心代码如下typescript// 自定义弹窗CustomDialogstruct MyDialog {controller?: CustomDialogControllerbuild() {Column({ space: 20 }) {Text(‘这是一个自定义弹窗’).fontSize(18).fontWeight(FontWeight.Bold)Button(‘关闭’).onClick(() {this.controller?.close()})}.padding(24).width(‘70%’).backgroundColor(Color.White).borderRadius(16)}}EntryComponentstruct Index {dialogController: CustomDialogController new CustomDialogController({builder: MyDialog(),autoCancel: true,alignment: DialogAlignment.Center})BuilderMyMenu() {Menu() {MenuItem({ content: ‘复制’ }).onClick(() console.info(‘点击了复制’))MenuItem({ content: ‘粘贴’ }).onClick(() console.info(‘点击了粘贴’))MenuItem({ content: ‘删除’ }).onClick(() console.info(‘点击了删除’))}}build() {Column({ space: 20 }) {// 按钮 1AlertDialogButton(‘AlertDialog 弹窗’).width(‘70%’).onClick(() {this.getUIContext().showAlertDialog({title: ‘提示’,message: ‘这是一个系统弹窗’,confirm: {value: ‘知道了’,action: () console.info(‘用户点击了知道了’)}})})Button(‘CustomDialog 弹窗’).width(‘70%’).backgroundColor(Color.Black).onClick(() {this.dialogController.open()}Button(‘长按弹出菜单’).width(‘70%’).backgroundColor(Color.Green).bindContextMenu(this.MyMenu, ResponseType.LongPress)}.width(‘100%’).height(‘100%’).justifyContent(FlexAlign.Center)}}AlertDialog 关键 APIshowAlertDialog() 显示系统弹窗参数为配置对象title / message 弹窗标题和正文confirm.value 确认按钮的文字confirm.action 点击确认按钮后的回调函数适用场景简单提示、确认操作无需自定义样式的场景。CustomDialog 关键 APICustomDialog 装饰器将 struct 标记为自定义弹窗组件controller?: CustomDialogController 弹窗控制器用于关闭弹窗CustomDialogController({…}) 实例化控制器传入 builder、alignment 等参数builder: MyDialog() 关联自定义弹窗组件autoCancel 点击遮罩层是否自动关闭alignment 弹窗对齐方式如 DialogAlignment.Center.open() / .close() 打开/关闭弹窗的方法适用场景需要自定义布局、样式、按钮的复杂弹窗。bindContextMenu 关键 APIbindContextMenu(builder, responseType) 将菜单绑定到组件上ResponseType.LongPress 触发方式为长按Builder MyMenu() 定义菜单内容的构建函数Menu() / MenuItem() 菜单容器与菜单项适用场景需要长按触发的上下文菜单如复制、粘贴、删除等操作———菜单的 Builder 在父组件中定义时报错找不到上下文。这需要确保 Builder 方法定义在 Entry 组件内部且命名不与系统保留字冲突。通过本次操作我明白l了鸿蒙 ArkUI 中三种常见的弹窗与菜单组件AlertDialog系统级弹窗快速实现提示和确认CustomDialog高度自定义适合复杂内容布局bindContextMenu长按触发菜单符合移动端上下文菜单交互习惯。