HarmonyOS Next 弹窗系列教程（4）

位置相关弹窗介绍

本章将重点介绍两种与用户交互位置密切相关的特殊弹窗类型：菜单控制（Menu）和气泡提示（Popup）。

这两种弹窗组件的显示位置都与用户在屏幕上的触控点位置直接关联，为用户提供了更加直观的交互体验。

菜单控制（Menu）

Menu 是 HarmonyOS Next 中的菜单接口组件，常用于实现鼠标右键菜单、点击弹出菜单等交互场景。详细用法可参考官方文档的菜单控制。

使用bindContextMenu并设置预览图时，菜单弹出会显示背景蒙层，表现为模态弹窗。

而使用bindMenu或未设置预览图的 bindContextMenu 时，菜单弹出没有背景蒙层，表现为非模态弹窗。

基本使用方法

实现菜单功能的最简单方式是在目标组件上调用bindMenu方法，并传入菜单内容配置：

@Entry
@Component
struct Index {
  build() {
    Column() {
      Button('click for Menu')
        .bindMenu([
          {
            value: 'Menu1',
            action: () => {
              console.info('handle Menu1 select')
            }
          }
        ])
    }.width('100%').margin({ top: 5 })
  }
}

自定义菜单内容

如果需要创建更加丰富和个性化的菜单，可以通过以下步骤实现自定义菜单：

1. 使用@Builder 装饰器自定义菜单内容结构

     // 子菜单定义
     @Builder
     SubMenu() {
       Menu() {
         MenuItem({ content: "复制", labelInfo: "Ctrl+C" })
         MenuItem({ content: "粘贴", labelInfo: "Ctrl+V" })
       }
     }
   
     // 主菜单定义
     @Builder
     MyMenu() {
       Menu() {
         MenuItem({ startIcon: $r("app.media.foreground"), content: "菜单选项" })
         MenuItem({ startIcon: $r("app.media.layered_image"), content: "菜单选项" }).enabled(false)
   
         MenuItemGroup({ header: '小标题' }) {
           MenuItem({ content: "菜单选项", builder: this.SubMenu })
         }
       }
     }
   

2. 使用 bindMenu 绑定自定义菜单构建器

   Button("click for Menu").bindMenu(this.MyMenu);
   

效果展示：

右键或长按菜单

Menu 组件还支持创建右键点击或长按触发的上下文菜单：

1. 使用bindContextMenu方法绑定菜单内容
2. 传入ResponseType.RightClick参数表示右键触发
3. 传入ResponseType.LongPress参数表示长按触发

Button("click for Menu").bindContextMenu(this.MyMenu, ResponseType.LongPress);

气泡提示（Popup）

Popup 属性可以绑定在任意组件上以显示气泡形式的提示内容，支持自定义弹窗内容、交互逻辑和显示状态。这种弹窗形式特别适用于屏幕录制提示、信息提醒等场景。

气泡提示分为两种类型：

• 系统提供的标准气泡：使用PopupOptions配置
• 开发者自定义气泡：使用CustomPopupOptions配置

基本使用方法

气泡提示的基本使用非常简单：

1. 通过一个布尔状态变量控制气泡的显示和隐藏
2. 使用 message 属性设置气泡内的文本内容

@Entry
@Component
struct PopupExample {
  // 控制气泡显示状态的状态变量
  @State handlePopup: boolean = false

  build() {
    Column() {
      Button('PopupOptions')
        .onClick(() => {
          this.handlePopup = !this.handlePopup
        })
        .bindPopup(this.handlePopup, {
          message: 'This is a popup with PopupOptions',
        })
    }.width('100%').padding({ top: 5 })
  }
}

监听气泡状态变化

通过 onStateChange 回调函数可以监听气泡的显示状态变化，便于实现更复杂的交互逻辑：

@Entry
@Component
struct PopupExample {
  @State handlePopup: boolean = false

  build() {
    Column() {
      Button('PopupOptions')
        .onClick(() => {
          this.handlePopup = !this.handlePopup
        })
        .bindPopup(this.handlePopup, {
          message: 'This is a popup with PopupOptions',
          onStateChange: (e) => { // 监听气泡状态变化
            if (!e.isVisible) {
              this.handlePopup = false
            }
          }
        })
    }.width('100%').padding({ top: 5 })
  }
}

自定义气泡内容

可以使用**@Builder**装饰器自定义气泡的内容和样式，然后通过**builder**属性应用：

@Entry
@Component
struct Index {
  @State customPopup: boolean = false

  // 使用@Builder定义自定义气泡内容
  @Builder
  popupBuilder() {
    Row() {
      Button("1")
      Button("2")
    }
  }

  build() {
    Column() {
      Button('CustomPopupOptions')
        .position({ x: 100, y: 200 })
        .onClick(() => {
          this.customPopup = !this.customPopup
        })
        .bindPopup(this.customPopup, {
          builder: this.popupBuilder, // 使用自定义气泡内容
          placement: Placement.Bottom, // 设置气泡出现位置
          popupColor: Color.Pink, // 设置气泡背景颜色
        })
    }
    .height('100%')
  }
}

扩展资源

如需了解气泡提示的更多用法和样式配置，请参考官方文档。