Menu組件是一種常見的用戶界面（UI）控件，用于在移動(dòng)應(yīng)用程序中顯示可選項(xiàng)列表。它通常由一系列鏈接或按鈕組成，以幫助用戶導(dǎo)航和選擇所需的操作。Menu組件可以在水平或垂直方向上呈現(xiàn)，可以是下拉或彈出式的，并可以在需要時(shí)動(dòng)態(tài)更新其內(nèi)容。通常，Menu組件可以在導(dǎo)航欄、側(cè)邊欄或上下文菜單中找到。一些Menu組件還支持圖標(biāo)和快捷鍵，以增強(qiáng)用戶交互性和可用性。

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

默認(rèn)樣式的菜單指的是操作系統(tǒng)默認(rèn)提供的菜單樣式，在不經(jīng)過樣式定義的情況下，菜單的外觀和行為取決于操作系統(tǒng)。例如，大多數(shù)操作系統(tǒng)提供了一個(gè)默認(rèn)的下拉菜單樣式，其中包含一個(gè)向下箭頭和一個(gè)下拉列表，當(dāng)用戶單擊時(shí)，列表會(huì)向下滑動(dòng)。而操作系統(tǒng)的菜單通常包括一個(gè)固定的樣式。

@Entry
@Component
struct Index {
  build() {
    Row() {
      Button('click for Menu')
        .bindMenu([
          {
            value: 'Menu1',
            action: () => {
              console.info('handle Menu1 select')
            }
          }
        ])
    }
    .margin(20)
    .height('100%')
  }
}

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

雖然默認(rèn)樣式的菜單可以提供一些基本的菜單操作，但通常它們無法滿足大多數(shù)應(yīng)用程序或網(wǎng)站的需求，因此需要自定義樣式的菜單。

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

  @Builder
  MyMenu(){
    Menu() {
      MenuItem({ startIcon: $r("app.media.icon"), content: "菜單選項(xiàng)" })
      MenuItem({ startIcon: $r("app.media.icon"), content: "菜單選項(xiàng)" }).enabled(false)
      MenuItem({
        startIcon: this.iconStr,
        content: "菜單選項(xiàng)",
        endIcon: $r("app.media.app_icon"),
        builder: this.SubMenu.bind(this),
      })
      MenuItemGroup({ header: '小標(biāo)題' }) {
        MenuItem({ content: "菜單選項(xiàng)" })
          .selectIcon(true)
          .selected(this.select)
          .onChange((selected) => {
            console.info("menuItem select" + selected);
            this.iconStr2 = $r("app.media.icon");
          })
        MenuItem({
          startIcon: $r("app.media.app_icon"),
          content: "菜單選項(xiàng)",
          endIcon: $r("app.media.app_icon"),
          builder: this.SubMenu.bind(this)
        })
      MenuItem({
        startIcon: this.iconStr2,
        content: "菜單選項(xiàng)",
        endIcon: $r("app.media.app_icon")
      })
    }
  }

  build() {
    Row() {
      Button('click for Menu')
        .bindMenu(this.MyMenu)
    }
  }
}

本人測(cè)試子菜單在模擬器和預(yù)覽都出不來

寫在最后

• 如果你覺得這篇內(nèi)容對(duì)你還蠻有幫助，我想邀請(qǐng)你幫我三個(gè)小忙：
• 點(diǎn)贊，轉(zhuǎn)發(fā)，有你們的 『點(diǎn)贊和評(píng)論』，才是我創(chuàng)造的動(dòng)力。
• 關(guān)注小編，同時(shí)可以期待后續(xù)文章ing?，不定期分享原創(chuàng)知識(shí)。
• 更多鴻蒙最新技術(shù)知識(shí)點(diǎn)，請(qǐng)關(guān)注作者博客： https://t.doruo.cn/14DjR1rEY

• 異色邊緣龍局北辰卡組詳解
• 《怪化貓》系列第二章《火鼠》近日公開諸多新情報(bào)
• steam特賣頁面出現(xiàn)神秘粉發(fā)女孩 引發(fā)網(wǎng)友熱烈討論
• 大雪節(jié)氣活動(dòng)：桃源深處有人家雪盛冬藏
• 游俠晚報(bào)：《絕地潛兵2》口碑上升 Fami通一周評(píng)分