菜單（Menu）

創(chuàng)建默認(rèn)樣式的菜單

菜單需要調(diào)用bindMenu接口來實現(xiàn)。bindMenu響應(yīng)綁定組件的點擊事件，綁定組件后手勢點擊對應(yīng)組件后即可彈出。

創(chuàng)建自定義樣式的菜單

當(dāng)默認(rèn)樣式不滿足開發(fā)需求時，可使用@Builder自定義菜單內(nèi)容。可通過bindMenu接口進(jìn)行菜單的自定義。

@Builder開發(fā)菜單內(nèi)的內(nèi)容

@State select: boolean = true
private iconStr: ResourceStr = $r("app.media.view_list_filled")
private iconStr2: ResourceStr = $r("app.media.view_list_filled")
@Builder
SubMenu() {
  Menu() {
    MenuItem({ content: "復(fù)制", labelInfo: "Ctrl+C" })
    MenuItem({ content: "粘貼", labelInfo: "Ctrl+V" })
  }
}

@Builder
MyMenu(){
  Menu() {
    MenuItem({ startIcon: $r("app.media.icon"), content: "菜單選項" })
    MenuItem({ startIcon: $r("app.media.icon"), content: "菜單選項" }).enabled(false)
    MenuItem({
      startIcon: this.iconStr,
      content: "菜單選項",
      endIcon: $r("app.media.arrow_right_filled"),
      // 當(dāng)builder參數(shù)進(jìn)行配置時，表示與menuItem項綁定了子菜單。鼠標(biāo)hover在該菜單項時，會顯示子菜單。
      builder: this.SubMenu.bind(this),
    })
    MenuItemGroup({ header: '小標(biāo)題' }) {
      MenuItem({ content: "菜單選項" })
        .selectIcon(true)
        .selected(this.select)
        .onChange((selected) => {
       console.info("menuItem select" + selected);
       this.iconStr2 = $r("app.media.icon");
        })
      MenuItem({
        startIcon: $r("app.media.view_list_filled"),
        content: "菜單選項",
        endIcon: $r("app.media.arrow_right_filled"),
        builder: this.SubMenu.bind(this)
      })
    }
    MenuItem({
      startIcon: this.iconStr2,
      content: "菜單選項",
      endIcon: $r("app.media.arrow_right_filled")
    })
  }
}
  

bindMenu屬性綁定組件

Button('click for Menu')
  .bindMenu(this.MyMenu)

創(chuàng)建支持右鍵或長按的菜單

通過bindContextMenu接口進(jìn)行菜單的自定義及菜單彈出的觸發(fā)方式：右鍵或長按。使用bindContextMenu彈出的菜單項是在獨立子窗口內(nèi)的，可顯示在應(yīng)用窗口外部。