flutter - 根据不同屏幕尺寸的坐标放置标记(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
),

但是，如果屏幕大小不同，标记的位置会有所不同。无论屏幕尺寸如何，我如何让它在一个地方保持静态？是因为坐标会根据不同的屏幕尺寸而受到影响吗？

Answer 1

您可以通过以下方式获取屏幕的宽度和高度:

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

然后，你可以制作一个Rule of Tree .对于名为 (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