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

Question

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

我刚刚完成了一个课程。

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

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

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

有没有非主流的标准方法？

Answer 1

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

实际上，flutter 使用密度独立像素 (dp)作为宽度/高度 arguments。 dp 实际上随分辨率缩放，这意味着 1 dp 在每个设备上显示为相同的物理距离。 您不必担心您的元素以不同的尺寸显示，只是因为它们所在的屏幕分辨率发生了变化。

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

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

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

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

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

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

有没有非主流的标准方法？

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

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

Answer 2

我建议您根据屏幕大小缩放小部件。 这使您的应用程序更加灵活并适应各种平台和尺寸，例如大型平板电脑或小型手机。 为此，我建议您使用小部件FractionallySizedBox ，它允许您使用屏幕大小的百分比来调整小部件的大小。 例如，如果您希望按钮小部件填充屏幕宽度的 50%，您可以使用以下代码：

Container(
  alignment: Alignment.center,
  child: FractionallySizedBox(
    widthFactor: 0.5,
    child: FlatButton(
      onTap: () {},
      child: Text("PRESS HERE")
    )
  )
)

此代码创建一个位于屏幕中心的按钮，其宽度为屏幕大小宽度的 50%。 您还可以使用 heightFactor 字段更改按钮的高度。 通过使用此代码，按钮小部件将针对不同的屏幕尺寸进行放大和缩小，同时仍保持屏幕宽度的一半。 For more resources, you should check out this video by the Flutter Team: https://youtu.be/PEsY654EGZ0 and their website on the FractionallySizedBox here: https://api.flutter.dev/flutter/widgets/FractionallySizedBox-class. html 。

然而， FractionallySizedBox只是使 flutter 应用程序适应不同屏幕尺寸的众多不同方法之一。 另一种方法是使用AspectRatio Widget。 下面是一个例子：

Container(
  alignment: Alignment.center,
  child: AspectRatio(
    aspectRatio: 3/2
    child: FlatButton(
      onTap: () {},
      child: Text("PRESS ME")
    )
  )
)

此代码将创建一个宽度和高度之间的比率为 3 比 2 的按钮。 如果屏幕尺寸发生变化，按钮将相应地增大或减小尺寸，同时再次保持 3 比 2 的比例。 If you want more information the Flutter team also has a video on it ( https://youtu.be/XcnP3_mO_Ms ) along with some documentation here:( https://api.flutter.dev/flutter/widgets/AspectRatio-class. html ）。

这两个小部件都非常好，被认为是使用的标准做法，但我个人更多地使用FractionallySizedBox 。

我希望我的回答对您有所帮助。