Flutter 响应式设计方法答案

【问题标题】：Flutter responsive design approachFlutter 响应式设计方法
【发布时间】：2020-12-25 20:34:35
【问题描述】：

我是 Flutter 新手，之前没有应用开发经验。据我所知，响应式设计有两种方法。

相对于屏幕尺寸进行设计。
为不同的屏幕尺寸或断点设计单独的布局！

哪个更好？是否有任何优点和缺点可以帮助在这些设计方法之间进行选择？简单或维护不是我关心的问题，整体应用性能对我来说很重要。

【问题讨论】：

在大多数示例中，我看到他们使用了第二个选项。

标签： flutter dart responsive-design flutter-layout responsive

【解决方案1】：

最好在不同的屏幕上使用相似的尺寸。 Flutter 使用独立于设备分辨率和屏幕比例的逻辑像素。所以Container 100 宽和 100 高在 4 英寸屏幕和 7 英寸屏幕上占用相同的物理空间。在垂直方向上，通常将小部件设置为使用整个宽度但仅使用一些像素高度并将此小部件放在ListView 中。这种方式在更大的屏幕上可以容纳更多的小部件，但在所有这些小部件上都应该占用相似的空间。
此外，有时开发人员通过不同的小部件排列支持水平方向。

【讨论】：

也许我的问题不清楚。在容器示例中，我希望它在所有屏幕尺寸中占据相同比例的屏幕！（我在帖子中添加了 2 张图片，分别代表 100x100 容器的小屏幕和大屏幕）
@FrozenForest 如果你想占据与MediaQuery.size 的一部分相同的屏幕设置宽度和高度。但是将所有内容都与屏幕尺寸相关是错误的。例如，您不想在更大的屏幕上使用更大的字体。
实际上我想制作与屏幕相关的应用程序的某些部分，而不是全部。我想知道这样调整元素大小（宽度：screenSize * 0.25）是否不会产生任何问题，我会使用它，否则我会为每个断点制作不同的布局。

【解决方案2】：

最好的办法是你使用相对度量，以及像 Expanded、Flexible、MediaQuery、FittedBox 等更高级的小部件，比如研究 Flutter 中的约束

【讨论】：

【解决方案3】：

借助这个包flutter_next，您可以只编写一次Ui，而不是为多种屏幕尺寸编写Ui，它有一些很酷的扩展，可以快速开发UI，文档也很好。

他们甚至有一个用这个包制作的例子 Demo

【讨论】：