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;
      }

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

  • 相关阅读:
    微信小程序踩坑记
    js学习总结----同源与非同源(jsonp)
    js学习总结----crm客户管理系统之前端页面开发及数据渲染
    js学习总结----crm客户管理系统之node编写API接口
    js学习总结----crm客户管理系统之node创建服务发布项目
    js学习总结----crm客户管理系统之项目开发流程和api接口文档
    js学习总结----编写简单的ajax方法库
    js学习总结----ajax中的http请求方式及同步编程和异步编程
    js学习总结----ajax兼容处理及惰性思想
    js学习总结----http报文及ajax基础知识
  • 原文地址:https://www.cnblogs.com/njcxwz/p/10173711.html
Copyright © 2011-2022 走看看