flutter實現可縮放可拖拽雙擊放大的圖片功能

學富五車發表於2020-09-18
Flutter

flutter_drag_scale

可縮放可拖拽的功能，可實現圖片或者其他widget的縮放已經拖拽
並支援雙擊放大的功能
複製程式碼

我們知道官方提供了雙擊縮放，但是不支援拖拽的功能，我們要實現向百度地圖那樣可以縮放又可以拖拽的功能，官方的方法就不支援了。 下面先演示下功能：

sample.gif

引數只有兩個： 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';

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微信群

掘金： juejin.im/user/581206…

簡書：www.jianshu.com/u/4a5dce568…

csdn：me.csdn.net/liu__520

github : github.com/LiuC520/

相關文章