MenuItem里的icon图标怎么改颜色？

Question

MenuItem里的icon图标怎么改颜色

Answer 1

解决措施

设置一个状态变量用来表示图标的路径，可以通过在onChange事件中，通过改变状体变量的值来改变一个该图标，改变的图标和原来的图标样式相同，颜色不同。

示例代码

@Entry   
@Component   
struct MenuTest {   
 @State select: boolean = true   
 @State iconStr: ResourceStr = \$r("app.media.menu")   
 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.arrowRight"),   
 builder: (): void =\> this.SubMenu()   
 })   
 .onChange((selected) =\> {   
 console.info("menuItem select" + selected);   
 this.iconStr = \$r("app.media.menu1");   
 })   
 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.menu"),   
 content: "菜单选项",   
 endIcon: \$r("app.media.arrowRight"),   
 builder: (): void =\> this.SubMenu()   
 })   
 }   
   
 MenuItem({   
 startIcon: this.iconStr2,   
 content: "菜单选项",   
 endIcon: \$r("app.media.arrowRight")   
 })   
 }   
 }   
   
 build() {   
 Row() {   
 Column() {   
 Text('点击展示菜单')   
 .fontSize(50)   
 .fontWeight(FontWeight.Bold)   
 }   
 .bindMenu(this.MyMenu)   
 .width('100%')   
 }   
 .height('100%')   
 }   
}