1# 触摸热区设置 2 3适用于支持通用点击事件、通用触摸事件、通用手势处理的组件。 4 5 6> **说明：** 7> 8> 从API Version 8开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 9 10## responseRegion 11 12responseRegion(value: Array<Rectangle> | Rectangle) 13 14设置一个或多个触摸热区。 15 16**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。 17 18**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 19 20**系统能力：** SystemCapability.ArkUI.ArkUI.Full 21 22**参数：** 23 24| 参数名 | 类型 | 必填 | 说明 | 25| ------ | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ | 26| value | Array<[Rectangle](#rectangle对象说明)> \| [Rectangle](#rectangle对象说明) | 是 | 设置一个或多个触摸热区，包括位置和大小。<br/>默认触摸热区为整个组件，默认值：<br/>{<br/>x：0,<br/>y：0,<br/>width：'100%',<br/>height：'100%'<br/>}<br/>**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。 | 27 28 29## Rectangle对象说明 30 31**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。 32 33**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 34 35| 名称 | 类型 | 必填 | 描述 | 36| ------ | ----------------------------- | -----| -------------------------------- | 37| x | [Length](ts-types.md#length) | 否 | 触摸点相对于组件左上角的x轴坐标。<br/>默认值：0vp | 38| y | [Length](ts-types.md#length) | 否 | 触摸点相对于组件左上角的y轴坐标。<br/>默认值：0vp | 39| width | [Length](ts-types.md#length) | 否 | 触摸热区的宽度。<br/>默认值：'100%' | 40| height | [Length](ts-types.md#length) | 否 | 触摸热区的高度。<br/>默认值：'100%' | 41 42 > **说明：** 43 > 44 > x和y可以设置正负值百分比。当x设置为'100%'时表示热区往右偏移组件本身宽度大小，当x设置为'-100%'时表示热区往左偏移组件本身宽度大小。当y设置为'100%'时表示热区往下偏移组件本身高度大小，当y设置为'-100%'时表示热区往上偏移组件本身高度大小。 45 > 46 > width和height只能设置正值百分比。width：'100%'表示热区宽度设置为该组件本身的宽度。比如组件本身宽度是100vp，那么'100%'表示热区宽度也为100vp。height：'100%'表示热区高度设置为该组件本身的高度。 47 > 48 > 百分比相对于组件自身宽高进行计算。 49 50 51## 示例 52 53```ts 54// xxx.ets 55@Entry 56@Component 57struct TouchTargetExample { 58 @State text: string = "" 59 60 build() { 61 Column({ space: 20 }) { 62 Text("{x:0,y:0,width:'50%',height:'100%'}") 63 // 热区宽度为按钮的一半，点击右侧无响应 64 Button("button1") 65 .responseRegion({ x: 0, y: 0, width: '50%', height: '100%' }) 66 .onClick(() => { 67 this.text = 'button1 clicked' 68 }) 69 70 // 为一个组件添加多个热区 71 Text("[{x:'100%',y:0,width:'50%',height:'100%'}," + 72 "\n{ x: 0, y: 0, width: '50%', height: '100%' }]") 73 Button("button2") 74 .responseRegion([ 75 { x: '100%', y: 0, width: '50%', height: '100%' }, // 第一个热区宽度为按钮的一半，点击按钮右侧宽度一半区域，点击事件生效 76 { x: 0, y: 0, width: '50%', height: '100%' } // 第二个热区宽度为按钮的一半，点击button2左半边，点击事件生效 77 ]) 78 .onClick(() => { 79 this.text = 'button2 clicked' 80 }) 81 // 热区大小为整个按钮，且下移一个按钮高度，点击button3下方按钮大小区域，点击事件生效 82 Text("{x:0,y:'100%',width:'100%',height:'100%'}") 83 Button("button3") 84 .responseRegion({ x: 0, y: '100%', width: '100%', height: '100%' }) 85 .onClick(() => { 86 this.text = 'button3 clicked' 87 }) 88 89 Text(this.text).margin({ top: 50 }) 90 }.width('100%').margin({ top: 10 }) 91 } 92} 93``` 94 95 96
