如何使堆栈在颤动中响应？

Question

我想在Flutter中使用Stack小部件实现带有位置指示器的地理地图。我的问题是，当我要指示地图的点P时，我指定了坐标（x，y），但是这些坐标仅在使用具有特定尺寸的电话时才有效，但是在使用具有不同显示方式的电话时才有效尺寸也会改变我的位置指示器的位置，该位置指示器将不会指示我的点P。我的问题是：使用堆栈小部件对这种类型的问题是否正确？如果不能，我该怎么用？

这里是我的代码段：

          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值一样。

为了使内容更清晰，我在此处创建了一个飞镖板，以便您可以尝试使用它：http://dartpad.dev/34ec25e551a58127b8635fc56744ff29

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