web-dev-qa-db-ja.com

ズーム可能なウィジェットをフラッター

私が構築したいのは、ズーム可能な動作と同様にその子ウィジェットをズーム可能にすることができるウィジェットです。

私はカバーしたいジェスチャーです

  1. ズームにつまむ
  2. ダブルタップしてズームします
  3. ウィジェットのローカル位置を取得するためにタップします

これが私のウィジェットプランです：

ZoomableWidget(
   child: // My custom Widget which should be zoomable.
)
 _

これが私の現在の進歩です：

import 'package:flutter/material.Dart';
import 'package:flutter/widgets.Dart';
import 'package:vector_math/vector_math_64.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> {
  double _scale = 1.0;
  double _previousScale;
  @override
  Widget build(BuildContext context) {
    return ClipRect(
      child: GestureDetector(
        onScaleStart: (ScaleStartDetails details) {
          _previousScale = _scale;
        },
        onScaleUpdate: (ScaleUpdateDetails details) {
          setState(() {
            _scale = _previousScale * details.scale;
          });
        },
        onScaleEnd: (ScaleEndDetails details) {
          _previousScale = null;
        },
        child: Transform(
          transform: Matrix4.diagonal3(Vector3(_scale.clamp(1.0, 5.0),
              _scale.clamp(1.0, 5.0), _scale.clamp(1.0, 5.0))),
          alignment: FractionalOffset.center,
          child: widget.child,
        ),
      ),
    );
  }
}
 _

私が直面している問題は、ピンチの中心を変更することはできません。また、ウィジェットをスクロールするには、水平ドラッグと垂直ドラッグにはアクセスできません。

前もって感謝します。

fluttergesture
12
Aawaz Gyawali

これは完全に機能しています、参照@pskinkをありがとう。

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();

  @override
  Widget build(BuildContext context) {
    return MatrixGestureDetector(
      onMatrixUpdate: (Matrix4 m, Matrix4 tm, Matrix4 sm, Matrix4 rm) {
        setState(() {
          matrix = m;
        });
      },
      child: Transform(
        transform: matrix,
        child: widget.child,
      ),
    );
  }
}
 _
9
Aawaz Gyawali

私は解像度が大好きです、あなたはPubで包装されたものであることを私のコードでも、私のコードでズームをリセットして回転をロックしたようにすることさえできるようにすることさえすることもできます。

_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,
        ),
      ),
    );
  }
}
_
1
Jilly Taboga

MatrixEgestureTectorの代わりに、Photo_viewパッケージを使用できます. https：//pub.dev/packages/photo_view

スクリーンの制約が適しているため、子のオフスクリーン、最小/最大サイズを打つときのバウンス効果、および他の多くのオプションをドラッグできないため、画面の制限があります。

これはこのようなカスタムチャイルドで使用できます。

PhotoView.customChild(
    child: <your widget>
)
 _
0
syonip