前言
弹出菜单（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
