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

2024-04-26
湖南
本文字数：1511 字
阅读完需：约 5 分钟

🚀一、Menu 组件

Menu 组件是一种常见的用户界面（UI）控件，用于在移动应用程序中显示可选项列表。它通常由一系列链接或按钮组成，以帮助用户导航和选择所需的操作。Menu 组件可以在水平或垂直方向上呈现，可以是下拉或弹出式的，并可以在需要时动态更新其内容。通常，Menu 组件可以在导航栏、侧边栏或上下文菜单中找到。一些 Menu 组件还支持图标和快捷键，以增强用户交互性和可用性。

🔎1.创建默认样式的菜单

默认样式的菜单指的是操作系统默认提供的菜单样式，在不经过样式定义的情况下，菜单的外观和行为取决于操作系统。例如，大多数操作系统提供了一个默认的下拉菜单样式，其中包含一个向下箭头和一个下拉列表，当用户单击时，列表会向下滑动。而操作系统的菜单通常包括一个固定的样式。

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

复制代码

🔎2.创建自定义样式的菜单

虽然默认样式的菜单可以提供一些基本的菜单操作，但通常它们无法满足大多数应用程序或网站的需求，因此需要自定义样式的菜单。

@Entry@Componentstruct 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

发布于: 25 分钟前阅读数: 5

蜀道山

关注

欢迎关注作者公众号：【蜀道衫】 2023-12-29 加入

3年Java后端，5年Android应用开发，精通Java高并发、JVM调优、以及Android开发各种技能。现专研学习鸿蒙HarmonyOS Next操作系统

发布

暂无评论

创作场景

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

🚀一、Menu 组件

🔎1.创建默认样式的菜单

🔎2.创建自定义样式的菜单

🚀写在最后

蜀道山

评论