flutter实现可缩放可拖拽双击放大的图片功能
flutter实现可缩放可拖拽双击放大的图片功能
可缩放可拖拽的功能,可实现图片或者其他widget的缩放已经拖拽
并支持双击放大的功能
我们知道官方提供了双击缩放,但是不支持拖拽的功能,我们要实现向百度地图那样可以缩放又可以拖拽的功能,官方的方法就不支持了。
下面先演示下功能:
参数只有两个:
1、child ,是一个widget,可以是图片或者任意的widget
2、doubleTapStillScale,默认是true,意思是双击一直放大,还是只放大一次,再次双击缩小到原图片的大小,如果为false,第一次双击放大图片2倍,再次双击回位。
1、导入依赖库
- dependencies:
- flutter:
- sdk: flutter
- flutter_drag_scale:
- git: https://github.com/LiuC520/flutter_drag_scale.git
2、引入库:
import 'package:flutter_drag_scale/flutter_drag_scale.dart';
3、如下的用法:
- import 'package:flutter/material.dart';
- import 'package:flutter_drag_scale/flutter_drag_scale.dart';
- class OpenImg extends StatefulWidget{
- final String url;
- // final Function onTap;
- const OpenImg({Key key, this.url}):super(key: key);
- @override
- _OpenImgState createState() => _OpenImgState();
- }
- class _OpenImgState extends State<OpenImg>{
- Widget build(BuildContext context){
- return Scaffold(
- appBar: AppBar(
- backgroundColor: Colors.black,
- ),
- body: DragScaleContainer(
- doubleTapStillScale: true,
- child: Container(
- color: Colors.black,
- height: MediaQuery.of(context).size.height,
- child: Image.network(this.widget.url, fit: BoxFit.contain),
- ),
- )
- );
- }
- }
操作完毕.自己动动试试吧,很简单的!!
flutter实现可缩放可拖拽双击放大的图片功能的更多相关文章
- C# 图片缩放,拖拽后保存成图片的功能
窗体界面部分如下: 鼠标的缩放功能需要手动在 OpertaionImg.Designer.cs 文件里面添加一句代码,具体代码如下: //picturePhoto显示图片的控件 this.pictur ...
- C#实现GDI+基本图的缩放、拖拽、移动
C#实现GDI+基本图的缩放.拖拽.移动示例代码如下: using System;using System.Collections.Generic;using System.ComponentMode ...
- 缩放系列(三):一个可以手势缩放、拖拽、旋转的layout
弄了一个下午,终于搞出来了,PowerfulLayout 下面是一个功能强大的改造的例子: 可以实现以下需求: 1.两个手指进行缩放布局 2.所有子控件也随着缩放, 3.子控件该有的功能不能丢失(像b ...
- Android 自定义ImageView支持缩放,拖拽,方便复用
今天刚发了一篇关于ImageView的缩放和拖拽的博客,然后我想了下,将他自定义下,方便我们来复用这个imageView,效果我就不多说了,http://blog.csdn.net/xiaanming ...
- C# 之文件拖拽和pixturBox缩放与拖拽
文件拖拽: 效果:将一个文件拖拽到窗体的某个控件时,将该控件的路径显示在该控件上,只要拿到了路径自然可以读取文件中的内容了. 将一个控件的属性AllowDrop设置为true,然后添加DragDrop ...
- AJ学IOS(36)UI之手势事件旋转_缩放_拖拽
AJ分享,必须精品 效果 完成一个图片的捏合缩放,拖拽,旋转动作. 设计思路 拖拽: 首先是最简单的拖拽 //拖拽 -(void)panTest { UIPanGestureRecognizer *p ...
- C#pictureBox滚轮缩放与拖拽
[转载]C#pictureBox滚轮缩放与拖拽 [转载]C#中图像平移.缩放的实现技巧 [转载]c# 通过鼠标拖动.放大图片,GDI绘图通过鼠标拖动.放大
- vue富文本编辑器vue-quill-editor使用总结(包含图片上传,拖拽,放大和缩小)
vue-quill-editor是vue很好的富文本编辑器,富文本的功能基本上都支持,样式是黑白色,简洁大方. 第一步下载 vue-quill-editor: npm i vue-quill-edit ...
- 移动端的拖拽这个demo实现的功能
SQL数据库适合那些需求确定和对数据完整性要去严格的项目.NoSQL数据库适用于那些对速度和可扩展性比较看重的那些不相关的,不确定和不断发展的需求. 总所周知,网页的加载速度跟图片是有很大的关系的,因 ...
随机推荐
- Android 本地缓存Acache的简单使用
设置缓存数据: ACache mCache = ACache.get(this); mCache.put("key1", "value"); //保存6秒,如果 ...
- 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英文版 ...
- markdown使用手册
github上找到了一个挺全面的项目,mark一下. https://github.com/nicejade/nice-front-end-tutorial/blob/master/tutorial/ ...
- 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 为 ...
- JavaScript学习系列博客_38_JavaScript 事件
事件(Event) - 事件指的是用户和浏览器之间的交互行为.比如:点击按钮.关闭窗口.鼠标移动.... - 我们可以为事件来绑定回调函数来响应事件. - 绑定事件的方式: 1.可以在标签的事件属性中 ...
- Robot Framework(7)——接口测试
一.准备工作 1.安装requests工具(2.22.0) 下载地址:https://pypi.org/project/requests/ 安装方式: 1>下载压缩文件,解压,目录切到解压目录, ...
- linux系统学习
一.linux系统如何配置环境变量 1.在Windows 系统下,很多软件安装都需要配置环境变量,比如 安装 jdk ,如果不配置环境变量,在非软件安装的目录下运行javac 命令,将会报告找不到文件 ...
- Spring Boot入门系列(十九)整合mybatis,使用注解实现动态Sql、参数传递等常用操作!
前面介绍了Spring Boot 整合mybatis 使用注解的方式实现数据库操作,介绍了如何自动生成注解版的mapper 和pojo类. 接下来介绍使用mybatis 常用注解以及如何传参数等数据库 ...
- 华为云服务器安装hadoop2.7.5
1. 安装环境 1.1硬件环境 1.1.1 NameNode 配置项 详细参数 主机 k8s-master CPU Intel(R) Xeon(R) Gold 6278C CPU @ 2.60GHz ...
- go语言字符串的处理与json转换
1 字符串的处理 可以通过Go标准库中的strings和strconv两个包中的函数进行相应的操作 1 字符串的操作 func Contains(s, substr string) bool 字符串s ...