我想要构建的是一个小部件,它可以使其子小部件具有类似于可缩放行为的可缩放性。
我想介绍的手势包括
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)缩放,即使我放大了角落。而且,我不能访问水平拖动和垂直拖动滚动小部件。
先谢了。
6条答案
按热度按时间cu6pst1q1#
从Flutter 1.20开始,InteractiveViewer小工具支持框外平移和缩放。
要使任何小部件可缩放,只需使用
InteractiveViewer
Package 子部件。6bc51xsx2#
这是完美的工作现在,感谢参考@pskink。
pb3skfrl3#
我喜欢分辨率,你应该把它放在一个打包的酒吧里,你甚至可以放一些自定义选项,在我的代码中我放了双击来重置缩放和锁定旋转。
ktca8awb4#
您可以使用缩放控件Zoom Widget,只需设置画布大小和子对象
6ie5vjzr5#
作为MatrixGestureDetector的替代方法,您可以使用photo_view包:https://pub.dev/packages/photo_view
它有很好的屏幕约束限制,所以你不能拖动孩子离开屏幕,反弹效果时,击中最小/最大大小,和许多其他选项。
它可以与如下自定义子对象一起使用:
juud5qan6#
我使用缩放小工具
首先,添加到pubsec.yaml:
然后导入:
最大宽度和最大高度的居中文本:
);