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

學富五車發表於2020-09-18
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),
                ),
            )
            
        );
    }
}

 

 

 操作完畢.自己動動試試吧,很簡單的!!

 

相關文章