【HarmonyOS】ArkTS学习之二级菜单的实现

发布时间 2023-10-31 17:40:03作者: Mayism123

【关键词】

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

cke_4084.png

方案二:

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

cke_11487.png

注意:官网上有说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