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

flutter_drag_scale

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

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

sample.gif

参数只有两个: 一、child ,是一个widget,能够是图片或者任意的widget 二、doubleTapStillScale,默认是true,意思是双击一直放大,仍是只放大一次,再次双击缩小到原图片的大小,若是为false,第一次双击放大图片2倍,再次双击回位。github

用法很简单: 一、导入依赖库bash

dependencies:
  flutter:
    sdk: flutter
  flutter_drag_scale:
    git: https://github.com/LiuC520/flutter_drag_scale.git
复制代码

二、引入库:微信

import 'package:flutter_drag_scale/flutter_drag_scale.dart';
复制代码

三、以下的用法:less

import 'package:flutter/material.dart';
import 'package:flutter_drag_scale/flutter_drag_scale.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      height: 400.0,
      width: 400,
      child: Center(
        child: DragScaleContainer(
          doubleTapStillScale: true,
          child: new Image(
            image: new NetworkImage(
                'http://h.hiphotos.baidu.com/zhidao/wh%3D450%2C600/sign=0d023672312ac65c67506e77cec29e27/9f2f070828381f30dea167bbad014c086e06f06c.jpg'),
          ),
        ),
      ),
    );
  }
}

复制代码

wechat :674668211 加微信进flutter微信群ide

掘金: juejin.im/user/581206…ui

简书:www.jianshu.com/u/4a5dce568…spa

csdn:me.csdn.net/liu__520.net

github : github.com/LiuC520/code

相关文章
相关标签/搜索