输入关键字搜索
开发者能力认证
鸿蒙高校创新赛
HarmonyOS 7
animation
HarmonyOS行业解决方案
layoutWeight
HarmonyOS模板&组件
bindPopup
bindsheet
CTRL+K
文档管理中心

HarmonyOS

输入关键字搜索
开发者能力认证
鸿蒙高校创新赛
HarmonyOS 7
animation
HarmonyOS行业解决方案
layoutWeight
HarmonyOS模板&组件
bindPopup
bindsheet
CTRL+K
FAQ
FAQ应用框架开发UI框架组件使用如何实现根据不同的列表项，弹出不同的上下文菜单

如何实现根据不同的列表项，弹出不同的上下文菜单

更新时间: 2026-06-26 07:47
本文导读

问题现象

给List组件的Item绑定上下文菜单，按条件判断是否显示上下文菜单，且需要根据列表项的不同，弹出不同的上下文菜单，该如何实现？

效果预览

背景知识

  • List：列表包含一系列相同宽度的列表项。适合连续、多行呈现同类数据，例如图片和文本。
  • bindContextMenu：给组件绑定菜单，触发方式为长按或者右键点击，弹出菜单项需要自定义。

解决方案

首先对List组件的Item进行判断，使偶数项有菜单弹出，奇数项则无菜单弹出。菜单弹出方式为长按弹出菜单且弹出菜单的内容也不同。

完整示例参考如下：

收起
自动换行
深色代码主题
复制
  1. @Entry
  2. @Component
  3. struct listDemo {
  4.   private arr: number[] = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
  5.   @State listData: number[] = [0, 0, 0];
  6. 

  7.   // @Builder装饰器：构建上下文菜单组件
  8.   @Builder
  9.   MenuBuilder(num: number, flag: boolean) {
  10.     // 根据flag参数决定是否显示菜单
  11.     if (flag) {
  12.       Flex({ direction: FlexDirection.Column, justifyContent: FlexAlign.Center, alignItems: ItemAlign.Center }) {
  13.         ForEach(this.listData, (index:number) => {
  14.           Column() {
  15.             Row() {
  16.               Image($r('app.media.startIcon')).width(20).height(20).margin({ right: 5 }) // 可根据具体需要引用资源
  17.               Text(`Menu${num}`).fontSize(20)
  18.             }
  19.             .width('100%')
  20.             .height(30)
  21.             .justifyContent(FlexAlign.Center)
  22.             .align(Alignment.Center)
  23. 

  24.             // 如果不是最后一个菜单项，显示分隔线
  25.             if (index !== this.listData.length - 1) {
  26.               Divider().height(10).width('80%').color('#ccc')
  27.             }
  28.           }.padding(5).height(40)
  29.         });
  30.       }.width(100)
  31.     }
  32.   };
  33. 

  34.   build() {
  35.     Column() {
  36.       List({ space: 20, initialIndex: 0 }) {
  37.         ForEach(this.arr, (item: number) => {
  38.           // 根据item奇偶性决定是否绑定上下文菜单
  39.           if (item % 2 === 0) {
  40.             ListItem() {
  41.               Text('' + item)
  42.                 .width('100%')
  43.                 .height(100)
  44.                 .fontSize(16)
  45.                 .textAlign(TextAlign.Center)
  46.                 .borderRadius(10)
  47.                 .backgroundColor(0xFFFFFF) // 绑定上下文菜单，使用MenuBuilder生成菜单，长按触发
  48.                 .bindContextMenu(this.MenuBuilder(item, true), ResponseType.LongPress)
  49.             };
  50.           } else {
  51.             ListItem() {
  52.               Text('' + item)
  53.                 .width('100%')
  54.                 .height(100)
  55.                 .fontSize(16)
  56.                 .textAlign(TextAlign.Center)
  57.                 .borderRadius(10)
  58.                 .backgroundColor(0xFFFFFF)
  59.                 .bindContextMenu(this.MenuBuilder(item, false), ResponseType.LongPress)
  60.             };
  61.           }
  62.         }, (item: string) => item)
  63.       }.width('90%')
  64.       .scrollBar(BarState.Off)
  65.     }.width('100%').height('100%').backgroundColor(0xDCDCDC).padding({ top: 5 })
  66.   }
  67. }
如何解决软键盘弹出后顶部控件无法固定的问题
如何根据单行Item数量动态调整布局
相关推荐
文档实现Text长按和点击弹出不同的菜单
文档菜单
文档如何实现点击下拉菜单跳转指定页签
文档如何实现点击Menu组件菜单选项弹出自定义弹框
文档实现bindContextMenu弹出式菜单点击后保持开启
文档使用Web组件菜单处理网页内容
文档如何实现同一行的ListItem文本高度不一致按最大高度展示
文档通过isShown状态控制bindContextMenu实现菜单随点击位置弹出
文档List组件分组滚动效果实现
文档如何解决点击非菜单控制区域事件穿透到下层组件的问题
简体中文
华为开发者联盟 版权所有 ©2026
问题反馈
使用条款
华为开发者联盟用户协议
关于华为开发者联盟与隐私的声明
Cookies
开源软件声明
在 FAQ 中进行搜索
请输入您想要搜索的关键词