鴻蒙HarmonyOS實戰-ArkUI元件（Menu）

蜀道山QAQ發表於2024-04-11
鴻蒙UI元件

🚀一、Menu元件

Menu元件是一種常見的使用者介面（UI）控制元件，用於在移動應用程式中顯示可選項列表。它通常由一系列連結或按鈕組成，以幫助使用者導航和選擇所需的操作。Menu元件可以在水平或垂直方向上呈現，可以是下拉或彈出式的，並可以在需要時動態更新其內容。通常，Menu元件可以在導航欄、側邊欄或上下文選單中找到。一些Menu元件還支援圖示和快捷鍵，以增強使用者互動性和可用性。

🔎1.建立預設樣式的選單

預設樣式的選單指的是作業系統預設提供的選單樣式，在不經過樣式定義的情況下，選單的外觀和行為取決於作業系統。例如，大多數作業系統提供了一個預設的下拉選單樣式，其中包含一個向下箭頭和一個下拉選單，當使用者單擊時，列表會向下滑動。而作業系統的選單通常包括一個固定的樣式。

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

image

🔎2.建立自定義樣式的選單

雖然預設樣式的選單可以提供一些基本的選單操作，但通常它們無法滿足大多數應用程式或網站的需求，因此需要自定義樣式的選單。

@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: "複製", 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.app_icon"),
        // 當builder引數進行配置時，表示與menuItem項繫結了子選單。滑鼠hover在該選單項時，會顯示子選單。
        builder: this.SubMenu.bind(this),
      })
      MenuItemGroup({ header: '小標題' }) {
        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.app_icon"),
          content: "選單選項",
          endIcon: $r("app.media.app_icon"),
          builder: this.SubMenu.bind(this)
        })
      }
      MenuItem({
        startIcon: this.iconStr2,
        content: "選單選項",
        endIcon: $r("app.media.app_icon")
      })
    }
  }

  build() {
    Row() {
      Button('click for Menu')
        .bindMenu(this.MyMenu)
        // .bindContextMenu(this.MyMenu, ResponseType.RightClick) 設定選單開啟行為
    }
  }
}

image

本人測試子選單在模擬器和預覽都出不來

🚀寫在最後

  • 如果你覺得這篇內容對你還蠻有幫助，我想邀請你幫我三個小忙：
  • 點贊，轉發，有你們的 『點贊和評論』，才是我創造的動力。
  • 關注小編，同時可以期待後續文章ing🚀，不定期分享原創知識。
  • 更多鴻蒙最新技術知識點，請關注作者部落格：https://t.doruo.cn/14DjR1rEY

image

相關文章