OpenHarmony菜单自定义图标怎么设置

OpenHarmony菜单自定义图标设置

一 使用 Menu 与 MenuItem 设置图标

• 关键属性
  • startIcon：菜单项左侧图标（支持本地图片资源路径）。
  • endIcon：菜单项右侧图标（如“更多/添加”等）。
  • content：菜单项文本。
  • labelInfo：快捷方式提示（如“Ctrl+C”）。
  • selected / selectIcon：控制选中态及其图标显示。
  • onChange：选中状态变化回调。
• 基本用法
  • 通过 Menu() 创建菜单容器；用 MenuItem({…}) 创建菜单项并设置 startIcon/endIcon/content；用 MenuItemGroup({ header, footer }) 对菜单项分组；按需监听 onChange 执行动作。

二 代码示例 ArkTS

import { Menu, MenuItem, MenuItemGroup } from '@kit.ArkUI';

@Entry
@Component
struct SimpleMenu {
  build() {
    Column({ space: 20 }) {
      // 1) 基础菜单：左侧图标 + 文本 + 右侧图标
      Menu() {
        MenuItemGroup({ header: '基础' }) {
          MenuItem({
            startIcon: $r('app.media.ic_copy'),     // 左侧图标
            content: '复制',
            endIcon: $r('app.media.ic_arrow_right'), // 右侧图标
            labelInfo: 'Ctrl+C',
            onChange: (selected) => console.info('复制', selected)
          })
          MenuItem({
            startIcon: $r('app.media.ic_paste'),
            content: '粘贴',
            endIcon: $r('app.media.ic_arrow_right'),
            labelInfo: 'Ctrl+V',
            onChange: (selected) => console.info('粘贴', selected)
          })
        }
      }
      .width(240)
      .backgroundColor('#FFFFFF')

      // 2) 选中态示例：选中时显示选中图标
      Menu() {
        MenuItemGroup({ header: '选中态' }) {
          MenuItem({
            startIcon: $r('app.media.ic_star'),
            content: '收藏',
            selected: false,
            selectIcon: true, // 选中时显示选中图标
            onChange: (selected) => console.info('收藏', selected)
          })
        }
      }
      .width(240)
      .backgroundColor('#FFFFFF')
    }
    .padding(20)
  }
}

• 说明
  • 图标建议使用 $r(‘app.media.xxx’) 资源引用，便于多分辨率适配与打包。
  • 如需二级菜单，可在 MenuItem 中使用 builder 自定义子菜单结构。

三 标题栏菜单图标 EditableTitleBar

• 若需在标题栏右侧显示自定义图标菜单，可使用 EditableTitleBar 的 menuItems 属性（自 API 11 起支持）。

import { EditableTitleBar, EditableLeftIconType, promptAction } from '@kit.ArkUI';

@Entry
@Component
struct TitleBarWithMenu {
  build() {
    EditableTitleBar({
      leftIconStyle: EditableLeftIconType.Back,
      title: '编辑页面',
      menuItems: [
        { value: $r('app.media.ic_save'), label: '保存', action: () => promptAction.showToast({ message: '保存' }) },
        { value: $r('app.media.ic_share'), label: '分享', action: () => promptAction.showToast({ message: '分享' }) }
      ],
      onCancel: () => promptAction.showToast({ message: '取消' })
    })
  }
}

• 说明
  • value 为图标资源；label 为可选描述；isEnabled 控制是否可用；action 为点击回调。

四 列表项滑动快捷菜单图标 ListItem.swipeAction

• 在 List 中可通过 ListItem.swipeAction 设置左滑/右滑后显示的自定义菜单，用 Image 放置图标按钮。

import { ListItem, Image } from '@kit.ArkUI';

@Builder itemEnd(index: number) {
  Row() {
    Image($r('app.media.ic_public_topping'))
      .width(40).height(40)
      .onClick(() => { /* 置顶逻辑 */ })
    Image($r('app.media.ic_public_delete'))
      .width(40).height(40)
      .onClick(() => { /* 删除逻辑 */ })
  }
  .padding(4)
  .justifyContent(FlexAlign.SpaceEvenly)
}

// 在 ForEach 渲染的 ListItem 中：
ListItem() { /* ... */ }
.swipeAction({ end: this.itemEnd(index) }) // 右滑显示

• 说明
  • swipeAction.end 指定右滑区域组件；可放置多个 Image 图标实现多操作。

五 常见问题与排查

• 图标不显示
  • 确认资源路径正确，优先使用 $r(‘app.media.xxx’)；检查图标尺寸与颜色对比度；确保父容器尺寸与可见性。
• 选中态图标无效
  • 为 MenuItem 同时设置 selected: true 与 selectIcon: true。
• 快捷方式不生效
  • labelInfo 仅作展示提示，不会自动绑定系统快捷键；需在 onChange 中自行实现逻辑。
• 版本兼容
  • EditableTitleBar.menuItems 需 API 11+；若使用 swipeAction 实现滑动菜单，请确保 SDK 版本支持相应能力。