flutter photo_view的改造

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;

  }

代码在这三个文件里，可以将源文件放于一个目录下

巴特西

flutter photo_view的改造

最新文章

热门文章