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 15### 触摸事件 16 17[触摸事件](../reference/apis-arkui/arkui-ts/ts-universal-events-touch.md)（onTouch事件）是所有手势组成的基础，有Down，Move，Up，Cancel四种。手势均由触摸事件组成，例如，点击为Down+Up，滑动为Down+一系列Move+Up。触摸事件具有最特殊性： 18 191.监听了onTouch事件的组件。在手指落下被触摸时均会收到onTouch事件的回调，被触摸受到触摸热区和触摸控制影响。 20 212.onTouch事件的回调是闭环的。若一个组件收到了手指Id为0的Down事件，后续也会收到手指Id为0的Move事件和Up事件。 22 233.onTouch事件的回调是一致的。若一个组件收到了手指Id为0的Down事件，但未收到手指Id为1的Down事件，则后续只会收到手指Id为0的touch事件，不会收到手指Id为1的后续touch事件。 24 25对于一般的容器组件（例如：Column），父子组件之间onTouch事件能够同时触发，兄弟组件之间onTouch事件根据布局进行触发。 26 27```ts 28ComponentA() { 29 ComponentB().onTouch(() => {}) 30 ComponentC().onTouch(() => {}) 31}.onTouch(() => {}) 32``` 33组件B和组件C作为组件A的子组件，当触摸到组件B或者组件C时，组件A也会被触摸到。onTouch事件允许多个组件同时触发， 34因此，当触摸组件B时，会触发组件A和组件B的onTouch回调，不会触发组件C的onTouch回调。 35当触摸组件C时，会触发组件A和组件C的onTouch回调，不触发组件B的回调。 36 37特殊的容器组件，如Stack等组件，由于子组件之间存在着堆叠关系，子组件的布局也互相存在遮盖关系。 38所以，父子组件之间onTouch事件能够同时触发，兄弟组件之间onTouch事件会存在遮盖关系。 39 40```ts 41Stack A() { 42 ComponentB().onTouch(() => {}) 43 ComponentC().onTouch(() => {}) 44}.onTouch(() => {}) 45``` 46组件B和组件C作为Stack A的子组件，组件C覆盖在组件B上。当触摸到组件B或者组件C时，Stack A也会被触摸到。onTouch事件允许多个组件同时触发，因此，当触摸组件B和组件C的重叠区域时，会触发Stack A和组件C的onTouch回调，不会触发组件B的onTouch回调（组件B被组件C遮盖）。 47 48### 手势与事件 49 50除了触摸事件（onTouch事件）外的所有手势与事件，均是通过基础手势或者组合手势实现的。例如，拖拽事件是由长按手势和滑动手势组成的一个顺序手势。 51 52在未显式声明的情况下，同一时间，一根手指对应的手势组中只会有一个手势获得成功从而触发所设置的回调。 53 54因此，除非显式声明允许多个手势同时成功，同一时间只会有一个手势响应。 55 56响应优先级遵循以下条件： 57 581.当父子组件均绑定同一类手势时，子组件优先于父组件触发。 59 602.当一个组件绑定多个手势时，先达到手势触发条件的手势优先触发。 61 62```ts 63ComponentA() { 64 ComponentB().gesture(TapGesture({count: 1})) 65}.gesture(TapGesture({count: 1})) 66``` 67当父组件和子组件均绑定点击手势时，子组件的优先级高于父组件。 68因此，当在B组件上进行点击时，组件B所绑定的TapGesture的回调会被触发，而组件A所绑定的TapGesture的回调不会被触发。 69 70```ts 71ComponentA() 72.gesture( 73 GestureGroup( 74 GestureMode.Exclusive, 75 TapGesture({count: 1}), 76 PanGesture({distance: 5}) 77 ) 78) 79``` 80当组件A上绑定了由点击和滑动手势组成的互斥手势组时，先达到触发条件的手势触发对应的回调。 81若使用者做了一次点击操作，则响应点击对应的回调。若使用者进行了一次滑动操作并且滑动距离达到了阈值，则响应滑动对应的回调。 82 83## 自定义控制的多层级手势事件 84 85可以通过设置属性，控制默认的多层级手势事件竞争流程，更好地实现手势事件。 86 87目前，responseRegion属性和hitTestBehavior属性可以控制Touch事件的分发，从而可以影响到onTouch事件和手势的响应。而绑定手势方法属性可以控制手势的竞争从而影响手势的响应，但不能影响到onTouch事件。 88 89### responseRegion对手势和事件的控制 90 91responseRegion属性可以实现组件的响应区域范围的变化。响应区域范围可以超出或者小于组件的布局范围。 92 93```ts 94ComponentA() { 95 ComponentB() 96 .onTouch(() => {}) 97 .gesture(TapGesture({count: 1})) 98 .responseRegion({Rect1, Rect2, Rect3}) 99} 100.onTouch(() => {}) 101.gesture(TapGesture({count: 1})) 102.responseRegion({Rect4}) 103``` 104当组件A绑定了.responseRegion({Rect4})的属性后，所有落在Rect4区域范围的触摸事件和手势可被组件A对应的回调响应。 105 106当组件B绑定了.responseRegion({Rect1, Rect2, Rect3})的属性后，所有落在Rect1,Rect2和Rect3区域范围的触摸事件和手势可被组件B对应的回调响应。 107 108当绑定了responseRegion后，手势与事件的响应区域范围将以所绑定的区域范围为准，而不是以布局区域为准，可能出现布局相关区域不响应手势与事件的情况。 109 110此外，responseRegion属性支持由多个Rect组成的数组作为入参，以支持更多开发需求。 111 112### hitTestBehavior对手势和事件的控制 113 114hitTestBehavior属性可以实现在复杂的多层级场景下，一些组件能够响应手势和事件，而一些组件不能响应手势和事件。 115 116```ts 117ComponentA() { 118 ComponentB() 119 .onTouch(() => {}) 120 .gesture(TapGesture({count: 1})) 121 122 ComponentC() { 123 ComponentD() 124 .onTouch(() => {}) 125 .gesture(TapGesture({count: 1})) 126 } 127 .onTouch(() => {}) 128 .gesture(TapGesture({count: 1})) 129 .hitTestBehavior(HitTestMode.Block) 130} 131.onTouch(() => {}) 132.gesture(TapGesture({count: 1})) 133``` 134HitTestMode.Block自身会响应触摸测试，阻塞子节点和兄弟节点的触摸测试，从而导致子节点和兄弟节点的onTouch事件和手势均无法触发。 135 136当组件C未设置hitTestBehavior时，点击组件D区域，组件A、组件C和组件D的onTouch事件会触发，组件D的点击手势会触发。 137 138当组件C设置了hitTestBehavior为HitTestMode.Block时，点击组件D区域，组件A和组件C的onTouch事件会触发，组件D的onTouch事件未触发。同时，由于组件D的点击手势因为被阻塞而无法触发，组件C的点击手势会触发。 139 140```ts 141Stack A() { 142 ComponentB() 143 .onTouch(() => {}) 144 .gesture(TapGesture({count: 1})) 145 146 ComponentC() 147 .onTouch(() => {}) 148 .gesture(TapGesture({count: 1})) 149 .hitTestBehavior(HitTestMode.Transparent) 150} 151.onTouch(() => {}) 152.gesture(TapGesture({count: 1})) 153``` 154HitTestMode.Transparent自身响应触摸测试，不会阻塞兄弟节点的触摸测试。 155 156当组件C未设置hitTestBehavior时，点击组件B和组件C的重叠区域时，Stack A和组件C的onTouch事件会触发，组件C的点击事件会触发，组件B的onTouch事件和点击手势均不触发。 157 158而当组件C设置hitTestBehavior为HitTestMode.Transparent时，点击组件B和组件C的重叠区域，组件A和组件C不受到影响与之前一致，组件A和组件C的onTouch事件会触发，组件C的点击手势会触发。而组件B因为组件C设置了HitTestMode.Transparent，组件B也收到了Touch事件，从而组件B的onTouch事件触发。 159 160```ts 161ComponentA() { 162 ComponentB() 163 .onTouch(() => {}) 164 .gesture(TapGesture({count: 1})) 165} 166.onTouch(() => {}) 167.gesture(TapGesture({count: 1})) 168.hitTestBehavior(HitTestMode.None) 169``` 170HitTestMode.None自身不响应触摸测试，不会阻塞子节点和兄弟节点的触摸控制。 171 172当组件A未设置hitTestBehavior时，点击组件B区域时，组件A和组件B的onTouch事件均会触发，组件B的点击手势会触发。 173 174当组件A设置hitTestBehavior为HitTestMode.None时，点击组件B区域时，组件B的onTouch事件触发，而组件A的onTouch事件无法触发，组件B的点击手势触发。 175 176针对简单的场景，建议在单个组件上绑定hitTestBehavior。 177针对复杂场景，建议在多个组件上绑定不同的hitTestBehavior来控制Touch事件的分发。 178 179### 绑定手势方法对手势的控制 180设置绑定手势的方法可以实现在多层级场景下，当父组件与子组件绑定了相同的手势时，设置不同的绑定手势方法有不同的响应优先级。 181 182当父组件使用.gesture绑定手势，父子组件所绑定手势类型相同时，子组件优先于父组件响应。 183 184```ts 185ComponentA() { 186 ComponentB() 187 .gesture(TapGesture({count: 1})) 188} 189.gesture(TapGesture({count: 1})) 190``` 191当父子组件均正常绑定点击手势时，子组件优先于父组件响应。 192此时，单击组件B区域范围，组件B的点击手势会触发，组件A的点击手势不会触发。 193 194如果以带优先级的方式绑定手势，则可使得父组件所绑定手势的响应优先级高于子组件。 195 196```ts 197ComponentA() { 198 ComponentB() 199 .gesture(TapGesture({count: 1})) 200} 201.priorityGesture(TapGesture({count: 1})) 202``` 203当父组件以.priorityGesture的形式绑定手势时，父组件所绑定的手势优先级高于子组件。 204此时，单击组件B区域范围，组件A的点击手势会触发，组件B的点击手势不会触发。 205 206如果需要父子组件所绑定的手势不发生冲突，均可响应，则可以使用并行的方式在父组件绑定手势。 207 208```ts 209ComponentA() { 210 ComponentB() 211 .gesture(TapGesture({count: 1})) 212} 213.parallelGesture(TapGesture({count: 1})) 214``` 215当父组件以.parallelGesture的形式绑定手势时，父组件和子组件所绑定的手势均可触发。 216此时，单击组件B区域范围，组件A和组件B的点击手势均会触发。 217 218### OverlayManager的事件透传 219OverlayManager事件机制，默认优先被WrappedBuilder内组件先接收，不会向下传递。 220 221若希望OverlayManager下方的页面也能感应到事件，可采用hitTestBehavior(HitTestMode.Transparent)来传递事件，参考以下伪代码。 222 223```ts 224@Builder 225function builderOverlay(params: Params) { 226 Component().hitTestBehavior(HitTestMode.Transparent) 227} 228 229aboutToAppear(): void { 230 let componentContent = new ComponentContent( 231 this.context, wrapBuilder<[Params]>(builderOverlay), 232 new Params(uiContext, {x:0, y: 100}) 233 ); 234 this.overlayManager.addComponentContent(componentContent, 0); 235} 236```