縮放 (Flutter) 后如何在小部件 (Image) 中移動？

Question

我想放大 flutter 中的圖像，我可以使用GestureDetector和TransForm來實現，但我無法在圖像中移動。 它只是縮放。 我想實現一些拖動，以便在縮放后我可以移動我的圖像。
我怎樣才能做到這一點？
PS我嘗試在GestureDetector中使用onPanStart...但我不能同時使用onScaleStart和onPanStart 。

這是我的代碼：

class _ImageViewState extends State<ImageView> {

  File img;
  double _scale = 1.0;
  double _prev = 1.0;
  _ImageViewState(this.img);
  @override
  Widget build(BuildContext context) {
    return SafeArea(
          child: GestureDetector(
            
            onScaleStart: (ScaleStartDetails details){

              setState(() {
                _scale = _prev;
              });
            },
            onScaleUpdate: (ScaleUpdateDetails details){
              setState(() {
                _scale = _prev * details.scale;
              });
              print(_scale);
            },
            onScaleEnd: (ScaleEndDetails details){
              
              setState(() {
                _prev = _scale;
              });
            },
            child : Transform(
              alignment : FractionalOffset.center,
              transform: Matrix4.diagonal3(Vector3(_scale , _scale , _scale)),
              child: Image.file(img),
            )

          ),
        );
  }
}

Answer 1

我試圖在我的項目中實現類似的東西。 我正在使用matrix_gesture_detector package 並創建了以下自定義小部件：

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

class ZoomableWidget extends StatefulWidget {
  final Widget child;

  const ZoomableWidget({Key key, this.child}) : super(key: key);
  @override
  _ZoomableWidgetState createState() => _ZoomableWidgetState();
}

class _ZoomableWidgetState extends State<ZoomableWidget> {
  Matrix4 matrix = Matrix4.identity();
  Matrix4 zerada =  Matrix4.identity();

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onDoubleTap: (){
        setState(() {
          matrix = zerada;
        });
      },
      child: MatrixGestureDetector(
        shouldRotate: false,
        onMatrixUpdate: (Matrix4 m, Matrix4 tm, Matrix4 sm, Matrix4 rm) {
          setState(() {
            matrix = m;
          });
        },
        child: Transform(
          transform: matrix,
          child: widget.child,
        ),
      ),
    );
  }
}