Flutter屏幕尺寸计算

Question

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

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

当我颤动时 return 屏幕尺寸使用：

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（density-independent 像素）。不同的设备具有不同的屏幕尺寸和分辨率，从而导致不同的像素比。 DIP 旨在允许您设计视觉上大致相同的小部件，而不管设备如何。

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

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

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

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

Answer 2

你可以看看这个包。它允许您创建像素完美 UI 无论您在哪个设备上运行您的应用程序。 https://pub.dev/packages/flutter_screenutil

Flutter屏幕尺寸计算

Flutter screen size calculation

pixel

screen-size

dart

flutter