Flutter屏幕尺寸计算

Question

Flutter屏幕尺寸计算

19

我试图使用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

然后，从这个答案中我学到了使用以下方法：

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修正吗？

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

- codeKiller

2个回答

1

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

- Flutter Supabase

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Ovidiu · Accepted Answer

Flutter 的默认度量单位是 DIP（密度独立像素）。不同设备具有不同的屏幕尺寸和分辨率，这导致了不同的像素比例。DIP 旨在允许你设计视觉上大致相同大小的小部件，而不考虑设备。

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

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

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

如果您认为使用像素有充分的理由，请在问题中提到，以便能够针对性地解决。