【愚公系列】2023年12月 HarmonyOS教学课程 023-ArkUI组件（Menu）

愚公搬代码

发布于 2025-06-02 16:32:24

10500

代码可运行

文章被收录于专栏：历史专栏历史专栏

运行总次数：0

代码可运行

🚀一、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%')
  }
}

🔎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) 设置菜单打开行为
    }
  }
}