android - Flutter:使用 InteractiveViewer 双击启用图像放大/缩小

Question

我想在双击图像时启用放大和缩小，以及在捏合时放大/缩小。
我在 YouTube 上看到了一些教程，他们使用 GestureDetector 实现了此功能。喜欢 this one但由于某种原因，它对我没有用。
为了实现对夹点的缩放，我依靠 this answer ，它真的很好用，但我也想在双击图像时启用放大/缩小。不幸的是，在互联网上寻找一种方法，一无所获。
有没有什么方法可以使用 InteractiveViewer 启用捏合和双击放大/缩小？ ?
这是我的代码:

@override
Widget build(BuildContext context) {
  return Center(
    child: InteractiveViewer(
      boundaryMargin: EdgeInsets.all(80),
      panEnabled: false,
      scaleEnabled: true,
      minScale: 1.0,
      maxScale: 2.2,
      child: Image.network("https://pngimg.com/uploads/muffin/muffin_PNG123.png",
        fit: BoxFit.fitWidth,
      )
    ),
  );
}

Answer 1

您可以使用 GestureDetector ，它为您提供点击的位置，并且您可以使用 TransformationController 进行缩放在点击位置:

final _transformationController = TransformationController();
TapDownDetails _doubleTapDetails;

@override
Widget build(BuildContext context) {
  return GestureDetector(
    onDoubleTapDown: _handleDoubleTapDown,
    onDoubleTap: _handleDoubleTap,
    child: Center(
      child: InteractiveViewer(
        transformationController: _transformationController,
        /* ... */
      ),
    ),
  );
}

void _handleDoubleTapDown(TapDownDetails details) {
  _doubleTapDetails = details;
}

void _handleDoubleTap() {
  if (_transformationController.value != Matrix4.identity()) {
    _transformationController.value = Matrix4.identity();
  } else {
    final position = _doubleTapDetails.localPosition;
    // For a 3x zoom
    _transformationController.value = Matrix4.identity()
      ..translate(-position.dx * 2, -position.dy * 2)
      ..scale(3.0);
    // Fox a 2x zoom
    // ..translate(-position.dx, -position.dy)
    // ..scale(2.0);
  }
}