} ]) } .margin(20) .height('100%') } }
2.创建自定义样式的菜单
虽然默认样式的菜单可以提供一些基本的菜单操作，但通常它们无法满足大多数应用程序或网站的需求，因此需要自定义样式的菜单。
@Entry @Component struct Index { @State select: boolean = true private iconStr: 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"), 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🚀，不定期分享原创知识。
深知大多数程序员，想要提升技能，往往是自己摸索成长，但自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！
既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，涵盖了95%以上鸿蒙开发知识点，真正体系化！
由于文件比较多，这里只是将部分目录截图出来，全套包含大厂面经、学习笔记、源码讲义、实战项目、大纲路线、讲解视频，并且后续会持续更新
