Question

我正想通过使用Flutter使我的应用程序适应某些平板电脑尺寸而生病。

该平板电脑是具有2560x1600屏幕的Samsung Galaxy Tab S5e。

当我拍动时，请使用以下方法返回屏幕尺寸：

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个宽度和高度？

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

Answer 1

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

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

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

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

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

颤振屏幕尺寸计算

1 个答案: