如何使堆栈响应颤动？

Question

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

这是我的代码的 sn-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 坐标。另外，我倾向于认为在使用堆栈时使用 Positioned 小部件比 Align 小部件更好。

缩放后的 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 值不变，您也会看到黄点位于中心。