InteractiveViewer 图像被放大

Question

我的问题应该很简单，但我被卡住了：我需要显示上面带有标记的地图图像（这就是我使用堆栈的原因）并且该图像可以缩放和平移。唯一的问题是，当我打开应用程序时，图像完全放大了，我必须手动缩小。我尝试阅读文档和谷歌搜索，但我只找到了不适合我的需要或无法按预期工作的库。

所以，问题很简单：我怎样才能从头看到完全缩小的图像？

这是代码。

    return Container(
      height: 350,
      child: InteractiveViewer(
        // TODO the image is automatically zoomed in!
        minScale: .1,
        maxScale: 1,
        constrained: false,
        child: Stack(children: [
          Image.asset(itinerary.mapImage, fit: BoxFit.fitWidth),
          icon(...),
        ])
      )
    )

Answer 1

您需要使用TransformationController 来控制InteractiveViewer。这是代码：

  TransformationController _controller;

  @override
  void initState() {
    _controller = TransformationController();
    _controller.value = Matrix4.identity() * 0.5;
    super.initState();
  }

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Container(
        height: 350,
        child: InteractiveViewer(
          transformationController: _controller,
          minScale: .1,
          maxScale: 1,
          onInteractionEnd: (s) {
            print(_controller.value);
          },
          constrained: false,
          child: Stack(
            children: [
              Image.asset(
                "assets/Big.Buck.Bunny.-.Landscape.png",
                fit: BoxFit.fitWidth,
              ),
            ],
          ),
        ),
      ),
    );
  }

请注意，您可能需要调整初始比例值（与 Matrix4 相乘的值）以获得所需的输出。

InteractiveViewer 图像被放大

InteractiveViewer image is zoomed in

android

zooming

flutter