Flutter 屏幕尺寸计算

Question

尝试使用颤振使我的应用程序适应特定的平板电脑尺寸时，我感到不舒服。

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

当我使颤振返回屏幕尺寸时，使用：

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

然后，从这个答案我学会了使用：

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，指定text size在屏幕上等等，我必须使用的伎俩像

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

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

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

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

Answer 1

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

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

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

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

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