Flutter Interactive Viewer 显示图像的缩小版本

Question

所以我尝试实现交互式小部件，滚动、放大和缩小工作正常。 但是在初始渲染时我遇到了一个小问题，它显示了放大的图像。 我想要输出的内容，以便整个图像可见并且用户可以交互。 这是我的代码。 一点谷歌搜索告诉我，我们可以使用 matrix4 身份或 toScene 方法实现相同的目标，这超出了我的技能范围，有人可以帮忙吗？

InteractiveViewer(
  transformationController: mapController,
  minScale: 0.1,
  maxScale: 1.5,
  constrained: false,
  // scaleEnabled: false,
  child: Image.network(
      'https://images.unsplash.com/photo-1502920514313-52581002a659'),
)

这里放大了显示在初始渲染上的图像，我想要的是第一个选项，我可以看到图像的至少一部分以便对用户有意义。 https://ibb.co/HYnZBvG（期望的结果） https://ibb.co/xg0nxnH（实际结果）

Answer 1

这是因为您没有为 Image Widget 提供任何合适的参数 只需给 BoxFit.fitWidth 以相对于 Width 或 BoxFit.fitHeight 以相对于高度呈现图像 并尝试将约束设置为 true

InteractiveViewer(
  transformationController: mapController,
  minScale: 0.1,
  maxScale: 1.5,
  constrained: false,
  // scaleEnabled: false,
   child: Image.network(
   'https://images.unsplash.com/photo- 
    15029205143152581002a659',fit:BoxFit.fitWidth,
    ),
)