前言

Menu 是 ArkUI 中的弹出菜单组件，通过 bindContextMenu 绑定到组件上。在「猫猫大作战」中，Menu 用于猫咪长按操作菜单。

一、Menu 基础

@Builder
CatMenu() {
  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 配置

三、游戏中的应用

@Builder
CatContextMenu(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

五、最佳实践

1. 长按触发：bindContextMenu(builder, true)
2. 点击触发：bindContextMenu(builder, false)
3. 数量控制：菜单项 3-5 个为宜
4. 定位调整：配合 anchorPosition 精确定位

总结

Menu 通过 bindContextMenu 弹出操作列表，适合猫咪长按菜单。核心要点：bindContextMenu(builder, isLongPress) 绑定、 MenuItem 构建菜单项、 anchorPosition 精确定位。

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

相关资源：

• Menu API 参考
• bindContextMenu 文档
• 第 99 篇：bindSheet
• 第 101 篇：anchorPosition