本文由 简悦SimpRead 转码，原文地址 blog.flutterflow.io
防止FlutterFlow中的布局溢出
4 天前 - 10 分钟阅读
作者：[Souvik Biswas]
在设计任何应用程序的用户界面时，几乎每个人都可能至少遇到过一次，那就是溢出问题。它可能会导致应用程序的某些UI元素在设备屏幕上不能按预期呈现，并可能出现剪切问题。
今天，我们将讨论更多关于溢出问题的内容--你如何识别是否存在溢出，并最终修复它，以便在不同的屏幕尺寸上保持布局设计的一致性。
TL;DR: 尽可能避免为任何小部件指定固定尺寸。有固定尺寸的小部件有更大的机会导致溢出问题。
让我们首先更好地了解什么是溢出，以及为什么它首先会发生。
什么是小部件溢出
简单地说，溢出问题是指当你把一个小部件放到画布上时，它不能容纳在可用的空间里（无论是沿着宽度、高度，还是两者）。
下面的演示显示了一个由文本部件引起的溢出问题，该部件包含一个长文本，放置在行内。
正在溢出的小组件的边缘被标记为黄色和黑色的条纹图案，同时还有溢出信息。在这里，文本小组件向右溢出，所以显示了以下语句。"右边溢出了12个像素"。
通常，当一个列或行有一个不受其尺寸限制的子部件时，这个问题就会发生（子部件导致溢出问题）。在上面的例子中，你也看到一个类似的溢出问题，即行内的文本部件溢出了。
入门
要了解如何避免布局溢出，你首先需要面对它们。所以，最好的方法是通过建立一个简单的布局来开始。
让我们建立一个具有以下开始的UI元素的布局。
如果你熟悉使用FlutterFlow设计布局，这个UI元素乍看之下应该很容易构建。但是，仍然有很多方法可以让它出错。
下面是一个构建这个元素的演示。
🛑BEFORE PROCEED--你是否注意到上述设计该元素的演示有什么问题？
有一个溢出的问题存在！。
我们为容器部件指定了一个固定的高度，这个容器部件包裹着一个包含不同大小的子栏--这是一个坏的做法。在这种情况下，我们只想让容器包住整个列。为此，你不需要指定一个固定的高度。
我们稍后会看一下这个解决方案。
但在此之前-- 你如何理解布局中是否有任何溢出问题？ 你肯定可以，如果你知道要寻找什么😉。
寻找溢出问题
如果你用敏锐的眼光看了上面的演示，你可能已经注意到在画布区域的右上角出现了一个新的按钮。它被称为显示溢出按钮，点击它，你就能看到布局溢出问题发生的具体区域。
一旦你点击这个按钮，溢出的小部件的边缘将被标记为一个黄色和黑色的条纹图案，同时还有一条信息。
可能有一些溢出的问题不是这么容易发现的。让我们来看看一个例子。
在下面的布局中，我们在一个列（不可滚动）内添加了一堆容器（紫色和霓虹绿色）。
当我们选择iPhone 11 Pro设备时，这个布局看起来完全没有问题，但如果选择一个更小的屏幕尺寸的设备（如iPhone 12 Mini），布局就会从底部溢出。
要根据设备的屏幕尺寸选择画布尺寸，请进入画布尺寸部分（出现在屏幕左上方的工具条内）。你会发现三种类型的设备尺寸（手机、平板电脑和桌面）；点击手机图标，从列表中选择一个设备。
与其从列表中循环选择不同的设备，还有一个更好的方法来检查你的布局是否适应不同的屏幕尺寸。选择显示调整手柄杆按钮，将画布调整到不同的尺寸，以检查是否发生任何溢出问题。
你将在本文的后续章节中学习如何防止这些布局溢出问题。
容器溢出
如果您是FlutterFlow布局构建技术的新手，这是您可能面临的最常见的溢出问题类型之一。
TIP 1: 当您只想包裹容器部件（如文本、图标、行、列等）时，避免给容器部件提供固定的高度或宽度。
你可能已经知道，FlutterFlow使用Flutter框架来生成代码，而你在这里得到的大多数部件基本上都是Flutter部件。在这里，我们将尝试理解某些概念，这些概念来自于Flutter中容器小部件的基础属性，并使用它们来避免布局溢出。
当你在Container内添加一个子部件时，它往往会包裹这个子部件，并根据子部件调整Container的大小。
要解决Getting Started UI元素中的溢出问题，只需从包裹该元素列的Container中移除指定的高度**值即可。
🥳**恭喜你！**你已经学会了解决你的第一个溢出问题。现在，我们将更深入地了解一下容器。
为了更好地理解，让我们看看Container是如何在不同的情况下根据子部件来适应其大小的。
当你把一个新的容器部件拖到画布上时，默认情况下，它的高度和宽度为100像素。
让我们在容器内添加一个文本小组件。
在文本小组件的所有边上应用8像素的填充。
如果它是一个长的文本，不能装入容器的指定尺寸，文本将被裁剪掉。
你可以看到在上面的图片中，文本的最后一个字被裁剪掉了，因为它不能放入容器内。
根据你的使用情况，你可以用不同的方式让容器适应它里面的子部件（在本例中，文本部件）。
情况1。要使Container小组件在垂直和水平方向上都包裹住子小组件**（适应高度和宽度），移除Container的高度和宽度值。
情况2。要使Container小组件只在水平方向上**包住孩子（有一个固定的高度但适应宽度），为它的高度指定一个固定的值，并删除宽度值。
情况3。要使容器小组件只垂直地包裹孩子**（有一个固定的宽度但适应高度），为它的宽度指定一个固定的值，并删除高度值。
我们在这里使用了一个文本部件来演示各种情况，但是如果你使用任何其他部件作为容器的子部件，情况也会类似。
文本溢出
通常情况下，如果文本小组件单独或与任何其他小组件一起放置在行中，就会发生溢出。这是因为文本想要水平扩展，但不知道如何将自己限制在行的边界内。
还记得吗？你已经在本文开头看到了这个溢出问题的例子。
有一个简单的方法来解决这个文本溢出的问题
只要让文本小组件扩展。
让一个小组件展开，让它沿着主轴填充可用的空间（例如，水平方向的行或垂直方向的列）。因此，当你让文本小组件展开时，它将占据行内的整个可用水平空间，并将其余的文本包裹到一个新行。
要使文本小组件展开，请选择该小组件，并从属性面板中选择扩展旁的第二个图标。
这将防止溢出问题，并将整个文本软包起来。
但在某些情况下，你可能想把文本限制在一个指定的行数内。例如，你可能想显示一个有不同长度描述的书籍列表，但假设你想把描述限制在只有两行，以保持用户界面的一致性和简洁。你可以使用最大行数属性来做到这一点。
列和行溢出
列小组件的大小是由其内部存在的子项决定的。如果孩子们倾向于占用比设备屏幕高度更多的垂直空间（即沿着Column的主轴），就会导致溢出问题。
同样地，行部件的大小也是由其内部存在的子部件决定的。在这种情况下，如果孩子们倾向于占用比设备屏幕宽度更多的水平空间（即沿着行的主轴），就会导致溢出问题。
这两个溢出问题都可以通过使列或行小组件可滚动来解决。选择列/行小组件，进入属性面板，并选择允许滚动按钮。
另外，你也可以使用ListView部件，它默认启用了滚动功能，你可以选择轴为垂直或水平。
与可滚动的列/行小组件相比，使用这个小组件还有一个好处。当你显示一个动态的项目列表（相当长）时，ListView只渲染屏幕上可见的项目，而不是一次性加载所有项目--这有助于提高性能和减少内存消耗。
👉当从Firestore或API调用加载一个动态的项目列表时，优先选择ListView部件。
在某些情况下，使列或行可滚动可能并不理想。让我们看看如何防止不可滚动的列/行部件的溢出问题。
通常，这些类型的溢出是由于小部件周围的Padding的固定值而发生的。例如，假设我们想建立下面的布局。
在开始按钮上方的空间可以只通过给小部件添加顶部的padding来获得。但是等等，指定一个固定的填充量是一个不好的做法，因为在屏幕较高的设备上，它不会将按钮向下推，而在屏幕不高的设备上，可能会导致溢出问题。
在按钮上方添加空间的正确方法是使用Spacer小部件。它是最被低估的小组件之一，但它是最有用的小组件之一，可以在列或行的两个孩子之间插入一个灵活的空位。
有一些高级的方法可以使用像Spacer这样的灵活部件。我们将在接下来的内容中深入研究这些方法。
增强适应性
防止布局溢出是为了使你的布局更具适应性和动态性。其中一个有助于提高适应性的高级属性被称为灵活。
⚠️这个属性只适用于当你在行或列内有多个扩展的小部件时。
灵活性（或者说，灵活性系数）是一个整数值，它有助于确定应该分配给行或列部件内的每个部件的可用空间的比例。
默认情况下，当您在行或列内展开多个小组件时，每个小组件的Flex值为 "1"（即，所有小组件的大小相同）。
blog.flutterflow.io/content/med…
0:00/1×
现在，让我们将BlueContainer的flex值定义为 "1"，将PinkContainer的flex值定义为 "2"。这将把1/3的空间分配给BlueContainer，2/3的空间分配给PinkContainer。
你也可以在Spacer部件中使用弹性因子。
在上面的SpaceYoga布局中，图像和文本似乎被推到了顶部。如果我们在图像的顶部添加一点间距，看起来会更好。
添加另一个 "间隔 "小组件，并将其放置在列内的图像小组件的顶部。
现在，我们想让这个Spacer创建的间距比添加到 "开始 "按钮上面的间距要小。因此，让我们为顶部Spacer分配一个 "1"的flex值，为底部Spacer分配一个 "2"的flex值。
注意，你在顶部有一个较小的间距（总空间的1/3），在底部有一个较宽的间距（总空间的2/3）。
结论
本文讨论的技术应该可以帮助你在FlutterFlow中设计出更多的自适应布局，并防止溢出问题。我希望你觉得这篇文章对你有帮助。
在设计布局时要记住的几点总结。
- 记得避免为高度、宽度或填充物设置一个可观的固定值；这将有助于在大多数情况下防止布局溢出。
- 在使用列或行的时候，不要忘记利用隔板小部件的优势。
- 在行或列内使用多个扩展的小部件，利用flex值来按比例划分可用空间。
- 如果你认为你有一个长的布局，在某些屏幕尺寸中可能会溢出，那么让列或行可以滚动。
- 对于显示一个长的动态列表，最好使用ListView部件。
参考资料
- UI & Layout 101 - FlutterFlow Docs
- Column and Row widget - FlutterFlow Docs
- Spacer widget - FlutterFlow Docs
- ListView - FlutterFlow Docs
