Flutter 双指缩放和双指移动共存手势检测系列之--1方案

前言

本文所采用Flutter 版本为 3.10.6， 也许后续版本官方会对手势做进一步丰富完善，以解决本文涉及到的解决方案。

本文涉及项目手势需求：双指向外或内触屏伸缩，对图片进行缩放；双指在屏幕上同向触屏移动，移动图片。

关于Flutter缩放和移动

Flutter 使用中采用GestureDetector进行移动或是手势判定，该手势检测器内置了移动，缩放，长按等动作检测。如果应用在缩放和移动上是单手势，该控件能够满足应用需求。但是如果是个复合手势，如手势可能是缩放也可能是移动，然后就可能会有冲突。

本文就是基于实际项目中遇到的需要双指缩放和双指移动并存手势，在GestureDetector基础上构建一个双手指并存手势控件

最终效果

这是制作好后最终效果图:

应用商店搜索七彩涂色体验

GestureDetector 移动和缩放动作

1. GestureDetector 移动和手势列表

动作	回调	冲突动作
垂直移动	onVerticalDrag*	水平移动
水平移动	onVerticalDrag*	垂直移动
移动	onPan*	缩放
缩放	onScale*	移动

如上表所示，缩放和移动动作是相互冲突。如果同时指定了缩放回调和移动回调，就会遇到如下图的异常。

2. GestureDetector 双指缩放和移动共存测试结果

组合	效果	结论
只移动	单双指均可行	单指头拖拽图片和手势跟随很好，但是双指拖拽移动增量超过双指移动
缩放 + 移动	直接异常	查看源码，无法共存，抛出异常
缩放 + 水平移动或垂直移动	不冲突，可移动	缩放或移动内部自行断定，效果很好；但是只能水平移动或垂直移动
缩放 + 水平移动+垂直移动	直接异常	查看源码，水平移动和垂直移动无法共存，抛出异常

从上述测试表中可以看到要实现本文的双指缩放和移动共存，采用GestureDetector 不可实现。

双指缩放和移动Gesture方案

1. 方案思路
   通过触摸点来进行来进行判断，如果触摸点之间距离在增加并大于阀值，则是缩放。如果触摸点之间距离相同，但是与起始点距离超过阀值，则是移动。

缩放示意图
缩放开始时，触点的中心位置基本保持不变。中心点相对不变则，但是触点距离变大，则是缩放动作。

移动示意图
移动开始时，触点之间相对距离不变，但是与起始点有较大位移。中心点位移，触摸点相对位置不变则是移动。

手势流程

2. 与**GestureDetector** 结合

本文中采用在GestureDetector 基础上实现双指缩放或移动，经过GestureDetector 源码查阅，决定在缩放回调基础上