你如何让这个简单的 flutter 布局响应式?
How would you make this simple flutter layout responsive?
自从上次我不得不使用 flutter 为我的公司构建一个小应用程序以来已经过去了一年。当时 MediaQuery 是为各种屏幕尺寸创建布局的流行方式。
今天我正在尝试构建一个像这样的简单布局:
我关心的部分是中间的3个圆圈。它们内部有图标和文字,必须位于屏幕上看到的位置。
所以,我一直在研究如何以响应方式创建布局的那一部分。我的意思是,圆圈相对于屏幕尺寸位于正确的位置和大小,圆圈内的图标和文本也正确定位和调整大小,以避免溢出圆圈。
MediaQuery class 是否仍然是唯一可用于构建此类响应式布局的工具?您会使用不同的方法处理此布局吗?
是的 MediaQuery 仍然被大量使用,但 Flutter 引入了一些基于 Orientation 和 Responsive Layouts 的好部件:
OrientationBuilder - 根据方向构建不同的小部件树 - 例如,如果设备是水平的,您可能会看到方形而不是圆形。
CustomMultiChildLayout - It can automatically decide how to size and position each child, as well as size the parent. Single widgets can be used CustomSingleChildLayout
另外,当自动调整文本大小时,我发现 Auto Size Text 很棒
自从上次我不得不使用 flutter 为我的公司构建一个小应用程序以来已经过去了一年。当时 MediaQuery 是为各种屏幕尺寸创建布局的流行方式。
今天我正在尝试构建一个像这样的简单布局:
我关心的部分是中间的3个圆圈。它们内部有图标和文字,必须位于屏幕上看到的位置。
所以,我一直在研究如何以响应方式创建布局的那一部分。我的意思是,圆圈相对于屏幕尺寸位于正确的位置和大小,圆圈内的图标和文本也正确定位和调整大小,以避免溢出圆圈。
MediaQuery class 是否仍然是唯一可用于构建此类响应式布局的工具?您会使用不同的方法处理此布局吗?
是的 MediaQuery 仍然被大量使用,但 Flutter 引入了一些基于 Orientation 和 Responsive Layouts 的好部件:
OrientationBuilder - 根据方向构建不同的小部件树 - 例如,如果设备是水平的,您可能会看到方形而不是圆形。
CustomMultiChildLayout - It can automatically decide how to size and position each child, as well as size the parent. Single widgets can be used CustomSingleChildLayout
另外,当自动调整文本大小时,我发现 Auto Size Text 很棒