OpenHarmony菜单怎样设置图标

在 OpenHarmony（ArkUI，eTS/ArkTS） 里，“菜单设置图标”常见于两种场景：OptionMenu（右上角菜单） 和 自定义菜单（Menu 组件）。下面分别说明。

一、页面右上角菜单（OptionMenu）设置图标

适用于 page 的 onMenu 配置。

示例（ArkTS）

// main_pages.json 或 page 配置中
{
  "src": "pages/Index",
  "onMenu": true
}

// Index.ets
@Entry
@Component
struct Index {
  @State menuItems: Array<MenuItem> = [
    {
      value: "设置",
      icon: $r('app.media.ic_settings') // 图标资源
    },
    {
      value: "关于",
      icon: $r('app.media.ic_about')
    }
  ]

  build() {
    Column() {
      Text('OpenHarmony 菜单示例')
    }
    .width('100%')
    .height('100%')
  }

  onMenu() {
    return this.menuItems
  }
}

✅ 图标放在：

resources/base/media/ic_settings.png

二、使用 Menu 组件（弹窗菜单）设置图标

适合按钮点击弹出菜单。

示例

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

  build() {
    Column() {
      Button('点击菜单')
        .onClick((event) => {
          this.showMenu = true
        })
        .bindMenu([
          {
            value: '打开',
            icon: $r('app.media.ic_open'),
            action: () => {
              console.log('打开')
            }
          },
          {
            value: '删除',
            icon: $r('app.media.ic_delete'),
            action: () => {
              console.log('删除')
            }
          }
        ])
    }
    .width('100%')
    .height('100%')
  }
}

三、自定义菜单（List + Image）方式

如果系统菜单不满足需求：

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

四、常见问题

1. 图标不显示？

• 确认图片在 resources/base/media
• 使用 $r('app.media.xxx')
• PNG 建议 24×24 或 48×48

2. 支持 SVG 吗？

✅ OpenHarmony 支持 svg 资源（推荐）

如果你用的是 具体版本（如 OpenHarmony 3.2 / 4.0） 或 具体菜单类型（Tabs / Menu / OptionMenu），可以告诉我，我给你更精确的代码。