OpenHarmony菜单如何添加图标

在 OpenHarmony（ArkUI / eTS 开发） 中，“菜单添加图标”通常分几种场景，下面给你最常见的做法。

一、使用 Menu + MenuItem 添加图标（推荐）

适用于 右键菜单、点击弹出菜单。

@Entry
@Component
struct MenuExample {
  @State showMenu: boolean = false

  build() {
    Column() {
      Button('点击显示菜单')
        .onClick((event) => {
          this.showMenu = true
        })
        .bindMenu([
          {
            value: '新建',
            icon: $r('app.media.ic_new'), // 图标
            action: () => {
              console.log('新建')
            }
          },
          {
            value: '删除',
            icon: $r('app.media.ic_delete'),
            action: () => {
              console.log('删除')
            }
          }
        ])
    }
    .width('100%')
    .height('100%')
  }
}

图标要求

• 放在：entry/src/main/resources/base/media/
• 支持：png / jpg / svg
• 使用 $r('app.media.xxx') 引用

二、使用 @Menu + MenuItem（自定义菜单）

适合 复杂菜单、带样式控制。

@Entry
@Component
struct CustomMenu {
  @Builder
  myMenu() {
    Menu() {
      MenuItem({ value: '分享', icon: $r('app.media.ic_share') })
        .onClick(() => console.log('分享'))

      MenuItem({ value: '收藏', icon: $r('app.media.ic_star') })
        .onClick(() => console.log('收藏'))
    }
  }

  build() {
    Column() {
      Button('显示菜单')
        .bindMenu(this.myMenu)
    }
  }
}

三、在 List / Navigation 菜单中添加图标

如果是 侧边栏 / 设置菜单：

List() {
  ListItem() {
    Row() {
      Image($r('app.media.ic_home'))
        .width(24)
        .height(24)
      Text('首页')
        .margin({ left: 12 })
    }
  }
}

四、系统图标（不打包图片）

OpenHarmony 提供部分 Symbol 图标（API 10+）：

Image($r('sys.media.ohos_ic_public_add'))
  .width(24)
  .height(24)

五、常见问题

1. 图标不显示？

✅ 检查：

• 图片是否在 media 目录
• 名称是否正确
• 是否使用 $r()

2. 图标大小异常？

Image($r('app.media.ic_new'))
  .width(20)
  .height(20)

如果你能说明：

• ✅ OpenHarmony 版本（API 9 / 10 / 11）
• ✅ 是 系统菜单 / 应用菜单 / 设置菜单

我可以给你更精确的示例。