ArkUI中的Menu组件详解

概述

ArkUI（方舟UI框架）为应用的UI开发提供了完整的基础设施，其中Menu组件是一个重要的交互元素，用于实现各种菜单功能。Menu组件通常作为临时性弹出窗口，用于展示用户可执行的操作选项。在ArkUI中，Menu组件有多种形式和用法，包括基本菜单、上下文菜单、文本选择菜单等。

Menu组件的基本用法

创建默认样式的菜单

在ArkUI中，菜单需要调用bindMenu接口来实现。bindMenu响应绑定组件的点击事件，绑定组件后手势点击对应组件后即可弹出。

      Button('click for Menu').bindMenu([{
        value: 'Menu1', action: () => {
          console.info('handle Menu1 select')
        }
      }])

创建自定义样式的菜单

当默认样式不满足开发需求时，可使用@Builder自定义菜单内容，通过bindMenu接口进行菜单的自定义。

@Entry
@Component
struct menuExample {
  @State select: boolean = true
  private iconStr: ResourceStr = $r("app.media.tab_playground_unselect")

  @Builder
  SubMenu() {
    Menu() {
      MenuItem({ content: "复制", labelInfo: "Ctrl+C" })
      MenuItem({ content: "粘贴", labelInfo: "Ctrl+V" })
    }
  }

  @Builder
  MyMenu() {
    Menu() {
      MenuItem({ startIcon: $r("app.media.icon"), content: "菜单选项" })
      MenuItem({ startIcon: $r("app.media.icon"), content: "菜单选项" }).enabled(false)
      MenuItem({
        startIcon: this.iconStr,
        content: "菜单选项",
        endIcon: $r("app.media.switch_camera"),
        builder: (): void => this.SubMenu()
      })
      MenuItemGroup({ header: '小标题' }) {
        MenuItem({
          startIcon: this.iconStr,
          content: "菜单选项",
          endIcon: $r("app.media.source_code"),
          builder: (): void => this.SubMenu()
        })
        MenuItem({
          startIcon: this.iconStr,
          content: "菜单选项",
          endIcon: $r("app.media.tab_guide_select"),
          builder: (): void => this.SubMenu()
        })
      }

      MenuItem({ content: "菜单选项", }).selected(this.select).selectIcon(true)
    }
  }

  build() {
    Row() {
      Column() {
        Text('click to show menu').fontSize(50).fontWeight(FontWeight.Bold)
      }.bindMenu(this.MyMenu).width('100%')
    }.height('100%')
  }
}

上下文菜单

通过bindContextMenu接口可以自定义菜单，设置菜单弹出的触发方式，触发方式为右键或长按。使用bindContextMenu弹出的菜单项是在独立子窗口内的，可显示在应用窗口外部。

Button('click for Menu') .bindContextMenu(this.MyMenu, ResponseType.RightClick) 

菜单组件类型

Menu

Menu组件以垂直列表形式显示的菜单。

Menu() 

Menu组件需和bindMenu或bindContextMenu方法配合使用，不支持作为普通组件单独使用。

子组件

Menu组件可以包含MenuItem、MenuItemGroup子组件。

属性

Menu组件支持以下属性：

• fontSize(deprecated): 统一设置Menu中所有文本的尺寸（从API Version 10开始废弃，建议使用font代替）
• font10+: 统一设置Menu中所有文本的尺寸
• fontColor10+: 统一设置Menu中所有文本的颜色
• radius10+: 设置Menu边框圆角半径
• menuItemDivider12+: 设置menuItem分割线的样式
• menuItemGroupDivider12+: 设置menuItemGroup上下分割线的样式
• subMenuExpandingMode12+: 设置Menu子菜单展开样式

示例

import { SymbolGlyphModifier } from '@kit.ArkUI';

@Entry
@Component
struct Index {
  @State startIconModifier: SymbolGlyphModifier = new SymbolGlyphModifier($r('sys.symbol.ohos_mic')).fontSize('24vp');
  @State endIconModifier: SymbolGlyphModifier = new SymbolGlyphModifier($r('sys.symbol.ohos_trash')).fontSize('24vp');
  @State selectIconModifier: SymbolGlyphModifier = new SymbolGlyphModifier($r('sys.symbol.checkmark')).fontSize('24vp');
  @State select: boolean = true;

  @Builder
  SubMenu() {
    Menu() {
      MenuItem({ content: "复制", labelInfo: "Ctrl+C" })
      MenuItem({ content: "粘贴", labelInfo: "Ctrl+V" })
    }
  }

  @Builder
  MyMenu() {
    Menu() {
      MenuItem({ symbolStartIcon: this.startIconModifier, content: "菜单选项" })
      MenuItem({ symbolStartIcon: this.startIconModifier, content: "菜单选项" }).enabled(false)
      MenuItem({
        symbolStartIcon: this.startIconModifier,
        content: "菜单选项",
        symbolEndIcon: this.endIconModifier,
        builder: (): void => this.SubMenu()
      })
      MenuItemGroup({ header: '小标题' }) {
        MenuItem({
          symbolStartIcon: this.startIconModifier,
          content: "菜单选项",
          symbolEndIcon: this.endIconModifier,
          builder: (): void => this.SubMenu()
        })
        MenuItem({
          symbolStartIcon: this.startIconModifier,
          content: "菜单选项",
          symbolEndIcon: this.endIconModifier,
          builder: (): void => this.SubMenu()
        })
      }

      MenuItem({ content: "菜单选项", }).selected(this.select).selectIcon(this.selectIconModifier)
    }
  }

  build() {
    Row() {
      Column() {
        Text('click to show menu').fontSize(50).fontWeight(FontWeight.Bold)
      }.bindMenu(this.MyMenu).width('100%')
    }.height('100%')
  }
}

 

MenuItem

MenuItem组件用来展示菜单Menu中具体的item菜单项。

MenuItem(value?: MenuItemOptions| CustomBuilder) 

属性

MenuItem组件支持以下属性：

• selected: 设置菜单项是否选中
• selectIcon: 设置当菜单项被选中时，是否显示被选中的图标
• contentFont10+: 设置菜单项中内容信息的字体样式
• contentFontColor10+: 设置菜单项中内容信息的字体颜色
• labelFont10+: 设置菜单项中标签信息的字体样式
• labelFontColor10+: 设置菜单项中标签信息的字体颜色

事件

MenuItem组件支持onChange事件，当选中状态发生变化时触发。

MenuItemGroup

MenuItemGroup组件用来展示菜单MenuItem的分组。

MenuItemGroup(value?: MenuItemGroupOptions) 

 

操作菜单

ArkUI还提供了操作菜单（ActionMenu）的API，可以快速创建并显示操作菜单。

showActionMenu

showActionMenu(options: ActionMenuOptions, callback: AsyncCallback<ActionMenuSuccessResponse>):void 

创建并显示操作菜单，菜单响应结果异步返回。

参数

• options: 操作菜单选项
• callback: 菜单响应结果回调

示例

        Button("action menu").onClick((_)=>{
          prompt.showActionMenu({
            title: 'Title Info',
            buttons: [{ text: 'item1', color: '#666666' }, { text: 'item2', color: '#000000' },]
          }, (err, data) => {
            if (err) {
              console.info('showActionMenu err: ' + err);
              return;
            }
            console.info('showActionMenu success callback, click button: ' + data.index);
          })

        })

 

总结

ArkUI提供了丰富的菜单组件和API，可以满足各种场景下的菜单需求：

1. 基本菜单：通过Menu、MenuItem和MenuItemGroup组件构建，支持自定义样式和子菜单
2. 上下文菜单：通过bindContextMenu实现，支持长按或右键触发
3. 文本选择菜单：通过SelectionMenu组件实现，适用于富文本编辑场景
4. 操作菜单：通过showActionMenu API快速创建简单的操作菜单

这些组件和API共同构成了ArkUI强大的菜单系统，开发者可以根据具体需求选择合适的实现方式，为用户提供流畅、直观的菜单交互体验。

----

以上