#鸿蒙通关秘籍#怎样在鸿蒙开发中自定义样式的菜单？

在鸿蒙中，如果默认的菜单样式不符合需求，可以通过@Builder自定义菜单项。首先，定义一个包含菜单项的Menu组件，然后通过@Builder进行菜单内容的构建。以下是具体的代码展示：

typescript class Tmp { iconStr2: ResourceStr = $r("app.media.view_list_filled")

set(val: Resource) { this.iconStr2 = val } }

@Entry @Component struct menuExample { @State select: boolean = true private iconStr: ResourceStr = $r("app.media.view_list_filled") private iconStr2: ResourceStr = $r("app.media.view_list_filled")

@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.arrow_right_filled"), builder: this.SubMenu }) MenuItemGroup({ header: '小标题' }) { MenuItem({ content: "菜单选项" }) .selectIcon(true) .selected(this.select) .onChange((selected) => { console.info("menuItem select" + selected); let Str: Tmp = new Tmp() Str.set($r("app.media.icon")) }) MenuItem({ startIcon: $r("app.media.view_list_filled"), content: "菜单选项", endIcon: $r("app.media.arrow_right_filled"), builder: this.SubMenu }) } MenuItem({ startIcon: this.iconStr2, content: "菜单选项", endIcon: $r("app.media.arrow_right_filled") }) } }

build() { // ... } }

通过将@Builder定义的MyMenu与bindMenu连接，完成自定义菜单的实现。