垂直列表形式顯示的菜單

子組件

包含MenuItem、MenuItemGroup子組件。

接口

Menu()

作為菜單的固定容器，無參數(shù)。

屬性

除支持通用屬性外，還支持以下屬性:

示例

@Entry
@Component
struct Index {
  @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"),
        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")
      })
    }
  }

  build() {
    Row() {
      Column() {
        Text('click to show menu')
          .fontSize(50)
          .fontWeight(FontWeight.Bold)
      }
      .bindMenu(this.MyMenu)
      .width('100%')
    }
    .height('100%')
  }
}