HarmonyOS应用开发实战：猫猫大作战-Menu 弹出菜单

前言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 配置参数类型说明contentstring菜单项文本onClick() void点击回调iconResourceStr可选图标三、游戏中的应用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特性MenuPopup内容菜单项列表提示文本交互选择操作阅读提示触发长按点击控制状态场景操作列表信息说明五、最佳实践长按触发bindContextMenu(builder, true)点击触发bindContextMenu(builder, false)数量控制菜单项 3-5 个为宜定位调整配合anchorPosition精确定位总结Menu 通过 bindContextMenu 弹出操作列表适合猫咪长按菜单。核心要点bindContextMenu(builder, isLongPress)绑定、MenuItem构建菜单项、anchorPosition精确定位。如果这篇文章对你有帮助欢迎点赞、收藏⭐、关注你的支持是我持续创作的动力相关资源Menu API 参考bindContextMenu 文档第 99 篇bindSheet第 101 篇anchorPosition