app中对图片的浏览、缩放是一个常用的功能,目前有一款插件photo_view,基本上可以满足这些功能,但是有些地方需要修改完善
1.双击放大的时候,有三个状态,会有一个放大的中间状态,需要点击三次才能回到原始大小,这个不太符合用户的操作习惯,用户一般就是双击放大,然后在双击返回
2.缩小的时候,即使图片缩小到最小比例了,还需要双击下才能翻页,这个影响用户体验
3.放大的时候,不能翻页,很多app对图片浏览,即使是放大的时候也是可以翻页的,并且放大的状态保留,由于此插件基于pageview组件,pageview对子控件的缩放似乎支持的还不够好,所以作者采取的是放大的时候禁止pageview滚动这一方法来处理,在这里暂且不进行修改。
1.修改双击
PhotoViewScaleState nextScaleState(PhotoViewScaleState actual) { switch (actual) { case PhotoViewScaleState.initial: //return PhotoViewScaleState.covering; case PhotoViewScaleState.covering: return PhotoViewScaleState.originalSize; case PhotoViewScaleState.originalSize: return PhotoViewScaleState.initial; case PhotoViewScaleState.zooming: return PhotoViewScaleState.initial; default: return PhotoViewScaleState.initial; } }
注释改行代码,使状态越过中间状态,其他地方不需要修改
2.修改缩放到最小,不需要双击就可以翻页
enum PhotoViewScaleState { initial, covering, originalSize, zooming,minscale }
添加一个状态
minscale
void onScaleEnd(ScaleEndDetails details) { final double maxScale = widget.scaleBoundaries.computeMaxScale(); final double minScale = widget.scaleBoundaries.computeMinScale(); //animate back to maxScale if gesture exceeded the maxScale specified if (_scale > maxScale) { final double scaleComebackRatio = maxScale / _scale; animateScale(_scale, maxScale); final Offset clampedPosition = clampPosition(_position * scaleComebackRatio, maxScale); animatePosition(_position, clampedPosition); return; } //animate back to minScale if gesture fell smaller than the minScale specified if (_scale < minScale) { final double scaleComebackRatio = minScale / _scale; animateScale(_scale, minScale); animatePosition( _position, clampPosition(_position * scaleComebackRatio, minScale)); widget.setNextScaleState(PhotoViewScaleState.minscale); return; } // get magnitude from gesture velocity final double magnitude = details.velocity.pixelsPerSecond.distance; // animate velocity only if there is no scale change and a significant magnitude if (_scaleBefore / _scale == 1.0 && magnitude >= 400.0) { final Offset direction = details.velocity.pixelsPerSecond / magnitude; animatePosition(_position, clampPosition(_position + direction * 100.0)); } }
代码中添加这一句
widget.setNextScaleState(PhotoViewScaleState.minscale);
if判断增加这一句,目的是为了避免二次刷新
void didUpdateWidget(PhotoViewImageWrapper oldWidget) { super.didUpdateWidget(oldWidget); if (oldWidget.scaleState != widget.scaleState && widget.scaleState != PhotoViewScaleState.zooming&& widget.scaleState != PhotoViewScaleState.minscale) { final double prevScale = _scale == null ? getScaleForScaleState(widget.size, PhotoViewScaleState.initial, widget.childSize, widget.scaleBoundaries) : _scale; final double nextScale = getScaleForScaleState(widget.size, widget.scaleState, widget.childSize, widget.scaleBoundaries); animateScale(prevScale, nextScale); animatePosition(_position, Offset.zero); animateRotation(_rotation, 0.0); } }
同样在这里也要增加判断,该状态下设置pageview的滚动特性
void scaleStateChangedCallback(PhotoViewScaleState scaleState) { setState(() { _locked = (scaleState != PhotoViewScaleState.initial && scaleState != PhotoViewScaleState.minscale); }); widget.scaleStateChangedCallback != null ? widget.scaleStateChangedCallback(scaleState) : null; }
代码在这三个文件里,可以将源文件放于一个目录下