Flutter可缩放控件

huwehgph  于 2023-01-06  发布在  Flutter
关注(0)|答案(6)|浏览(342)

我想要构建的是一个小部件,它可以使其子小部件具有类似于可缩放行为的可缩放性。
我想介绍的手势包括
1.缩放
1.连按两次以缩放
1.点击以获取微件的本地位置
以下是我的widget计划:

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,
        ),
      ),
    );
  }
}

我所面临的问题是,我不能改变捏的中心,因此图像只在(0,0)缩放,即使我放大了角落。而且,我不能访问水平拖动和垂直拖动滚动小部件。
先谢了。

cu6pst1q

cu6pst1q1#

Flutter 1.20开始,InteractiveViewer小工具支持框外平移和缩放。
要使任何小部件可缩放,只需使用InteractiveViewer Package 子部件。

@override
Widget build(BuildContext context) {
  return Center(
    child: InteractiveViewer(
      panEnabled: false, // Set it to false to prevent panning. 
      boundaryMargin: EdgeInsets.all(80),
      minScale: 0.5,
      maxScale: 4, 
      child: FlutterLogo(size: 200),
    ),
  );
}
6bc51xsx

6bc51xsx2#

这是完美的工作现在,感谢参考@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,
      ),
    );
  }
}
pb3skfrl

pb3skfrl3#

我喜欢分辨率,你应该把它放在一个打包的酒吧里,你甚至可以放一些自定义选项,在我的代码中我放了双击来重置缩放和锁定旋转。

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,
        ),
      ),
    );
  }
}
ktca8awb

ktca8awb4#

您可以使用缩放控件Zoom Widget,只需设置画布大小和子对象

Zoom(
    width: 1800,
    height: 1800,
    child: Center(
        child: Text("Happy zoom!!"),
    )
);
6ie5vjzr

6ie5vjzr5#

作为MatrixGestureDetector的替代方法,您可以使用photo_view包:https://pub.dev/packages/photo_view
它有很好的屏幕约束限制,所以你不能拖动孩子离开屏幕,反弹效果时,击中最小/最大大小,和许多其他选项。
它可以与如下自定义子对象一起使用:

PhotoView.customChild(
    child: <your widget>
)
juud5qan

juud5qan6#

我使用缩放小工具
首先,添加到pubsec.yaml:

dependencies:
zoom_widget: ^2.0.0

然后导入:

import 'package:zoom_widget/zoom_widget.dart';

最大宽度和最大高度的居中文本:

Zoom(
maxZoomWidth: 1800,
maxZoomHeight: 1800,
child: Center(
    child: Text("Happy zoom!!"),
)

);

相关问题