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

【关键词】

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: '清理项目'})
          }
        }
      }
    }
  }
}