zoukankan      html  css  js  c++  java
  • 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;
      }

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

  • 相关阅读:
    轻量级数据库sqlite的使用
    Integer引发的思考
    css限制显示行数
    数据库 chapter 17 数据仓库与联机分析处理技术
    数据库 chapter 15 对象关系数据库系统
    数据库 chapter 16 XML数据库
    数据库 chapter 14 分布式数据库系统
    数据库 chapter 11 并发控制
    数据库 chapter 12 数据库管理系统
    数据库 chapter 13 数据库技术新发展
  • 原文地址:https://www.cnblogs.com/njcxwz/p/10173711.html
Copyright © 2011-2022 走看看