HarmonyOS7 长按上下文菜单：用 bindContextMenu 做好快捷操作

前言

这组案例开始进入选择类和调节类组件，写业务页面时会经常遇到。这个案例围绕长按触发上下文菜单展开，重点不是把属性背下来，而是弄清楚状态、组件和用户操作之间怎么连起来。

这篇我会把重点放在交互入口上，尽量说清楚它在真实页面里有什么用。

交互链路先理清

如果把它放到真实项目里，常见位置可能是设置页、筛选页、编辑页，或者某个需要快速操作的工具面板。用户点一下、选一下、拖一下，页面就应该给出明确反馈。

| 文章侧重点 | 交互入口 |

数据和 UI 的对应关系

代码结构可以按三层读：外层负责页面背景和留白，中间卡片承载主要内容，内部组件处理具体交互。这样的层级不花哨，但维护起来比较舒服。

我比较推荐先把状态字段命名清楚。选中项、开关状态、滑块数值最好都能从名字看出用途，比随手写flag、value后面省心很多。

关键实现细节

先看一段连续代码，基本能判断这个案例的运行方式。它包含入口组件、状态字段以及一部分核心 UI。

@Entry@Componentstruct ContextActionMenu{@StateisShow:boolean=true@StatecontextMsg:string=''@BuilderContextMenuContent(){Menu(){MenuItem({content:'复制文本'}).onClick(()=>{this.contextMsg='已复制文本'})MenuItem({content:'粘贴'}).onClick(()=>{this.contextMsg='已粘贴'})MenuItem({content:'全选'}).onClick(()=>{this.contextMsg='已全选'})MenuItem({content:'翻译'}).onClick(()=>{this.contextMsg='已翻译'})MenuItem({content:'分享'}).onClick(()=>{this.contextMsg='已分享'})}}build(){

这段代码可以拆成几块看：

• @State保存当前页面状态，用户操作之后会触发 UI 更新。
• bindContextMenu是案例的关键入口，真正的行为通常由它和事件回调一起完成。
• 布局属性服务于业务表达，选中、禁用、拖动这些状态最好都能在视觉上看出来。

完整代码

下面是整理后的完整代码。组件名已经改成ContextActionMenu，共享颜色也内置到当前文件里，单独复制出来读会更方便。

constPAGE_BG_COLOR:string='#F5F6FA'constCARD_BG_COLOR:string='#FFFFFF'constTHEME_COLOR:string='#4D96FF'constSUBTEXT_COLOR:string='#8A8A8A'@Entry@Componentstruct ContextActionMenu{@StateisShow:boolean=true@StatecontextMsg:string=''@BuilderContextMenuContent(){Menu(){MenuItem({content:'复制文本'}).onClick(()=>{this.contextMsg='已复制文本'})MenuItem({content:'粘贴'}).onClick(()=>{this.contextMsg='已粘贴'})MenuItem({content:'全选'}).onClick(()=>{this.contextMsg='已全选'})MenuItem({content:'翻译'}).onClick(()=>{this.contextMsg='已翻译'})MenuItem({content:'分享'}).onClick(()=>{this.contextMsg='已分享'})}}build(){Column(){if(this.isShow){Column({space:14}){Text('右键/长按菜单').fontSize(14).fontColor(THEME_COLOR).fontWeight(600)Column(){Text('长按此区域').fontSize(18).fontColor('#999999')Text('弹出右键菜单').fontSize(14).fontColor('#CCCCCC')}.width('100%').height(120).backgroundColor('#F8F8F8').borderRadius(10).justifyContent(FlexAlign.Center).bindContextMenu(this.ContextMenuContent,ResponseType.LongPress)Text(this.contextMsg||'长按上方灰色区域触发右键菜单').fontSize(13).fontColor(this.contextMsg?'#333333':SUBTEXT_COLOR).width('100%').padding(8).backgroundColor('#FAFAFA').borderRadius(6).textAlign(TextAlign.Center)}.width('100%').padding(16).backgroundColor(CARD_BG_COLOR).borderRadius(12)}Text('长按上下文菜单：Menu 右键菜单：bindContextMenu 长按触发').fontSize(12).fontColor(SUBTEXT_COLOR).margin({top:12})}.width('100%').height('100%').backgroundColor(PAGE_BG_COLOR).padding(16)}}

可以继续扩展的方向

继续扩展的话，我会把静态选项抽成接口返回的数据，再补上空状态和异常状态。示例页面先把核心交互跑通就够了，到了业务页面，状态边界才是真正容易出问题的地方。