flutter實(shí)現(xiàn)可縮放可拖拽雙擊放大的圖片功能

flutter_drag_scale

可縮放可拖拽的功能,可實(shí)現(xiàn)圖片或者其他widget的縮放已經(jīng)拖拽
并支持雙擊放大的功能

我們知道官方提供了雙擊縮放,但是不支持拖拽的功能,我們要實(shí)現(xiàn)向百度地圖那樣可以縮放又可以拖拽的功能,官方的方法就不支持了。
下面先演示下功能:


sample.gif

參數(shù)只有兩個(gè):
1、child ,是一個(gè)widget,可以是圖片或者任意的widget
2、doubleTapStillScale,默認(rèn)是true,意思是雙擊一直放大,還是只放大一次,再次雙擊縮小到原圖片的大小,如果為false,第一次雙擊放大圖片2倍,再次雙擊回位。

用法很簡(jiǎn)單:
1、導(dǎo)入依賴庫

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 加微信進(jìn)flutter微信群

掘金: https://juejin.im/user/581206302f301e005c60cd2f

簡(jiǎn)書:http://www.itdecent.cn/u/4a5dce56807b
csdn:https://me.csdn.net/liu__520

github : https://github.com/LiuC520/

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容