第九节HarmonyOS 常用基础组件23-Menu、MenuItem、MenuItemGroup

1、描述

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

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

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

2、子组件

Menu：包含MenuItem、MenuItemGroup子组件。

MenuItem：无。

MenuItemGroup：MenuItem

3、接口

Menu()

MenuItem(value?: MenuItenOptions | CustomBuilder)

MenuItemGroup(value?: MenuItemGroupOptions)

4、参数

参数名	参数类型	必填	描述
value	MenuItenOptions | CustomBuilder	否	包含设置MenuItem的各项信息。
value	MenuItemGroupOptions	否	包含设置MenuItemGroup的标题和尾部显示信息。

4、属性

Menu：

fontSize - Length - 统一设置Menu中所有文本的尺寸。

MenuItem：
selected - boolean - 设置菜单项是否选中，默认值：false。

selectIcon - boolean -当菜单被选中时，是否显示被选中的图标。

5、MenuItem - MenuItemOptions类型说明

名称	类型	必填	描述
startIcon	ResourceStr	否	Item中显示在左侧的图标信息路径。
content	ResourceStr	是	Item的内容信息。
endIcon	ResourceStr	否	Item中显示在右侧的图标信息路径。
labelInfo	ResourceStr	否	定义结束标签信息，如快捷方式Ctrl+C等。
builder	CustomBuilder	否	用于构建二级菜单。

6、MenuItemGroup -MenuItemGroupOptions类型说明

名称	类型	必填	描述
header	ResourceStr | CustomBuilder	否	设置对应group的标题显示信息。
footer	ResourceStr | CustomBuilder	否	设置对应group的尾部显示信息。

7、事件（MenuItem）

onChange - (selsected:boolean) => void - 当选中状态发生变化时，触发该回调，只有手动触发且MenuItem状态改变时才会触发onChange回调。value为true时，表示已选中，value为false时，表示未选中。

8、示例

import router from '@ohos.router'

@Entry
@Component
struct MenuPage {
  @State message: string = 'click to show menu'

  @Builder
  subMenu() {
    Menu() {
      MenuItem({
        startIcon: $r('app.media.icon'),
        content: "二级菜单-复制",
        labelInfo: "Ctrl+C"
      })
        .onChange((selected) => {
          console.log("zhangDM", "subMenu MenuItem1 onChange selected = " + selected)
        })
      MenuItem({
        startIcon: $r('app.media.icon'),
        content: "二级菜单-粘贴",
        labelInfo: "Ctrl+V"
      })
        .onChange((selected) => {
          console.log("zhangDM", "subMenu MenuItem2 onChange selected = " + selected)
        })
    }
  }

  @Builder
  myMenu() {
    Menu() {
      MenuItem({ startIcon: $r('app.media.icon'), content: "菜单选项1" })
      MenuItem({ startIcon: $r('app.media.icon'), content: "菜单选项2" })
      MenuItem({
        startIcon: $r('app.media.icon'),
        content: "菜单二级",
        endIcon: $r('app.media.ic_ok'),
        builder: this.subMenu.bind(this)
      })

      MenuItemGroup({ header: "小标题" }) {
        MenuItem({
          startIcon: $r('app.media.icon'),
          content: "MenuItemGroup-01"
        })
          .selected(true)
          .onChange((selected) => {
            console.log("zhangDM", "myMenu MenuItemGroup1 onChange selected = " + selected)
          })
        MenuItem({
          startIcon: $r('app.media.icon'),
          content: "MenuItemGroup-02"
        })
          .selected(true)
          .onChange((selected) => {
            console.log("zhangDM", "myMenu MenuItemGroup2 onChange selected = " + selected)
          })
      }

      MenuItem({
        startIcon: $r("app.media.icon"),
        content: "菜单选项",
        endIcon: $r("app.media.ic_ok")
      })

    }
  }

  build() {
    Row() {
      Scroll() {
        Column() {
          Text(this.message)
            .fontSize(22)
            .fontWeight(FontWeight.Bold)
            .width("96%")

          Blank(12)
          Button("Menu文本文档")
            .fontSize(20)
            .backgroundColor('#007DFF')
            .width('96%')
            .onClick(() => {
              // 处理点击事件逻辑
              router.pushUrl({
                url: "pages/baseComponent/menu/MenuDesc",
              })
            })
          Blank(12)

        }
        .width('100%')
        .bindMenu(this.myMenu)
      }
    }
    .padding({ top: 12, bottom: 12 })
  }
}

9、效果图