我正在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

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

推荐答案

我不知道你说的"不管用"是什么意思,但你说的没错.

查看https://github.com/flutter/flutter/blob/master/examples/layers/widgets/gestures.dart,了解一个可以平移、挤压和zoom 的小部件的工作示例.

Dart相关问答推荐

我们应该将多少代码放入构造函数中?

捕获一个区域中的所有期货

在启用 null 安全性的情况下,如何在 Iterable.firstWhere 中从 orElse 返回 null?

有没有办法在用户停止输入后发送请求?

如何解决此Cannot enable MyLocation layer as location permissions are not granted?

LinearProgressIndicator Flutter使用

如何使用 StreamBuilder 更新 TextField 的值?

多级异步代码中的 Dart 错误

了解Dart private class

如何在flatter中使用SQFlite更新数据库表

谷歌dart Regions?

如何解决Id does not exist错误?

如何在Dart中创建空Map

通常由 TextField 创建的 InputDecorator 不能具有无限宽度

如何在Flutter 的http.MultipartRequest请求上上传文件时获取进度事件

Dart 中使用的const关键字是什么?

如何使用 Dart 和 web 以 60fps 的速度驱动动画循环?

将多张map合并/合并为一张map

dart列表最小值/最大值

如何在 Dart 中创建私有变量?