这篇文章主要给大家介绍了关于利用Flutter实现可以缩放拖拽的图片的相关资料,文中通过示例代码介绍的非常详细,对大家学习或者使用Flutter具有一定的参考学习价值,需要的朋友们下面来一起学习学习吧
前言
在pub上面找了下,没有发现一个效果跟微信一样的支持缩放拖拽效果的image,所以就自己撸了一个,之前写过Flutter 什么功能都有的Image,于是就在这个上面新增了这个功能。
主要功能:
- 缩放拖拽
- 在PageView里面缩放拖拽
支持缩放拖拽
用法
1.将extended_image的mode参数设置为ExtendedImageMode.Gesture
2.设置GestureConfig
GestureConfig 参数说明
参数 | 描述 | 默认值 |
---|---|---|
minScale | 缩放最小值 | 0.8 |
animationMinScale | 缩放动画最小值,当缩放结束时回到minScale值 | minScale * 0.8 |
maxScale | 缩放最小值 | 5.0 |
animationMaxScale | 缩放动画最大值,当缩放结束时回到maxScale值 | maxScale * 1.2 |
speed | 缩放拖拽速度,与用户操作成正比 | 1.0 |
inertialSpeed | 拖拽惯性速度,与惯性速度成正比 | 100 |
cacheGesture | 是否缓存手势状态,可用于Pageview中保留状态,使用clearGestureDetailsCache方法清除 | false |
inPageView | 是否使用ExtendedImageGesturePageView展示图片 | false |
实现过程
这一个功能比较简单,参考了官方的gestures demo,将缩放的Scale和Offset转换了为了图片最后显示的区域,具体代码在最后绘制图片的时候,将gestureDetails转换为对应的图片显示区域。
rect 是整个图片在屏幕上的区域,destinationRect图片显示区域(会根据BoxFit的不同而所不同),通过gestureDetails的calculateFinalDestinationRect方式,计算出最终显示区域。
让缩放的过程看起来流畅
1.根据缩放点相对图片的位置对缩放点作为中心点进行缩放
2.如果Scale小于等于1.0的时候,按照图片的中心点进行缩放的,而当大于1.0并且图片已经铺满区域的时候按照1来执行
3.当图片是那种长宽相差很大的时候,进行缩放的时候,将首先沿着比较长的那边进行中心点缩放,直到图片铺满区域之后,按照1来执行
4.当进行缩放操作的时候,不进行移动操作
1,2,3对应代码
4对应代码,当details.scale==1.0,说明是一个移动操作,否则为了一个缩放操作
获取到了图片的中心点之后,我们再根据Scale等到图片的整个区域
拖拽边界的计算
1.计算是否需要计算限制边界
2.如果需要将区域限制在边界内部
缩放回弹效果以及拖拽惯性效果
唯一注意的是Scale的回弹动画将以最后的缩放中心点为中心进行缩放,这样缩放动画才看起来舒服一些
在PageView里面缩放拖拽
用法
1.使用
ExtendedImageGesturePageView展示图片
2.设置GestureConfig的inPageView 为Ture
GestureConfig 参数说明
参数 | 描述 | 默认值 |
---|---|---|
inPageView | 是否使用ExtendedImageGesturePageView展示图片 | false |
实现过程
手势冲突
这个场景需要关注的是手势的冲突问题,PageView里面是有水平或者垂直的手势的,会跟onScaleStart/onScaleUpdate/onScaleEnd有冲突。
最开始想的是手势应该有冒泡,是不是可以我监听到了之后,不像上冒泡,这样可以阻止PageView里面的滑动行为,最后结论是没有方法能阻止冒泡。
关于手势,大家可以看看拉面小姐姐关于手势的文章,神奇的竞技场概念。。
既然不能阻止手势冒泡,那么我就直接不让你能滚动了,然后全部的手势都交给我,我来处理。
首先我看了下PageView关于滚动的源码,直接指向最终ScrollableState里面的代码,在setCanDrag方法里面根据是否可以Drag,准备了水平/垂直的手势。
把ScrollableState里面关于水平垂直滚动处理的代码拿出来,我创建了一个属于extended_image专门的extended_image_gesture_page_view,属性跟PageView一样只是没法设置physics,
因为强制设置为了NeverScrollableScrollPhysics
然后我们通过RawGestureDetector来注册_gestureRecognizers(水平/垂直的手势)。
关于_gestureRecognizers,我之前一直好奇PageView里面有个手hold的操作是怎么做到了,直到看到源码才知道这么个东西,源码真是个好东西。
到达边界滚动上下一个图片
有了之前缩放拖拽的基础,这部分就比较简单了。如果到达边界就是用默认代码去操作PageView,否则就控制Image进行拖拽操作
拖拽惯性效果
在DragEnd的时候,我们需要注意下处理下惯性。
当图片是放大状态而且水平或者垂直能够滑动的时候,我们需要_drag停止下来,以防止直接滑动到上一个或者下一个图片
DragEndDetails(primaryVelocity: 0.0),并且根据惯性让图片在范围内继续惯性滑动。
整个extended_image的缩放和拖拽功能就介绍完毕了,再吐槽下这个手势,用起来真不舒服,希望Flutter小组有更好的方案。
总结
以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,谢谢大家对编程学习网的支持。