HarmonyOS鸿蒙Next中ContextMenu点击非菜单区域,点击事件会穿透到下层组件,这应该是个Bug吗?
HarmonyOS鸿蒙Next中ContextMenu点击非菜单区域,点击事件会穿透到下层组件,这应该是个Bug吗? ContextMenu绑定一个list item后,长按弹出菜单,点击非菜单区域,菜单虽然关闭了,但是点击事件会穿透到下层组件,触发它们的点击事件,比如会触发List item的点击事件,非常不友好。查看文档,也没有发现可以设置遮罩的方法,大家有遇到这样的问题,知道怎么解决吗?
bindContextMenu弹出菜单默认没有蒙层,所以点击其他区域菜单消失的时候,如果被点击区域绑定了点击事件,就会触发其点击事件。
如果是长按弹出,则可以添加个预览内容,会带一个蒙层;
或者利用代码逻辑判断处理,
也可以使用popup弹窗模拟一个菜单,popup默认会带一个透明蒙层,可参考代码如下:
import { promptAction } from '@kit.ArkUI';
@Entry
@Component
struct Index3 {
private list: string[] = []
private scroller = new Scroller()
@State flag: boolean[] = new Array(10).fill(false)
aboutToAppear(): void {
for (let i = 0; i < 10; i++) {
this.list.push(`选项${i}`)
}
}
@Builder
menu() {
Column({ space: 10 }) {
Text('组件1')
Text('组件2')
}
.width(100)
}
build() {
Column() {
List({ scroller: this.scroller, initialIndex: this.list.length - 1, space: 10 }) {
ForEach(this.list, (item: string, index: number) => {
ListItem() {
Row() {
Text(item)
}
.padding(5)
.width('70%')
.backgroundColor(Color.White)
.onClick(() => {
promptAction.showToast({ message: item })
})
}
.width('100%')
.padding(10)
.backgroundColor(Color.Orange)
.bindContextMenu(this.menu(), ResponseType.LongPress, {
preview: () => {},
})
})
}
.layoutWeight(1)
}
.height('100%')
.width('100%')
}
}
更多关于HarmonyOS鸿蒙Next中ContextMenu点击非菜单区域,点击事件会穿透到下层组件,这应该是个Bug吗?的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html
我就是试过有问题才发的贴子哈,
在HarmonyOS鸿蒙Next中,ContextMenu点击非菜单区域时,点击事件穿透到下层组件的行为并非Bug,而是设计上的默认行为。ContextMenu的设计初衷是提供快捷操作,当用户点击非菜单区域时,系统会认为用户希望关闭菜单并继续与下层组件交互。如果你希望阻止事件穿透,可以通过在ContextMenu的onDismiss回调中处理相关逻辑,或者使用事件拦截机制来阻止事件传递。