我应该在 Flutter 小部件中使用绝对像素值，还是应该将它们缩放到屏幕？

Question

我是从 Web 背景来到 Flutter 的，在那里我习惯于根据屏幕的高度和宽度的百分比或包含它们的元素来定义屏幕元素。

我刚刚完成了一个课程。

现在我很热情并想开始构建一个应用程序，我有点困惑，因为课程只谈到了绝对像素值的高度和宽度。我可以看到这对于不同的纵横比是有问题的，尤其是不同的方向。

对此有规范的方法吗？官方文档似乎也使用绝对像素值，所以也许我错过了一个基本点。

搜索表明我可能会使用MediaQuery，然后根据它缩放所有内容。但是，我没有看到在代码示例中广泛使用它。

是否有无意见的标准方法？

Answer 1

我有点困惑，因为课程只谈到绝对像素值的高度和宽度。

实际上，flutter 使用与密度无关的像素 (dp)作为宽度/高度参数。dp 实际上与分辨率成比例，这意味着 1 dp 在每个设备上显示为相同的物理距离。您不必担心您的元素会以不同的尺寸显示，因为它们所在的屏幕分辨率会发生变化。

准确地说，flutter将它们称为逻辑像素，并且：

根据定义，物理显示器的每厘米大约有 38 个逻辑像素，或每英寸大约 96 个逻辑像素。

因此，请像考虑 cm 一样考虑它们。

我习惯用屏幕高度和宽度的百分比来定义屏幕元素

尽管如此，您可能希望以相对方式（相对于屏幕或父级）布局您的小部件。为此，flutter 有不同的解决方案：

1. 灵活的
2. 展开
3. 裹
4. 媒体查询
5. 布局生成器
6. 网格视图
7. 其他布局选项

是否有无意见的标准方法？

这是一个非常固执的问题，但例如，材料设计是移动设计的通用标准。Flutters 布局小部件基于这种方法。

但最终，这是您的设计选择。例如，要实现响应式布局网格，您可以使用Wrap，或者您可以使用LayoutBuilder并确定您希望如何布局行和列。