【HarmonyOS】View点击穿透,层叠View点击事件控制
问题背景:
在HarmonyOS中,经常会有层叠的View的布局,当碰到需要穿透的布局需求。就需要能控制View对点击事件的处理。
方案一,使用touchable:
目前虽然函数已提示过时,会有斜线,但是改方法比较简单。
在view节点设置:
touchable(true) 可接受点击
touchable(false) 不处理点击,点击事件就会有穿透效果。
Demo示例:
Index {
build() {
Stack(){
Column(){
// B布局.
}
.width("100%")
.height("100%")
.onClick(()=>{
console.log("debugTest", "click B!");
})
Row(){
// A布局。当父布局是stack,包裹的布局中,最下面的view会在最上层。此时A会遮挡B的点击事件。
}
.width("100%")
.height("100%")
.touchable(false)
.onClick(()=>{
console.log("debugTest", "click A!");
})
}
}
}
struct
方案二,使用hitTestBehavior
在view节点设置hitTestBehavior
HitTestMode为枚举类型,有三个值,分别如下:
Default 0
默认触摸测试效果,自身和子节点都响应触摸测试,但会阻塞兄弟节点的触摸测试。
Block 1
自身响应触摸测试,阻塞子节点和兄弟节点的触摸测试。
Transparent 2
自身和子节点都响应触摸测试,不会阻塞兄弟节点的触摸测试。
None 3
自身不响应触摸测试,不会阻塞子节点和兄弟节点的触摸测试。
Demo示例:
Index {
build() {
Stack(){
Column(){
// B布局.
}
.width("100%")
.height("100%")
.onClick(()=>{
console.log("debugTest", "click B!");
})
Row(){
// A布局。当父布局是stack,包裹的布局中,最下面的view会在最上层。此时A会遮挡B的点击事件。
}
.width("100%")
.height("100%")
.hitTestBehavior(HitTestMode.Transparent)
.onClick(()=>{
console.log("debugTest", "click A!");
})
}
}
}
struct