flutter實現可縮放可拖拽雙擊放大的圖片功能
阿新 • • 發佈:2020-09-18
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), ), ) ); } }
操作完畢.自己動動試試吧,很簡單的!!
&n