鸿蒙HarmonyOS实战-ArkUI组件（Menu）

合集 - 鸿蒙入门实战全套（核心知识点）(22)

1.鸿蒙HarmonyOS实战-ArkTS语言（基本语法）03-202.鸿蒙HarmonyOS实战-ArkTS语言（状态管理）03-213.鸿蒙HarmonyOS实战-ArkTS语言（渲染控制）03-214.鸿蒙HarmonyOS实战-ArkUI组件（Row/Column）03-225.鸿蒙HarmonyOS实战-ArkUI组件（Stack）03-236.鸿蒙HarmonyOS实战-ArkUI组件（Flex）03-247.鸿蒙HarmonyOS实战-ArkUI组件（RelativeContainer）03-258.鸿蒙HarmonyOS实战-ArkUI组件（GridRow/GridCol）03-269.鸿蒙HarmonyOS实战-ArkUI组件（mediaquery）03-2710.鸿蒙HarmonyOS实战-ArkUI组件（List）03-2911.鸿蒙HarmonyOS实战-ArkUI组件（Grid/GridItem）03-2912.鸿蒙HarmonyOS实战-ArkUI组件（Swiper）03-3013.鸿蒙HarmonyOS实战-ArkUI组件（Button）04-0114.鸿蒙HarmonyOS实战-ArkUI组件（Radio）04-0215.鸿蒙HarmonyOS实战-ArkUI组件（Toggle）04-0216.鸿蒙HarmonyOS实战-ArkUI组件（Progress）04-0317.鸿蒙HarmonyOS实战-ArkUI组件（Text/Span）04-0318.鸿蒙HarmonyOS实战-ArkUI组件（TextInput/TextArea）04-0719.鸿蒙HarmonyOS实战-ArkUI组件（CustomDialog）04-0820.鸿蒙HarmonyOS实战-ArkUI组件（Video）04-0921.鸿蒙HarmonyOS实战-ArkUI组件（Popup）04-10

22.鸿蒙HarmonyOS实战-ArkUI组件（Menu）04-11

收起

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

本人测试子菜单在模拟器和预览都出不来

🚀写在最后

• 如果你觉得这篇内容对你还蛮有帮助，我想邀请你帮我三个小忙：
• 点赞，转发，有你们的 『点赞和评论』，才是我创造的动力。
• 关注小编，同时可以期待后续文章ing🚀，不定期分享原创知识。
• 更多鸿蒙最新技术知识点，请关注作者博客：https://t.doruo.cn/14DjR1rEY