颤振：如何使用同一程序适应所有屏幕尺寸？

Question

我是 Flutter 的新手。 UI 设计师提供基于 iPad 的 XD。当我处理小部件的大小时，我只是将大小设置为与 XD 显示的大小相同（以 px 为单位）。例如：height: 100, width: 100。但是今天我在物理设备（比 iPad 小很多的手机）上测试了这个应用程序，一切都溢出了。当我在 XD 中使用与 iPad 大小相同的模拟器时，我一直忽略这个问题。那么如何适配不同屏幕尺寸的设备呢？有什么功能或其他一些有用的工具吗？

Answer 1

当我通常创建一个颤振应用程序时，我通常会使用以下几点：

• 在使用行和列时使用Expanded、Flexible 和Spacer 小部件： 所有这些都有一个名为 flex 的属性，它非常有用。每当我使用行或列时，我都会使用这些小部件。

• 布局生成器和媒体查询小部件的使用： 这些都在文档中：Creating responsive apps（关于这个 Flutter 文档有更多的文章推荐），可以用来了解屏幕尺寸、宽度和高度，以及你的应用程序在不同方向上的功能。 MediaQuery 给出的宽度和高度如下：double w = MediaQuery.of(context).size.width;

  double h: MediaQuery.of(context).size.height;

• 使用外部库： pub.dev 上有两个库，我在我的项目中经常使用它们，它们是 Device Preview（显示您的应用程序将如何在不同的屏幕尺寸上运行，对我有很大帮助），另一个是用于文本的，即Auto Size Text: 可能不太可取，因为这会调整文本大小，然后在整个应用程序中可能不会保持不变，但有时它很有用！

Answer 2

Flutter 有一些内置的小部件来解决这个问题。

如responsive UI design page中所述，

1。 LayoutBuilder

LayoutBuilder 是一个很好的选择，因为它接受提供BuildContext 和BoxConstraints 的builder。每次布局更改时都会调用builder。

2。 MediaQuery.of()

MediaQuery.of() 为您提供当前应用的大小、方向等。如果您想根据完整的上下文而不是仅根据特定小部件的大小做出决定，这将更加有用。同样，如果你使用它，那么如果用户以某种方式改变了应用程序的大小，你的构建函数就会自动运行。

3。 OrientationBuilder, FractionallySizedBox, AspectRatio

OrientationBuilder 为您提供当前屏幕方向。

FractionallySizedBox 和 AspectRatio 给你父母的大小。

你也可以使用一些第三方包 -

1。 flutter_screenutil

这个包创建了一个设计草案，让您可以使用具有高度响应性的类似像素的值。

2。 auto_size_text

这个包对于响应式大小的文本很有用。