根据不同屏幕大小，在Flutter中基于坐标放置标记。

Question

我有一个标记小部件，可以用于在图像上放置。它将使用偏移量来设置x和y的坐标。

Offset position = Offset(0.0, 0.0);

之后，如果我想放置小部件，它将类似于这样：

double baseWidth = window.physicalSize.width;
double baseHeight = window.physicalSize.height;

double newWidth = MediaQuery.of(context).size.width;
double newHeight = MediaQuery.of(context).size.height;

double newX = (newWidth*630)/baseWidth;
double newY = (newHeight*380)/baseHeight;

MarkerBox(
   Offset(newX, newY,
   'Box One',
   Colors.blueAccent,
   Image.asset("assets/marker_red.png",
      height: 40, width: 40, fit: BoxFit.cover),
   width / 4.5
),

然而，如果屏幕尺寸不同，标记将放置在不同的位置。我该如何使其保持静态不动，无论屏幕大小？这是因为坐标会受到不同屏幕大小的影响吗？

- ali

Answer 1

您可以使用以下代码获取屏幕的宽度和高度：

• double new_width = MediaQuery.of(context).size.width;
• double new_height = MediaQuery.of(context).size.height;

然后，您可以使用 三重比例法则 (Rule of Three) 计算出新分辨率下的坐标值。给定一个“基础分辨率” (base_width, base_height) 的“基础位置” (base_x, base_y)，可以使用上面的代码计算出新坐标 (new_x, new_y)。

• new_x = (new_width*base_x)/base_width
• new_y = (new_height*base_y)/base_height

- Ademir Villena Zevallos

---

抱歉，我该如何获取（base_x，base_y）和（base_width，base_height）？ - ali

这是您在实际分辨率（基础宽度，基础高度）上拥有的标记位置（base_x，base_y）。您使用用于测试的设备具有分辨率，您可以将标记放在所需位置（您说您的标记是静态的）。因此，设备的分辨率是基本分辨率，根据测试设备确定的标记位置是基本位置。 - Ademir Villena Zevallos

我已经按照你提到的做法（参考问题）进行了操作，我已经编辑过了，但它仍然不是静态的。我做错了吗？我已经在Google Pixel和Galaxy Tab上测试过了。 - ali

baseWidth和baseHeight不必像那样获得。例如，假设您将使用谷歌像素作为“基础”。那么，分辨率是多少？假设分辨率为480 * 960（仅为示例，这不是真实分辨率）。因此，baseWidth和baseHeight必须硬编码：double baseWidth = 480;``double baseHeight = 960; - Ademir Villena Zevallos

诀窍在于获得您在“基本”设备中想要的确切位置，并使用这些值（base_resolution 和 base_position）将其他设备中的位置转换为与您在基本设备上获得的相同位置。 - Ademir Villena Zevallos

非常感谢，我使用了画布的宽度和高度而不是设备尺寸，同样的公式也在那里起作用。 - abhijat_saxena