我正在try 一些基本的图像平移和zoom 功能.无状态版本可以显示图像(通过变换旋转180度),zoom 事件显示在日志(log)中,但仅此而已.
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,
),
);
}
}
更新(库解决方案)
Use 100
(也许可以帮我添加物理和弹性边缘?)