你如何让这个简单的颤动布局响应？答案

【问题标题】：How would you make this simple flutter layout responsive?你如何让这个简单的颤动布局响应？
【发布时间】：2021-04-01 10:44:40
【问题描述】：

距离上次我不得不使用 Flutter 为我的公司构建一个小应用程序已经过去了一年。当时，MediaQuery 是创建适合各种屏幕尺寸的布局的流行方式。

今天我正在尝试构建一个像这样的简单布局：

我关心的部分是中间的3个圆圈。它们内部有一个图标和文本，并且必须位于屏幕上看到的位置。

所以，我一直在研究如何以响应式方式创建布局的那一部分。我的意思是，圆圈的位置和大小相对于屏幕大小正确，圆圈内的图标和文本也正确定位和调整大小，以避免溢出圆圈。

MediaQuery 类仍然是唯一可用于构建这种响应式布局的工具吗？你会用不同的方法来处理这个布局吗？

【问题讨论】：

【解决方案1】：

是的，MediaQuery 仍然被大量使用，但 Flutter 已经引入了一些基于 Orientation 和 Responsive Layouts 的优秀小部件：

OrientationBuilder - 根据方向构建不同的小部件树 - 例如，如果设备是水平的，您可能会看到方形而不是圆形。

CustomMultiChildLayout - 它可以自动决定每个孩子的大小和位置，以及父母的大小。单个小部件可以使用CustomSingleChildLayout

在自动调整文本大小时，我发现 Auto Size Text 很棒

【讨论】：