鸿蒙手势交互(四：多层手势)

四、多层手势

指父子组件嵌套时，父子组件均绑定了手势或事件。有两种，一种默认多层级手势事件，一种自定义多层级手势事件。

• 默认多层级手势事件：必要分清两个概念，触摸事件，手势与事件
  

• 触摸事件：
  触摸事件（onTouch事件）是全部手势组成的底子，有Down，Move，Up，Cancel四种。手势均由触摸事件组成，比方，点击为Down+Up，滑动为Down+一系列Move+Up
  

2. //组件B和组件C作为组件A的子组件，当触摸到组件B或者组件C时，组件A也会被触摸到。
3. ComponentA() {
4.     ComponentB().onTouch(() => {})
5.     ComponentC().onTouch(() => {})
6. }.onTouch(() => {})
9. //组件B和组件C作为Stack A的子组件，组件C覆盖在组件B上。当触摸到组件B或者组件C时，Stack A也会被触摸到。（组件B被组件C遮盖）
10. Stack A() {
11.     ComponentB().onTouch(() => {})
12.     ComponentC().onTouch(() => {})
13. }.onTouch(() => {})

复制代码

• 手势与事件：
  除了触摸事件（onTouch事件）外的全部手势与事件，均是通过底子手势或者组合手势实现的。比方，拖拽事件是由长按手势和滑动手势组成的一个顺序手势。
  

• 自定义控制的多层级手势事件
  通过设置属性，控制默认的多层级手势事件竞争流程，更好的实现手势事件。
  responseRegion属性和hitTestBehavior属性可以控制Touch事件的分发，从而可以影响到onTouch事件和手势的响应。而绑定手势方法属性可以控制手势的竞争从而影响手势的响应，但不能影响到onTouch事件。
  

• responseRegion对手势和事件的控制
  

3. // 当绑定了responseRegion后，手势与事件的响应区域范围将以所绑定的区域范围为准，而不是以布局区域为准，可能出现布局相关区域不响应手势与事件的情况
5. ComponentA() {
6.         // 当组件B绑定了.responseRegion({Rect1, Rect2, Rect3})的属性后，
7.         // 所有落在Rect1,Rect2和Rect3区域范围的触摸事件和手势可被组件B对应的回调响应。
8.     ComponentB()
9.     .onTouch(() => {})
10.     .gesture(TapGesture({count: 1}))
11.     .responseRegion({Rect1, Rect2, Rect3})
12. }
13. .onTouch(() => {})
14. // 当组件A绑定了.responseRegion({Rect4})的属性后，
15. // 所有落在Rect4区域范围的触摸事件和手势可被组件A对应的回调响应。
16. .gesture(TapGesture({count: 1}))
17. .responseRegion({Rect4})

复制代码

• hitTestBehavior对手势和事件的控制
  

1. // hitTestBehavior属性可以实现在复杂的多层级场景下，一些组件能够响应手势和事件，而一些组件不能响应手势和事件
3. ComponentA() {
4.     ComponentB()
5.     .onTouch(() => {})
6.     .gesture(TapGesture({count: 1}))
8.     ComponentC() {
9.         ComponentD()
10.         .onTouch(() => {})
11.         .gesture(TapGesture({count: 1}))
12.     }
13.     .onTouch(() => {})
14.     .gesture(TapGesture({count: 1}))
15.     .hitTestBehavior(HitTestMode.Block)
16. }
17. .onTouch(() => {})
18. .gesture(TapGesture({count: 1}))
20. // HitTestMode.Block自身会响应触摸测试，阻塞子节点和兄弟节点的触摸测试，从而导致子节点和兄弟节点的onTouch事件和手势均无法触发。
22. // 当组件C未设置hitTestBehavior时，点击组件D区域，组件A、组件C和组件D的onTouch事件会触发，组件D的点击手势会触发。
24. // 当组件C设置了hitTestBehavior为HitTestMode.Block时，点击组件D区域，组件A和组件C的onTouch事件会触发，组件D的onTouch事件未触发。同时，由于组件D的点击手势因为被阻塞而无法触发，组件C的点击手势会触发。

复制代码

2. Stack A() {
3.     ComponentB()
4.     .onTouch(() => {})
5.     .gesture(TapGesture({count: 1}))
7.     ComponentC()
8.     .onTouch(() => {})
9.     .gesture(TapGesture({count: 1}))
10.     .hitTestBehavior(HitTestMode.Transparent)
11. }
12. .onTouch(() => {})
13. .gesture(TapGesture({count: 1}))
15. // HitTestMode.Transparent自身响应触摸测试，不会阻塞兄弟节点的触摸测试。
17. // 当组件C未设置hitTestBehavior时，点击组件B和组件C的重叠区域时，Stack A和组件C的onTouch事件会触发，组件C的点击事件会触发，组件B的onTouch事件和点击手势均不触发。
19. // 而当组件C设置hitTestBehavior为HitTestMode.Transparent时，点击组件B和组件C的重叠区域，组件A和组件C不受到影响与之前一致，组件A和组件C的onTouch事件会触发，组件C的点击手势会触发。而组件B因为组件C设置了HitTestMode.Transparent，组件B也收到了Touch事件，从而组件B的onTouch事件和点击手势触发。

复制代码

• 绑定手势方法对手势的控制
  

1. // 父子组件所绑定手势类型相同时，子组件优先于父组件响应
2. ComponentA() {
3.     ComponentB()
4.     .gesture(TapGesture({count: 1}))
5. }
6. .gesture(TapGesture({count: 1}))

复制代码

1. // 以带优先级的方式绑定手势，则可使得父组件所绑定手势的响应优先级高于子组件
2. ComponentA() {
3.     ComponentB()
4.     .gesture(TapGesture({count: 1}))
5. }
6. .priorityGesture(TapGesture({count: 1}))

复制代码

1. // 使用并行的方式在父组件绑定手势,父子组件所绑定的手势不发生冲突，均可响应
2. ComponentA() {
3.     ComponentB()
4.     .gesture(TapGesture({count: 1}))
5. }
6. .parallelGesture(TapGesture({count: 1}))

复制代码

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。