【HarmonyOS】View点击穿透,层叠View点击事件控制

【HarmonyOS】View点击穿透,层叠View点击事件控制

问题背景:

在HarmonyOS中,经常会有层叠的View的布局,当碰到需要穿透的布局需求。就需要能控制View对点击事件的处理。

方案一,使用touchable:

目前虽然函数已提示过时,会有斜线,但是改方法比较简单。

在view节点设置:

touchable(true) 可接受点击

touchable(false) 不处理点击,点击事件就会有穿透效果。

Demo示例:

dart 复制代码
@Entry
@Component
struct 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!");
      })
    }
  }
}

方案二,使用hitTestBehavior

在view节点设置hitTestBehavior

HitTestMode为枚举类型,有三个值,分别如下:
Default 0

默认触摸测试效果,自身和子节点都响应触摸测试,但会阻塞兄弟节点的触摸测试。

Block 1

自身响应触摸测试,阻塞子节点和兄弟节点的触摸测试。

Transparent 2

自身和子节点都响应触摸测试,不会阻塞兄弟节点的触摸测试。

None 3

自身不响应触摸测试,不会阻塞子节点和兄弟节点的触摸测试。

Demo示例:

dart 复制代码
@Entry
@Component
struct 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!");
      })
    }
  }
}
相关推荐
sam.li9 小时前
鸿蒙HAR对外发布安全流程
安全·华为·harmonyos
sam.li9 小时前
鸿蒙APP安全体系
安全·华为·harmonyos
ChinaDragon12 小时前
HarmonyOS:通过组件导航设置自定义区域
harmonyos
人工智能知识库12 小时前
华为HCIP-HarmonyOS Application Developer题库 H14-231 (26年最新带解析)
华为·harmonyos·hcip-harmonyos·h14-231
C雨后彩虹12 小时前
亲子游戏问题
java·数据结构·算法·华为·面试
以太浮标13 小时前
华为eNSP模拟器综合实验之- 端口镜像(Port Mirroring)配置解析
运维·服务器·网络·华为
搬砖的kk13 小时前
鸿蒙 PC 版 DevEco Studio 使用 OHPM 下载三方库教程
华为·harmonyos
以太浮标1 天前
华为eNSP模拟器综合实验之-DHCP服务中继配置案例
网络·华为·智能路由器·信息与通信
游戏技术分享1 天前
【鸿蒙游戏技术分享 第75期】AGC后台批量导入商品失败,提示“参数错误”
游戏·华为·harmonyos
No Silver Bullet1 天前
HarmonyOS NEXT开发进阶(十七):WebView 拉起 H5 页面
华为·harmonyos