Flutter-可以缩放拖拽的图片，面试必知必会

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-4vKlbCug-1646114478688)(//upload-images.jianshu.io/upload_images/15266155-8e5454f434b43798?imageMogr2/auto-orient/strip%7CimageView2/2/w/360/format/webp)]

用法

1.将extended_image的mode参数设置为ExtendedImageMode.Gesture

2.设置GestureConfig

ExtendedImage.network(
imageTestUrl,
fit: BoxFit.contain,
//enableLoadState: false,
mode: ExtendedImageMode.Gesture,
gestureConfig: GestureConfig(
minScale: 0.9,
animationMinScale: 0.7,
maxScale: 3.0,
animationMaxScale: 3.5,
speed: 1.0,
inertialSpeed: 100.0,
initialScale: 1.0,
inPageView: false),
)

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转换了为了图片最后显示的区域，具体代码在最后绘制图片的时候ÿ