Flutter 屏幕尺寸计算答案

【问题标题】：Flutter screen size calculationFlutter 屏幕尺寸计算
【发布时间】：2019-11-24 21:32:03
【问题描述】：

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

平板电脑是三星 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

然后，从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、指定text size 等的小部件时，我都必须使用类似的技巧

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

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

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

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

【问题讨论】：

标签： flutter dart pixel screen-size

【解决方案1】：

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

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

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

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

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

【讨论】：

感谢您的清晰解释，现在一切都变得更有意义了，您的解释只需要额外的 2 个 cmets：1) 我很好奇当您说“找出如何使用默认测量单位来实现它”时是什么你的意思是？，根据 DPI 调整小部件大小，使其适用于任何设备？和 2) 关于最后一部分，是的，由于某些原因，此布局仅适用于 2560x1600 的特定平板电脑。
1) 我不知道您想要实现什么布局，但是有很多不同的方法可以控制小部件的大小。一种方法是按照您所说的调整小部件大小，但您也可以在多个小部件之间平均分配或以特定百分比分配可用空间（请参阅行、列、网格、扩展、灵活等），或者也许使用 BoxConstraints 定义最小和最大宽度和高度。可能性是无止境！ 2）这只会让您的任务更轻松，因为您不需要测试或考虑其他屏幕尺寸和分辨率（仍然是一个很好的做法）

【解决方案2】：

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

【讨论】：