1# 触摸热区设置 2<!--Kit: ArkUI--> 3<!--Subsystem: ArkUI--> 4<!--Owner: @jiangtao92--> 5<!--Designer: @piggyguy--> 6<!--Tester: @songyanhong--> 7<!--Adviser: @HelloCrease--> 8 9适用于支持通用点击事件、通用触摸事件和通用手势处理的组件。 10 11 12> **说明：** 13> 14> 从API version 8开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 15 16## responseRegion 17 18responseRegion(value: Array<Rectangle> | Rectangle): T 19 20设置一个或多个触摸热区。 21 22**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。 23 24**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 25 26**系统能力：** SystemCapability.ArkUI.ArkUI.Full 27 28**参数：** 29 30| 参数名 | 类型 | 必填 | 说明 | 31| ------ | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ | 32| value | Array<[Rectangle](#rectangle对象说明)> \| [Rectangle](#rectangle对象说明) | 是 | 设置一个或多个触摸热区，包括位置和大小。<br/>默认触摸热区为整个组件，默认值：<br/>{<br/>x：0,<br/>y：0,<br/>width：'100%',<br/>height：'100%'<br/>}<br/> | 33 34**返回值：** 35 36| 类型 | 说明 | 37| -------- | -------- | 38| T | 返回当前组件。 | 39 40## mouseResponseRegion<sup>10+</sup> 41 42mouseResponseRegion(value: Array<Rectangle> | Rectangle): T 43 44设置一个或多个鼠标触摸热区。 45 46**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 47 48**系统能力：** SystemCapability.ArkUI.ArkUI.Full 49 50**参数：** 51 52| 参数名 | 类型 | 必填 | 说明 | 53| ------ | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ | 54| value | Array<[Rectangle](#rectangle对象说明)> \| [Rectangle](#rectangle对象说明) | 是 | 设置一个或多个鼠标触摸热区，包括位置和大小。<br/>默认触摸热区为整个组件，默认值：<br/>{<br/>x：0,<br/>y：0,<br/>width：'100%',<br/>height：'100%'<br/>} | 55 56**返回值：** 57 58| 类型 | 说明 | 59| -------- | -------- | 60| T | 返回当前组件。 | 61 62## Rectangle对象说明 63 64**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。 65 66**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 67 68**系统能力：** SystemCapability.ArkUI.ArkUI.Full 69 70| 名称 | 类型 | 只读 | 可选 | 说明 | 71| ------ | ----------------------------- | -----| -----|-------------------------------- | 72| x | [Length](ts-types.md#length) | 否 | 是 |触摸点相对于组件左上角的x轴坐标。<br/>默认值：0vp | 73| y | [Length](ts-types.md#length) | 否 | 是 |触摸点相对于组件左上角的y轴坐标。<br/>默认值：0vp | 74| width | [Length](ts-types.md#length) | 否 | 是 |触摸热区的宽度。<br/>默认值：'100%' | 75| height | [Length](ts-types.md#length) | 否 | 是 |触摸热区的高度。<br/>默认值：'100%' | 76 77 > **说明：** 78 > 79 > x和y可以设置正负值百分比。当x设置为'100%'时表示热区往右偏移组件本身宽度大小，当x设置为'-100%'时表示热区往左偏移组件本身宽度大小。当y设置为'100%'时表示热区往下偏移组件本身高度大小，当y设置为'-100%'时表示热区往上偏移组件本身高度大小。 80 > 81 > width和height只能设置正值百分比。width：'100%'表示热区宽度设置为该组件本身的宽度。比如组件本身宽度是100vp，那么'100%'表示热区宽度也为100vp。height：'100%'表示热区高度设置为该组件本身的高度。 82 > 83 > 百分比相对于组件自身宽高进行计算。 84 > 85 > 当父组件设置[clip](ts-universal-attributes-sharp-clipping.md#clip12)(true)时，子组件的响应会受到父组件触摸热区的影响，不在父组件触摸热区内的子组件无法响应手势和事件。 86 > 87 > width和height不支持calc()的动态计算。 88 89## 示例 90 91该示例通过responseRegion设置按钮的触摸热区以响应点击事件。 92 93```ts 94// xxx.ets 95@Entry 96@Component 97struct TouchTargetExample { 98 @State text: string = ""; 99 100 build() { 101 Column({ space: 20 }) { 102 Text("{x:0,y:0,width:'50%',height:'100%'}") 103 // 热区宽度为按钮的一半，点击右侧无响应 104 Button("button1") 105 .responseRegion({ x: 0, y: 0, width: '50%', height: '100%' }) 106 .onClick(() => { 107 this.text = 'button1 clicked' 108 }) 109 110 // 为一个组件添加多个热区 111 Text("[{x:'100%',y:0,width:'50%',height:'100%'}," + 112 "\n{ x: 0, y: 0, width: '50%', height: '100%' }]") 113 Button("button2") 114 .responseRegion([ 115 { x: '100%', y: 0, width: '50%', height: '100%' }, // 第一个热区宽度为按钮的一半，点击按钮右侧宽度一半区域，点击事件生效 116 { x: 0, y: 0, width: '50%', height: '100%' } // 第二个热区宽度为按钮的一半，点击button2左半边，点击事件生效 117 ]) 118 .onClick(() => { 119 this.text = 'button2 clicked' 120 }) 121 // 热区大小为整个按钮，且下移一个按钮高度，点击button3下方按钮大小区域，点击事件生效 122 Text("{x:0,y:'100%',width:'100%',height:'100%'}") 123 Button("button3") 124 .responseRegion({ x: 0, y: '100%', width: '100%', height: '100%' }) 125 .onClick(() => { 126 this.text = 'button3 clicked' 127 }) 128 129 Text(this.text).margin({ top: 50 }) 130 }.width('100%').margin({ top: 10 }) 131 } 132} 133``` 134 135 136
