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'@BuildersubMenu() {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)})}}@BuildermyMenu() {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、效果图