鸿蒙HarmonyOS实战-ArkUI组件(Menu)_arkui 父页面展示子页面(1)

85 阅读2分钟

} }

在这里插入图片描述

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

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

@Entry @Component struct Index { @State select: boolean = true private iconStr: ResourceStr = r("app.media.appicon")privateiconStr2: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.appicon"),content:"菜单选项",endIcon: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🚀,不定期分享原创知识。
  • 想要获取文中提到的学习资料,请点击→全套鸿蒙HarmonyOS学习资料
  • 或者关注小编后私信回复【666】也可获取资料哦~~

img img

网上学习资料一大堆,但如果学到的知识不成体系,遇到问题时只是浅尝辄止,不再深入研究,那么很难做到真正的技术提升。

需要这份系统化的资料的朋友,可以戳这里获取

一个人可以走的很快,但一群人才能走的更远!不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人,都欢迎加入我们的的圈子(技术交流、学习资源、职场吐槽、大厂内推、面试辅导),让我们一起学习成长!