前言
Menu是 ArkUI 中的弹出菜单组件，通过bindContextMenu绑定到组件上。在「猫猫大作战」中，Menu 用于猫咪长按操作菜单。
一、Menu 基础
@BuilderCatMenu(){Menu(){MenuItem({content:'🐱 查看详情',onClick:()=>this.showDetail()})MenuItem({content:'🔄 合并优先',onClick:()=>this.mergePriority()})MenuItem({content:'❌ 删除',onClick:()=>this.removeCat()})}}// 绑定Column(){Text('🍎 长按猫咪').fontSize(16)}.bindContextMenu(this.CatMenu(),true)// true = 长按触发二、MenuItem 配置
| 参数 | 类型 | 说明 |
|---|---|---|
| content | string | 菜单项文本 |
| onClick | () => void | 点击回调 |
| icon | ResourceStr | 可选图标 |
三、游戏中的应用
@BuilderCatContextMenu(cat:Cat){Menu(){MenuItem({content:`🐱${CatConfig[cat.level].name}(Lv.${cat.level})`,})MenuItem({content:'查看详情',onClick:()=>this.showCatDetail(cat),})MenuItem({content:'合并优先',onClick:()=>this.mergePriority(cat),})MenuItem({content:'取消',})}}// 绑定到猫卡CatCard({cat}).bindContextMenu(this.CatContextMenu(cat),true).anchorPosition({x:8,y:4})四、Menu vs Popup
| 特性 | Menu | Popup |
|---|---|---|
| 内容 | 菜单项列表 | 提示文本 |
| 交互 | 选择操作 | 阅读提示 |
| 触发 | 长按 | 点击控制状态 |
| 场景 | 操作列表 | 信息说明 |
五、最佳实践
- 长按触发：
bindContextMenu(builder, true) - 点击触发：
bindContextMenu(builder, false) - 数量控制：菜单项 3-5 个为宜
- 定位调整：配合
anchorPosition精确定位
总结
Menu 通过 bindContextMenu 弹出操作列表，适合猫咪长按菜单。核心要点：bindContextMenu(builder, isLongPress)绑定、MenuItem构建菜单项、anchorPosition精确定位。
如果这篇文章对你有帮助，欢迎点赞👍、收藏⭐、关注🔔，你的支持是我持续创作的动力！
相关资源：
- Menu API 参考
- bindContextMenu 文档
- 第 99 篇：bindSheet
- 第 101 篇：anchorPosition