flutter实现可缩放可拖拽双击放大的图片功能

可缩放可拖拽的功能,可实现图片或者其他widget的缩放已经拖拽
并支持双击放大的功能

我们知道官方提供了双击缩放,但是不支持拖拽的功能,我们要实现向百度地图那样可以缩放又可以拖拽的功能,官方的方法就不支持了。
下面先演示下功能:

参数只有两个:
1、child ,是一个widget,可以是图片或者任意的widget
2、doubleTapStillScale,默认是true,意思是双击一直放大,还是只放大一次,再次双击缩小到原图片的大小,如果为false,第一次双击放大图片2倍,再次双击回位。

1、导入依赖库

  1. dependencies:
  2. flutter:
  3. sdk: flutter
  4. flutter_drag_scale:
  5. git: https://github.com/LiuC520/flutter_drag_scale.git

2、引入库:

import 'package:flutter_drag_scale/flutter_drag_scale.dart';

3、如下的用法:

  1. import 'package:flutter/material.dart';
  2. import 'package:flutter_drag_scale/flutter_drag_scale.dart';
  3.  
  4. class OpenImg extends StatefulWidget{
  5. final String url;
  6. // final Function onTap;
  7. const OpenImg({Key key, this.url}):super(key: key);
  8. @override
  9. _OpenImgState createState() => _OpenImgState();
  10. }
  11.  
  12. class _OpenImgState extends State<OpenImg>{
  13. Widget build(BuildContext context){
  14. return Scaffold(
  15. appBar: AppBar(
  16. backgroundColor: Colors.black,
  17. ),
  18. body: DragScaleContainer(
  19. doubleTapStillScale: true,
  20. child: Container(
  21. color: Colors.black,
  22. height: MediaQuery.of(context).size.height,
  23. child: Image.network(this.widget.url, fit: BoxFit.contain),
  24. ),
  25. )
  26.  
  27. );
  28. }
  29. }

操作完毕.自己动动试试吧,很简单的!!

flutter实现可缩放可拖拽双击放大的图片功能的更多相关文章

  1. C# 图片缩放,拖拽后保存成图片的功能

    窗体界面部分如下: 鼠标的缩放功能需要手动在 OpertaionImg.Designer.cs 文件里面添加一句代码,具体代码如下: //picturePhoto显示图片的控件 this.pictur ...

  2. C#实现GDI+基本图的缩放、拖拽、移动

    C#实现GDI+基本图的缩放.拖拽.移动示例代码如下: using System;using System.Collections.Generic;using System.ComponentMode ...

  3. 缩放系列(三):一个可以手势缩放、拖拽、旋转的layout

    弄了一个下午,终于搞出来了,PowerfulLayout 下面是一个功能强大的改造的例子: 可以实现以下需求: 1.两个手指进行缩放布局 2.所有子控件也随着缩放, 3.子控件该有的功能不能丢失(像b ...

  4. Android 自定义ImageView支持缩放,拖拽,方便复用

    今天刚发了一篇关于ImageView的缩放和拖拽的博客,然后我想了下,将他自定义下,方便我们来复用这个imageView,效果我就不多说了,http://blog.csdn.net/xiaanming ...

  5. C# 之文件拖拽和pixturBox缩放与拖拽

    文件拖拽: 效果:将一个文件拖拽到窗体的某个控件时,将该控件的路径显示在该控件上,只要拿到了路径自然可以读取文件中的内容了. 将一个控件的属性AllowDrop设置为true,然后添加DragDrop ...

  6. AJ学IOS(36)UI之手势事件旋转_缩放_拖拽

    AJ分享,必须精品 效果 完成一个图片的捏合缩放,拖拽,旋转动作. 设计思路 拖拽: 首先是最简单的拖拽 //拖拽 -(void)panTest { UIPanGestureRecognizer *p ...

  7. C#pictureBox滚轮缩放与拖拽

    [转载]C#pictureBox滚轮缩放与拖拽 [转载]C#中图像平移.缩放的实现技巧 [转载]c# 通过鼠标拖动.放大图片,GDI绘图通过鼠标拖动.放大

  8. vue富文本编辑器vue-quill-editor使用总结(包含图片上传,拖拽,放大和缩小)

    vue-quill-editor是vue很好的富文本编辑器,富文本的功能基本上都支持,样式是黑白色,简洁大方. 第一步下载 vue-quill-editor: npm i vue-quill-edit ...

  9. 移动端的拖拽这个demo实现的功能

    SQL数据库适合那些需求确定和对数据完整性要去严格的项目.NoSQL数据库适用于那些对速度和可扩展性比较看重的那些不相关的,不确定和不断发展的需求. 总所周知,网页的加载速度跟图片是有很大的关系的,因 ...

随机推荐

  1. Android 本地缓存Acache的简单使用

    设置缓存数据: ACache mCache = ACache.get(this); mCache.put("key1", "value"); //保存6秒,如果 ...

  2. RFC2474 - Definition of the Differentiated Services Field (DS Field) in the IPv4 and IPv6 Headers的双语版

    RFC2474 - Definition of the Differentiated Services Field (DS Field) in the IPv4 and IPv6 Headers英文版 ...

  3. markdown使用手册

    github上找到了一个挺全面的项目,mark一下. https://github.com/nicejade/nice-front-end-tutorial/blob/master/tutorial/ ...

  4. C++ Templates (1.6 但是为什么不...? But, Should't We ...?)

    返回完整目录 目录 1.6 但是为什么不...? But, Should't We ...? 1.6.1 传值还是传引用? Pass by Value or by Reference? 1.6.2 为 ...

  5. JavaScript学习系列博客_38_JavaScript 事件

    事件(Event) - 事件指的是用户和浏览器之间的交互行为.比如:点击按钮.关闭窗口.鼠标移动.... - 我们可以为事件来绑定回调函数来响应事件. - 绑定事件的方式: 1.可以在标签的事件属性中 ...

  6. Robot Framework(7)——接口测试

    一.准备工作 1.安装requests工具(2.22.0) 下载地址:https://pypi.org/project/requests/ 安装方式: 1>下载压缩文件,解压,目录切到解压目录, ...

  7. linux系统学习

    一.linux系统如何配置环境变量 1.在Windows 系统下,很多软件安装都需要配置环境变量,比如 安装 jdk ,如果不配置环境变量,在非软件安装的目录下运行javac 命令,将会报告找不到文件 ...

  8. Spring Boot入门系列(十九)整合mybatis,使用注解实现动态Sql、参数传递等常用操作!

    前面介绍了Spring Boot 整合mybatis 使用注解的方式实现数据库操作,介绍了如何自动生成注解版的mapper 和pojo类. 接下来介绍使用mybatis 常用注解以及如何传参数等数据库 ...

  9. 华为云服务器安装hadoop2.7.5

    1. 安装环境 1.1硬件环境 1.1.1 NameNode 配置项 详细参数 主机 k8s-master CPU Intel(R) Xeon(R) Gold 6278C CPU @ 2.60GHz ...

  10. go语言字符串的处理与json转换

    1 字符串的处理 可以通过Go标准库中的strings和strconv两个包中的函数进行相应的操作 1 字符串的操作 func Contains(s, substr string) bool 字符串s ...