【关键词】
Menu、bindMenu、ArkTS
【实现方案】
方案一:
1、实现代码:
@Entry
@Component
struct MenuExample {
@Builder
myMenu(){
Menu(){
MenuItem({content: '编译 Hap(s)'})
MenuItem({content: '编译 APP(s)'})
}
}
@Builder
subMenu(){
Menu(){
MenuItemGroup({header: '构建'}){
MenuItem({content: '编译Hap(s)/APP(s)',builder:():void=> this.myMenu()})
MenuItem({content: '清理项目'})
}
}
}
build() {
Row(){
Column(){
Text('我的菜单栏')
.margin({top: 30})
}
.bindMenu(this.subMenu())
}
}
}
2、效果图
方案二:
1、实现代码:
@Entry
@Component
struct MenuExample {
build() {
Row(){
Column(){
Menu(){
MenuItemGroup({header: '构建'}){
MenuItem({content: '编译Hap(s)/APP(s)'}).bindMenu([
{
value: '编译 Hap(s)',
action: () => {
console.info('handle Menu1 select')
}
},
{
value: '编译 APP(s)',
action: () => {
console.info('handle Menu2 select')
}
},
])
MenuItem({content: '清理项目'})
}
}
}
}
}
}
2、效果图:
注意:官网上有说Menu组件不支持作为普通组件单独使用,不确定这样用会不会带来什么问题。
【参考文档】
1、https://developer.harmonyos.com/cn/docs/documentation/doc-references-V3/ts-basic-components-menu-0000001493903960-V3
2、https://developer.harmonyos.com/cn/docs/documentation/doc-references-V3/ts-universal-attributes-menu-0000001478181385-V3