【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!");
      })
    }
  }
}
相关推荐
灰灰勇闯IT14 小时前
鸿蒙 ArkUI 声明式 UI 核心:状态管理(@State/@Prop/@Link)实战解析
人工智能·计算机视觉·harmonyos
方白羽16 小时前
Android和HarmonyOS 设置透明度
android·app·harmonyos
特立独行的猫a18 小时前
HarmonyOS鸿蒙PC开源QT软件移植:基于 Qt Widgets 的网络调试助手工具
qt·开源·harmonyos·鸿蒙pc
不爱吃糖的程序媛18 小时前
仓颉Nightly Builds版本正式解锁鸿蒙PC开发
华为·harmonyos
趁月色小酌***18 小时前
星盾护航 + AI 协同:鸿蒙 6.0 金融支付安全场景从 0 到 1 实战闯关
人工智能·金融·harmonyos
搬砖的kk18 小时前
鸿蒙 PC 三方库与命令行适配指南
华为·harmonyos
前端世界18 小时前
HarmonyOS 分布式硬件实战指南:从原理到可运行 Demo
分布式·华为·harmonyos
Meaauf19 小时前
华为 | 二层隧道协议L2TP实验
网络·华为
灰灰勇闯IT19 小时前
鸿蒙智能体框架(HMAF)开发指南:如何快速接入 AI 交互能力
人工智能·交互·harmonyos
俩毛豆19 小时前
《精通HarmonyOS NEXT :鸿蒙App开发入门与项目化实战》,上架 华为阅读!!!
华为