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、效果图