四、多层手势
指父子组件嵌套时,父子组件均绑定了手势或事件。有两种,一种默认多层级手势事件,一种自定义多层级手势事件。
- 默认多层级手势事件:需要分清两个概念,触摸事件,手势与事件
- 触摸事件: 触摸事件(onTouch事件)是所有手势组成的基础,有Down,Move,Up,Cancel四种。手势均由触摸事件组成,例如,点击为Down+Up,滑动为Down+一系列Move+Up
//组件B和组件C作为组件A的子组件,当触摸到组件B或者组件C时,组件A也会被触摸到。ComponentA(){ComponentB().onTouch(()=>{})ComponentC().onTouch(()=>{})}.onTouch(()=>{})//组件B和组件C作为Stack A的子组件,组件C覆盖在组件B上。当触摸到组件B或者组件C时,Stack A也会被触摸到。(组件B被组件C遮盖)
Stack A(){ComponentB().onTouch(()=>{})ComponentC().onTouch(()=>{})}.onTouch(()=>{})
- 手势与事件: 除了触摸事件(onTouch事件)外的所有手势与事件,均是通过基础手势或者组合手势实现的。例如,拖拽事件是由长按手势和滑动手势组成的一个顺序手势。
- 自定义控制的多层级手势事件 通过设置属性,控制默认的多层级手势事件竞争流程,更好的实现手势事件。 responseRegion属性和hitTestBehavior属性可以控制Touch事件的分发,从而可以影响到onTouch事件和手势的响应。而绑定手势方法属性可以控制手势的竞争从而影响手势的响应,但不能影响到onTouch事件。
- responseRegion对手势和事件的控制
// 当绑定了responseRegion后,手势与事件的响应区域范围将以所绑定的区域范围为准,而不是以布局区域为准,可能出现布局相关区域不响应手势与事件的情况ComponentA(){// 当组件B绑定了.responseRegion({Rect1, Rect2, Rect3})的属性后,// 所有落在Rect1,Rect2和Rect3区域范围的触摸事件和手势可被组件B对应的回调响应。ComponentB().onTouch(()=>{}).gesture(TapGesture({count:1})).responseRegion({Rect1, Rect2, Rect3})}.onTouch(()=>{})// 当组件A绑定了.responseRegion({Rect4})的属性后,// 所有落在Rect4区域范围的触摸事件和手势可被组件A对应的回调响应。.gesture(TapGesture({count:1})).responseRegion({Rect4})
- hitTestBehavior对手势和事件的控制
// hitTestBehavior属性可以实现在复杂的多层级场景下,一些组件能够响应手势和事件,而一些组件不能响应手势和事件ComponentA(){ComponentB().onTouch(()=>{}).gesture(TapGesture({count:1}))ComponentC(){ComponentD().onTouch(()=>{}).gesture(TapGesture({count:1}))}.onTouch(()=>{}).gesture(TapGesture({count:1})).hitTestBehavior(HitTestMode.Block)}.onTouch(()=>{}).gesture(TapGesture({count:1}))// HitTestMode.Block自身会响应触摸测试,阻塞子节点和兄弟节点的触摸测试,从而导致子节点和兄弟节点的onTouch事件和手势均无法触发。// 当组件C未设置hitTestBehavior时,点击组件D区域,组件A、组件C和组件D的onTouch事件会触发,组件D的点击手势会触发。// 当组件C设置了hitTestBehavior为HitTestMode.Block时,点击组件D区域,组件A和组件C的onTouch事件会触发,组件D的onTouch事件未触发。同时,由于组件D的点击手势因为被阻塞而无法触发,组件C的点击手势会触发。
Stack A(){ComponentB().onTouch(()=>{}).gesture(TapGesture({count:1}))ComponentC().onTouch(()=>{}).gesture(TapGesture({count:1})).hitTestBehavior(HitTestMode.Transparent)}.onTouch(()=>{}).gesture(TapGesture({count:1}))// HitTestMode.Transparent自身响应触摸测试,不会阻塞兄弟节点的触摸测试。// 当组件C未设置hitTestBehavior时,点击组件B和组件C的重叠区域时,Stack A和组件C的onTouch事件会触发,组件C的点击事件会触发,组件B的onTouch事件和点击手势均不触发。// 而当组件C设置hitTestBehavior为HitTestMode.Transparent时,点击组件B和组件C的重叠区域,组件A和组件C不受到影响与之前一致,组件A和组件C的onTouch事件会触发,组件C的点击手势会触发。而组件B因为组件C设置了HitTestMode.Transparent,组件B也收到了Touch事件,从而组件B的onTouch事件和点击手势触发。
- 绑定手势方法对手势的控制
// 父子组件所绑定手势类型相同时,子组件优先于父组件响应ComponentA(){ComponentB().gesture(TapGesture({count:1}))}.gesture(TapGesture({count:1}))
// 以带优先级的方式绑定手势,则可使得父组件所绑定手势的响应优先级高于子组件ComponentA(){ComponentB().gesture(TapGesture({count:1}))}.priorityGesture(TapGesture({count:1}))
// 使用并行的方式在父组件绑定手势,父子组件所绑定的手势不发生冲突,均可响应ComponentA(){ComponentB().gesture(TapGesture({count:1}))}.parallelGesture(TapGesture({count:1}))
本文转载自: https://blog.csdn.net/MuZiChunChun/article/details/142388378
版权归原作者 PlumCarefree 所有, 如有侵权,请联系我们删除。
版权归原作者 PlumCarefree 所有, 如有侵权,请联系我们删除。