Flutter屏幕尺寸计算

Question

我在尝试使用 flutter 使我的应用适应特定平板电脑尺寸时感到恶心。

平板电脑是三星 Galaxy Tab S5e，屏幕为 2560x1600。

当我使用 flutter 返回屏幕尺寸时:

print("Size W is ${MediaQuery.of(context).size.width}");
print("Size H is ${MediaQuery.of(context).size.height}");

我得到的是:

Size W is 1137.7777777777778
Size H is 711.1111111111111

然后，从this answer我学会了使用:

var pixRatio = MediaQuery.of(context).devicePixelRatio;

所以现在我实际上可以使用以下方法获得正确的值:

print("Corrected size W is ${MediaQuery.of(context).size.width * pixRatio}");
print("Corrected size H is ${MediaQuery.of(context).size.height * pixRatio}");

并得到:

Corrected size W is 2560.0
Corrected size H is 1600.0

问题是，每次我想放置一个带有尺寸、Container、Image、指定文本大小等的小部件时屏幕，我必须使用这样的技巧

Container(
    width: 100 / pixRatio,
    height: 200 / pixRatio,
),

如果我不包括 /pixRatio 更正，它只会绘制不正确，我会得到很多像素溢出..

这是将小部件以正确尺寸放置在屏幕上的唯一方法吗？？，我的意思是，我真的需要每次添加 /pixRatio宽度和高度的修正??

对我来说听起来不太实用。

Answer 1

Flutter 中默认的度量单位是 DIP(密度无关像素)。不同的设备具有不同的屏幕尺寸和分辨率，从而导致不同的像素比。 DIP 旨在允许您设计在视觉上大致相同大小的小部件，而不管设备如何。

通过将所有尺寸除以像素比，您可以将 DIP 转换为常规像素。如果您的小部件尺寸以常规像素定义，您会发现您的布局会根据屏幕分辨率发生很大变化，这可能不是您想要的。

您的容器现在配置为 100 像素宽和 200 像素高，在分辨率为 2560x1600 的平板电脑上。您可以在一行中完全容纳 25 个这样的容器。如果您现在切换到屏幕分辨率为 1280x800 但屏幕尺寸相同的平板电脑，您的 Container 在视觉上将是两倍宽和两倍高，因此占据的面积在视觉上是大 4 倍!并且只有 12 个可以完全放在一行中。这是您想要实现的行为吗？

我强烈建议您重新考虑您想要实现的布局，然后找出如何使用默认度量单位而不是像素来实现它。

另一方面，如果您认为有正当理由改用像素，请在问题中提及，以便解决。