如何让 Stack 在 flutter 中响应式？

Question

我想使用 flutter 中的 Stack 小部件实现带有位置指示器的地理地图。我的问题是，当我想指示地图上的点 P 时，我指定了坐标 (x,y)，但这些坐标仅在使用具有特定尺寸的手机时才有效，但如果我使用具有不同显示屏的手机它也会改变我的位置指示器的位置，而不会指示我的点 P。我的问题是：使用 Stack 小部件对于此类问题是否正确？如果没有我可以用什么？

这是我的代码片段：

          Stack(
                children: [
                  Image.asset(
                    'assets/images/map.png',
                     height: mediaQuery.size.height * 0.5,
                     width: mediaQuery.size.width,
                  ),
                  if (x != null && y != null)
                    Align(
                      heightFactor: 2,
                      widthFactor: 2,

                      alignment: Alignment(x, y),
                      child: Image.asset(
                        'assets/images/picker.png',
                        scale: 1.4,
                      ),
                    ),
                ],

Answer 1

您需要使用已从原始图像缩放的新 X 和 Y 坐标输入缩放因子。另外，我倾向于认为，当您使用堆栈时，使用“定位”小部件比“对齐”小部件更好。

缩放后的 X 和 Y 值将如下所示：

double scaleX(originalx, originalwidth, currentwidth){
  return(originalx * currentwidth / originalwidth);
}

double scaleY(originaly, originalheight, currentheight){
  return(originaly * currentheight / originalheight);
}

然后，您可以像现在缩放的地图上的原始 x 和 y 值一样使用这些缩放值。

为了使它更清楚，我在这里创建了一个 dartpad，以便您可以使用它： http://dartpad.dev/34ec25e551a58127b8635fc56744ff29

绿色容器用于模拟您的地图，黄色圆点用于模拟您想要的点。您可以更改代码中的scalingFactorHeight和scalingFactorWidth以模拟不同的屏幕尺寸。您会看到黄点保持在中心，即使 x 和 y 值是恒定的。