前言

弹出菜单（Menu/ContextMenu）是移动应用中的快捷操作入口——长按某个元素后弹出操作列表。HarmonyOS 通过 bindContextMenu 和 Menu 组件实现弹出菜单。

本文以「猫猫大作战」的猫咪长按菜单为锚点，讲解弹出菜单的实现。

提示：本系列不讲 ArkTS 基础语法与环墋搭建，假设你已跟完第 1–99 篇。本篇是阶段三第 100 篇。

一、Menu 基本用法

1.1 bindContextMenu

Column() {
  Text('🐱 长按我')
}
.bindContextMenu(this.CatMenu(), true)  // true = 长按触发

1.2 菜单构建

@Builder
CatMenu() {
  Menu() {
    MenuItem({ content: '查看详情', onClick: () => {} })
    MenuItem({ content: '合并', onClick: () => {} })
    MenuItem({ content: '删除', onClick: () => {} })
  }
}

二、游戏中的应用

CatCard({ cat: item })
  .bindContextMenu(this.CatContextMenu(item), true)

@Builder
CatContextMenu(cat: Cat) {
  Menu() {
    MenuItem({ content: `🐱 ${CatConfig[cat.level].name}` })
    MenuItem({ content: '查看详情', onClick: () => this.showDetail(cat) })
    MenuItem({ content: '合并优先', onClick: () => this.mergePriority(cat) })
  }
}

三、总结

Menu 通过 bindContextMenu 绑定到组件，长按触发弹出操作列表。

核心要点：

• .bindContextMenu(builder, isLongPress) 绑定菜单
• Menu + MenuItem 构建菜单项
• 适合长按列表项弹出操作的场景

下一篇预告：第 101 篇将深入 anchorPosition——菜单锚点定位。

如果这篇文章对你有帮助，欢迎点赞👍、收藏⭐、关注🔔，你的支持是我持续创作的动力！

相关资源：

• Menu API 参考
• bindContextMenu
• 开源鸿蒙跨平台社区
• 第 99 篇：bindSheet
• 第 101 篇：anchorPosition