觸摸熱區(qū)設(shè)置

適用于支持通用點(diǎn)擊事件、通用觸摸事件、通用手勢處理的組件。

說明：
開發(fā)前請熟悉鴻蒙開發(fā)指導(dǎo)文檔 ：[gitee.com/li-shizhen-skin/harmony-os/blob/master/README.md]
從API Version 8開始支持。后續(xù)版本如有新增內(nèi)容，則采用上角標(biāo)單獨(dú)標(biāo)記該內(nèi)容的起始版本。

屬性

Rectangle對象說明

從API version 9開始，該接口支持在ArkTS卡片中使用。

說明：

x和y可以設(shè)置正負(fù)值百分比。當(dāng)x設(shè)置為'100%'時表示熱區(qū)往右偏移組件本身寬度大小，當(dāng)x設(shè)置為'-100%'時表示熱區(qū)往左偏移組件本身寬度大小。當(dāng)y設(shè)置為'100%'時表示熱區(qū)往下偏移組件本身高度大小，當(dāng)y設(shè)置為'-100%'時表示熱區(qū)往上偏移組件本身高度大小。

width和height只能設(shè)置正值百分比。width：'100%'表示熱區(qū)寬度設(shè)置為該組件本身的寬度。比如組件本身寬度是100vp，那么'100%'表示熱區(qū)寬度也為100vp。height：'100%'表示熱區(qū)高度設(shè)置為該組件本身的高度。

百分比相對于組件自身寬高進(jìn)行計算。

示例

// xxx.ets
@Entry
@Component
struct TouchTargetExample {
  @State text: string = ""

  build() {
    Column({ space: 20 }) {
      Text("{x:0,y:0,width:'50%',height:'100%'}")
      // 熱區(qū)寬度為按鈕的一半，點(diǎn)擊右側(cè)無響應(yīng)
      Button("button1")
        .responseRegion({ x: 0, y: 0, width: '50%', height: '100%' })
        .onClick(() = > {
          this.text = 'button1 clicked'
        })

      // 熱區(qū)寬度為按鈕的一半，且右移一個按鈕寬度，點(diǎn)擊button2右側(cè)左邊，點(diǎn)擊事件生效
      Text("{x:'100%',y:0,width:'50%',height:'100%'}")
      Button("button2")
        .responseRegion({ x: '100%', y: 0, width: '50%', height: '100%' })
        .onClick(() = > {
          this.text = 'button2 clicked'
        })
      // 熱區(qū)大小為整個按鈕，且下移一個按鈕高度，點(diǎn)擊button3下方按鈕大小區(qū)域，點(diǎn)擊事件生效
      Text("{x:0,y:'100%',width:'100%',height:'100%'}")
      Button("button3")
        .responseRegion({ x: 0, y: '100%', width: '100%', height: '100%' })
        .onClick(() = > {
          this.text = 'button3 clicked'
        })

      Text(this.text).margin({ top: 50 })
    }.width('100%').margin({ top: 10 })
  }
}

審核編輯 黃宇