codecamp

触摸测试控制

设置组件的触摸测试类型。ArkUI开发框架在处理触屏事件时,会在触屏事件触发前,进行按压点和组件区域的触摸测试来收集需要响应触屏事件的组件,然后基于触摸测试结果分发相应的触屏事件。hitTestBehavior属性可以设置不同的触摸测试响应模式,影响组件的触摸测试收集结果,最终影响后续的触屏事件分发,具体影响参考HitTestMode枚举说明。

说明
  • 从API Version 9开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。
  • 当Stack组件中有多个节点触摸区域重叠时,如两个节点,默认只会对显示在最上层的节点做触摸测试,若需要显示在下层的节点触发触摸测试,请给显示在上层的节点设置hitTestBehavior为HitTestMode.Transparent。

属性

名称参数类型描述
hitTestBehaviorHitTestMode

设置当前组件的触摸测试类型。

默认值: HitTestMode.Default

HitTestMode枚举说明

名称描述
Default默认触摸测试效果,自身和子节点都响应触摸测试,但会阻塞兄弟节点的触摸测试。
Block自身响应触摸测试,阻塞子节点和兄弟节点的触摸测试。
Transparent自身和子节点都响应触摸测试,不会阻塞兄弟节点的触摸测试。
None自身不响应触摸测试,不会阻塞子节点和兄弟节点的触摸测试。

示例

Text组件设置hitTestBehavior为HitTestMode.Transparent,不会阻塞内层Stack的触摸测试,因此Text和内层Stack的onTouch事件都会触发。

内层Stack设置hitTestBehavior为HitTestMode.Block,会阻塞子节点和外层Button进行触摸测试,因此内层Button和外层Button组件不会响应onTouch事件。

  1. // xxx.ets
  2. @Entry
  3. @Component
  4. struct HitTestBehaviorExample {
  5. build() {
  6. // outer stack
  7. Stack() {
  8. Button('outer button')
  9. .onTouch((event) => {
  10. console.info('outer button touched type: ' + event.type)
  11. })
  12. // inner stack
  13. Stack() {
  14. Button('inner button')
  15. .onTouch((event) => {
  16. console.info('inner button touched type: ' + event.type)
  17. })
  18. }
  19. .width("100%").height("100%")
  20. .hitTestBehavior(HitTestMode.Block)
  21. .onTouch((event) => {
  22. console.info('stack touched type: ' + event.type)
  23. })
  24. Text('Transparent')
  25. .hitTestBehavior(HitTestMode.Transparent)
  26. .width("100%").height("100%")
  27. .onTouch((event) => {
  28. console.info('text touched type: ' + event.type)
  29. })
  30. }.width(300).height(300)
  31. }
  32. }
不同状态下的样式
分布式迁移标识
温馨提示
下载编程狮App,免费阅读超1000+编程语言教程
取消
确定
目录

媒体组件

像素

枚举

类型

接口

关闭

MIP.setData({ 'pageTheme' : getCookie('pageTheme') || {'day':true, 'night':false}, 'pageFontSize' : getCookie('pageFontSize') || 20 }); MIP.watch('pageTheme', function(newValue){ setCookie('pageTheme', JSON.stringify(newValue)) }); MIP.watch('pageFontSize', function(newValue){ setCookie('pageFontSize', newValue) }); function setCookie(name, value){ var days = 1; var exp = new Date(); exp.setTime(exp.getTime() + days*24*60*60*1000); document.cookie = name + '=' + value + ';expires=' + exp.toUTCString(); } function getCookie(name){ var reg = new RegExp('(^| )' + name + '=([^;]*)(;|$)'); return document.cookie.match(reg) ? JSON.parse(document.cookie.match(reg)[2]) : null; }