Android 颤振：使用InteractiveViewer双击启用图像放大/缩小

我想在双击图像时启用放大和缩小功能，同时在收缩时启用放大/缩小功能。 我在YouTube上看到了一些教程，他们使用

GestureDetector

之类的工具实现了这一功能，但由于某种原因，我没有成功。 为了实现收缩时的放大/缩小，我依赖于，它确实工作得很好，但我还想在双击图像时启用放大/缩小功能。不幸的是，在互联网上寻找这样做的方法却一无所获

是否有任何方法可以使用

InteractiveViewer

，通过按压和双击来启用放大/缩小功能

这是我的密码：

@覆盖
小部件构建（构建上下文）{
返回中心(
子：InteractiveViewer(
边界边缘：边缘集。全部（80），
panEnabled:false，
scaleEnabled：对，
最小刻度：1.0，
最大刻度：2.2，
子项：Image.network（“https://pngimg.com/uploads/muffin/muffin_PNG123.png",
适合：BoxFit.fitWidth，
)
),
);
}

请使用照片视图插件执行此操作，

---

祝你一切顺利

您可以使用

手势检测器

，该检测器提供了单击的位置，您可以使用

TransformationController

在单击位置进行缩放：

final_transformationController=transformationController（）；
tappdownDetails\u doubletappDetails；
@凌驾
小部件构建（构建上下文）{
返回手势检测器(
OnDubleTapdown:_handledDubleTapdown，
onDoubleTap:_handledDoubleTap，
儿童：中心(
子：InteractiveViewer(
transformationController:\u transformationController，
/* ... */
),
),
);
}
void\u handledoubletappdown（tappdown详细信息）{
_doubleTapDetails=详细信息；
}
void_handleDoubleTap（）{
if（_transformationController.value！=Matrix4.identity（））{
_transformationController.value=Matrix4.identity（）；
}否则{
最终位置=_doubleTapDetails.localPosition；
//3倍变焦
_transformationController.value=Matrix4.identity（）
…平移（-position.dx*2，-position.dy*2）
…比例（3.0）；
//福克斯2倍变焦
//…平移（-position.dx，-position.dy）
//…比例（2.0）；
}
}

要在双击时设置过渡动画，必须在顶部创建显式动画

class\u WidgetState使用SingleTickerProviderStateMixin扩展状态{
.
.
.  
AnimationController _AnimationController；
动画(动画),；
@凌驾
void initState（）{
super.initState（）；
_animationController=animationController(
vsync:这个,，
持续时间：持续时间（毫秒：400），
)…addListener（）{
_transformationController.value=\u animation.value；
});
}
@凌驾
无效处置（）{
_animationController.dispose（）；
super.dispose（）；
}
.
.
.
void_handleDoubleTap（）{
矩阵4_endMatrix；
偏移量_位置=_doubleTapDetails.localPosition；
if（_transformationController.value！=Matrix4.identity（））{
_endMatrix=Matrix4.identity（）；
}否则{
_endMatrix=Matrix4.identity（）
…平移（-u position.dx*2，-u position.dy*2）
..比额表（3）；
}
_动画=Matrix4Tween(
开始：_transformationController.value，
结束：_endMatrix，
).制作动画(
曲线之间（曲线：Curves.easeOut）。设置动画（_animationController），
);
_animationController.forward（从：0开始）；
}
.
.
.
}

是的，您需要使用

TransformationController

@pskink如果我使用

TransformationController

，我怎么知道用户双击了图像？使用

手势检测器包装图像或
InteractiveViewer
不起作用。互联网上没有这样的例子。你能提供一个例子吗？它工作得很好：
child:gesturedector（onDoubleTapDown:（d）=>print（'onDoubleTapDown${d.localPosition}'），onDoubleTap:（）=>print（'onDoubleTap'），child:interactiveeviewer（…
Hi！首先，谢谢你的回答。其次，请注意，
transformationController
没有定义
GestureDetector
，因此这不起作用。谢谢你说得对，
transformationController
是
InteractiveViewer
的参数。非常感谢！！这非常有效！希望你不要这样做t介意我问一下-有什么方法可以控制它的动画吗？例如，我想为放大/缩小设置一个特定的持续时间和曲线。嗨，谢谢你的回答！不幸的是，当我双击图像时，它不响应手势，也不放大或缩小。只是提醒一下，上面的代码是你必须添加的片段r更改为@Till的代码。它自身无法工作。突出显示更改，1）在类中包括mixin 2）添加_animationController和_animation3）重写initState和dispose函数，在这些函数中包括_transformationController，以及4）替换_handleDoubleTap函数。你处理的双倍录音应该留在课堂上。如果只是缺少下划线，请确保在构建函数中包含正确的_transformationController。很可能是你的_transformationController把事情搞砸了。在Flatter-2.0中，要修复scale函数的未实现错误，需要将scale（3）改为scale（3.0）。
class _WidgetState extends State<Widget> with SingleTickerProviderStateMixin {
  .
  .
  .  
  AnimationController _animationController;
  Animation<Matrix4> _animation;
  
  @override
  void initState() {
    super.initState();
    _animationController = AnimationController(
      vsync: this,
      duration: Duration(milliseconds: 400),
    )..addListener(() {
        _transformationController.value = _animation.value;
      });
  }

  @override
  void dispose() {
    _animationController.dispose();
    super.dispose();
  }
  .
  .
  .
  void _handleDoubleTap() {
    Matrix4 _endMatrix;
    Offset _position = _doubleTapDetails.localPosition;

    if (_transformationController.value != Matrix4.identity()) {
      _endMatrix = Matrix4.identity();
    } else {
      _endMatrix = Matrix4.identity()
        ..translate(-_position.dx * 2, -_position.dy * 2)
        ..scale(3);
    }

    _animation = Matrix4Tween(
      begin: _transformationController.value,
      end: _endMatrix,
    ).animate(
      CurveTween(curve: Curves.easeOut).animate(_animationController),
    );
    _animationController.forward(from: 0);
  }
  .
  .
  .
}