鸿蒙开发之增大点击响应热区responseRegion

系统提供了增大响应热区的API：responseRegion。需要传递4个参数，

x方向坐标

y方向坐标

width响应的宽度（支持百分比和具体长度）

height响应的高度（支持百分比和具体长度）

具体使用如下：

import Prompt from '@system.prompt'
//热区
@Entry
@Component
struct OfficialRectanglePage {
  @State message: string = 'Hello World'
  @State textW: number = 0 //热区组件宽度
  @State textH: number = 0 //热区组件高度

  build() {
    Row() {
      Column() {

        Text(this.message)
          .fontSize(30)
          .fontWeight(FontWeight.Bold)
          .backgroundColor(Color.Orange)
          //监听组件的大小变化，来动态的设置响应区域大小
          .onAreaChange((oldValue,newValue) => {
            this.textW = new Number(newValue.width).valueOf()
            this.textH = new Number(newValue.height).valueOf()
          })
          .responseRegion({
            x:-50, //x方向从-50vp开始响应
            y:-80, //y方向从-80vp开始响应
            width:this.textW+100, //宽热区左右各增大50，也就是+100
            height:this.textH+160 //高热区上下各增大80，也就是+160
          })
          .onClick(() => {
            Prompt.showToast({message:'click text'})
          })
      }
      .width('100%')
    }
    .height('100%')
  }
}

当然，也可以通过设置百分比的方式设置热区的宽高，如扩大按钮热区一倍的高度

 Button("增大热区")
        .responseRegion({ x: 0, y: 0, width: '100%', height: '200%' })