如何平移和缩放图像?
问题内容:
我正在尝试获取一些基本的图像平移和缩放功能。无状态版本可以显示图像(通过Transform旋转180度),并且Scale事件显示在日志中,仅此而已。
是GestureDetector
用于获取平移/收缩/展开事件的正确小部件吗?我应该查看“变换”,“动画”,还是只修改Image
窗口小部件内的字段?
无状态版本
// Wraps an Image widget to provide pan and zoom functionality.
class InteractiveImage extends StatelessWidget {
InteractiveImage(this._image, {Key key}) : super(key: key);
final Image _image;
@override
Widget build(BuildContext context) {
return new Center(
child: new GestureDetector(
onScaleStart: (ScaleStartDetails details) => print(details),
onScaleUpdate: (ScaleUpdateDetails details) => print(details),
onScaleEnd: (ScaleEndDetails details) => print(details),
child: new Transform(
transform: new Matrix4.rotationZ(math.PI),
alignment: FractionalOffset.center,
child: _image,
),
),
);
}
}
有状态版本(无效)
// Wraps an Image widget to provide pan and zoom functionality.
class InteractiveImage extends StatefulWidget {
InteractiveImage(this._image, {Key key}) : super(key: key);
final Image _image;
@override
_InteractiveImageState createState() => new _InteractiveImageState(_image);
}
class _InteractiveImageState extends State<InteractiveImage> {
_InteractiveImageState(this._image);
final Image _image;
@override
Widget build(BuildContext context) {
setState(() => print("STATE SET\n"));
return new GestureDetector(
onScaleStart: (ScaleStartDetails details) => print(details),
onScaleUpdate: (ScaleUpdateDetails details) => print(details),
onScaleEnd: (ScaleEndDetails details) => print(details),
child: new Transform(
transform: new Matrix4.rotationZ(math.PI),
alignment: FractionalOffset.center,
child: _image,
),
);
}
}
更新(库解决方案)
使用
https://pub.dartlang.org/packages/zoomable_image
(也许可以帮助我添加物理场和弹性边?)
问题答案:
我不确定您所说的“无效”是什么意思,但您的方向正确。
查看https://github.com/flutter/flutter/blob/master/examples/layers/widgets/gestures.dart,了解可平移,捏合和缩放的小部件的工作示例。