觸摸熱區(qū)設置

屬性

Rectangle對象說明

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

示例

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

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

      // 為一個組件添加多個熱區(qū)
      Text("[{x:'100%',y:0,width:'50%',height:'100%'}," +
      "\n{ x: 0, y: 0, width: '50%', height: '100%' }]")
      Button("button2")
        .responseRegion([
          { x: '100%', y: 0, width: '50%', height: '100%' }, // 第一個熱區(qū)寬度為按鈕的一半，且右移一個按鈕寬度，點擊button2右側(cè)左邊，點擊事件生效
          { x: 0, y: 0, width: '50%', height: '100%' } // 第二個熱區(qū)寬度為按鈕的一半，點擊button2左半邊，點擊事件生效
        ])
        .onClick(() => {
          this.text = 'button2 clicked'
        })
      // 熱區(qū)大小為整個按鈕，且下移一個按鈕高度，點擊button3下方按鈕大小區(qū)域，點擊事件生效
      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 })
  }
}