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

Question

我是从 web 背景开始接触 Flutter 的，我习惯于根据屏幕高度和宽度的百分比或包含它们的元素来定义屏幕元素。

我刚完成一门课程。

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

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

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

是否有一个非固执己见的标准方法？

Answer 1

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

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

此代码创建一个位于屏幕中央的按钮，其宽度为屏幕尺寸宽度的 50%。您还可以使用 heightFactor 字段更改按钮的高度。通过使用此代码，按钮小部件将针对不同的屏幕尺寸放大和缩小，同时仍保持屏幕宽度一半的尺寸。如需更多资源，您应该观看 Flutter 团队的这段视频：https://youtu.be/PEsY654EGZ0 and their website on the FractionallySizedBox here: https://api.flutter.dev/flutter/widgets/FractionallySizedBox-class.html。

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

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

此代码将创建一个按钮，其宽度和高度的比例为 3 比 2。如果屏幕尺寸发生变化，按钮将相应地增大或减小尺寸，同时再次保持 3 比 2 的比例。如果您想了解更多信息，Flutter 团队还有一个视频 (https://youtu.be/XcnP3_mO_Ms) along with some documentation here:(https://api.flutter.dev/flutter/widgets/AspectRatio-class.html)。

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

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

Answer 2

I am a little confused, as the course only spoke of heights & widths in absolute pixel values.

实际上，flutter 使用 density independent pixels (dp) 作为 width/height 个参数。 dp 实际上与分辨率成比例，这意味着 1 dp 在每个设备上显示为相同的物理距离。您不必担心您的元素以不同的尺寸显示，只是因为它们所在的屏幕分辨率发生了变化。

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

By definition, there are roughly 38 logical pixels per centimeter, or about 96 logical pixels per inch, of the physical display.

所以像对待厘米一样思考它们。

I am used to defining screen elements in terms of percentages of the height and width of the screen

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

Is there a non-opinionated standard approach?

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

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

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

Should I use absolute pixel values in my Flutter widgets, or should I scale them to the screen?

responsive-design

flutter