觸摸測(cè)試控制

2024-01-22 16:25 更新

設(shè)置組件的觸摸測(cè)試類型。ArkUI開發(fā)框架在處理觸屏事件時(shí),會(huì)在觸屏事件觸發(fā)前,進(jìn)行按壓點(diǎn)和組件區(qū)域的觸摸測(cè)試來收集需要響應(yīng)觸屏事件的組件,然后基于觸摸測(cè)試結(jié)果分發(fā)相應(yīng)的觸屏事件。hitTestBehavior屬性可以設(shè)置不同的觸摸測(cè)試響應(yīng)模式,影響組件的觸摸測(cè)試收集結(jié)果,最終影響后續(xù)的觸屏事件分發(fā),具體影響參考HitTestMode枚舉說明。

說明
  • 從API Version 9開始支持。后續(xù)版本如有新增內(nèi)容,則采用上角標(biāo)單獨(dú)標(biāo)記該內(nèi)容的起始版本。
  • 當(dāng)Stack組件中有多個(gè)節(jié)點(diǎn)觸摸區(qū)域重疊時(shí),如兩個(gè)節(jié)點(diǎn),默認(rèn)只會(huì)對(duì)顯示在最上層的節(jié)點(diǎn)做觸摸測(cè)試,若需要顯示在下層的節(jié)點(diǎn)觸發(fā)觸摸測(cè)試,請(qǐng)給顯示在上層的節(jié)點(diǎn)設(shè)置hitTestBehavior為HitTestMode.Transparent。

屬性

名稱參數(shù)類型描述
hitTestBehaviorHitTestMode

設(shè)置當(dāng)前組件的觸摸測(cè)試類型。

默認(rèn)值: HitTestMode.Default

HitTestMode枚舉說明

名稱描述
Default默認(rèn)觸摸測(cè)試效果,自身和子節(jié)點(diǎn)都響應(yīng)觸摸測(cè)試,但會(huì)阻塞兄弟節(jié)點(diǎn)的觸摸測(cè)試。
Block自身響應(yīng)觸摸測(cè)試,阻塞子節(jié)點(diǎn)和兄弟節(jié)點(diǎn)的觸摸測(cè)試。
Transparent自身和子節(jié)點(diǎn)都響應(yīng)觸摸測(cè)試,不會(huì)阻塞兄弟節(jié)點(diǎn)的觸摸測(cè)試。
None自身不響應(yīng)觸摸測(cè)試,不會(huì)阻塞子節(jié)點(diǎn)和兄弟節(jié)點(diǎn)的觸摸測(cè)試。

示例

Text組件設(shè)置hitTestBehavior為HitTestMode.Transparent,不會(huì)阻塞內(nèi)層Stack的觸摸測(cè)試,因此Text和內(nèi)層Stack的onTouch事件都會(huì)觸發(fā)。

內(nèi)層Stack設(shè)置hitTestBehavior為HitTestMode.Block,會(huì)阻塞子節(jié)點(diǎn)和外層Button進(jìn)行觸摸測(cè)試,因此內(nèi)層Button和外層Button組件不會(huì)響應(yīng)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. }
以上內(nèi)容是否對(duì)您有幫助:
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號(hào)
微信公眾號(hào)

編程獅公眾號(hào)