一尘不染

如何平移和缩放图像?

flutter

我正在尝试获取一些基本的图像平移和缩放功能。无状态版本可以显示图像(通过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

(也许可以帮助我添加物理场和弹性边?)


阅读 217

收藏
2020-08-13

共1个答案

一尘不染

我不确定您所说的“无效”是什么意思,但您的方向正确。

查看https://github.com/flutter/flutter/blob/master/examples/layers/widgets/gestures.dart,了解可平移,捏合和缩放的小部件的工作示例。

2020-08-13