flutter - 如何平移和缩放图像？

Question

我正在尝试为图像获取一些基本的平移和缩放功能。无状态版本可以显示图像(通过 Transform 旋转 180 度)并且 Scale 事件会显示在日志中，仅此而已。

GestureDetector 是获取 pan/pinch/spread 事件的正确小部件吗？我应该查看变换、动画，还是应该只修改 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

(也许帮我添加物理和弹性边缘？)

Answer 1

您可以使用 InteractiveViewer Flutter 开箱即用。

@override
Widget build(BuildContext context) {
  return Center(
    child: InteractiveViewer(
      panEnabled: false, // Set it to false
      boundaryMargin: EdgeInsets.all(100),
      minScale: 0.5,
      maxScale: 2,
      child: Image.asset(
        'your_image_asset',
        width: 200,
        height: 200,
        fit: BoxFit.cover,
      ),
    ),
  );
}