Flutter Row 和 Column

在前面的章节中，我们学习了如何创建一个简单的 Flutter 应用程序及其对小部件的基本样式设置。现在，我们将学习如何在屏幕上以行和列排列小部件。行和列不是单个小部件；它们是两个不同的小部件，即 Row 和 Column。在这里，我们将这两个小部件集成在一起，因为它们具有相似的属性，可以帮助我们高效、快速地理解它们。

Row 和 Column 是 Flutter 中两个重要的小部件，允许开发者根据我们的需求水平和垂直对齐子组件。 在 Flutter 中设计应用程序用户界面时，这些小部件非常必要。

关键点

1. Row 和 Column 小部件是 Flutter 应用程序中最常用的布局模式。
2. 两者都可以采用多个子小部件。
3. 子小部件也可以是行或列小部件。
4. 我们可以拉伸或约束特定子项的小部件。
5. Flutter 还允许开发者指定子小部件如何使用行和列小部件的可用空间。

Row 小部件

此小部件在屏幕上的水平方向排列其子项。 换句话说，它会期望子小部件在水平数组中。如果子小部件需要填充可用的水平空间，我们必须将子小部件包装在 Expanded 小部件中。

Row 小部件不显示为可滚动，因为它在可见视图中显示小部件。 因此，如果我们在行中有更多不适合可用空间的孩子，则认为是错误的。如果我们想创建一个可滚动的行小部件列表，我们需要使用 ListView 小部件。

我们可以使用属性 crossAxisAlignment 和 mainAxisAlignment 根据我们的选择控制行小部件如何对齐其子项。 行的交叉轴将垂直运行，而主轴将水平运行。 请参见下面的可视化表示形式，以更清楚地理解它。

注意：Flutter Row 小部件具有其他几个属性，例如 mainAxisSize，textDirection，verticalDirection 等。 在这里，我们仅讨论 mainAxisAlignment 和 crossAxisAlignment 属性。

我们可以借助以下属性对齐行的子小部件

• start: 它将从主轴的起点开始放置子项。
• end: 它会将子项放置在主轴的末尾。
• center: 它会将子项放置在主轴的中间。
• spaceBetween: 它将平均分配子项之间的可用空间。
• spaceAround: 它将平均分配子项之间的可用空间，并在第一个和最后一个子小部件之前和之后留出一半空间。
• spaceEvenly: 它将平均分配子项之间以及第一个和最后一个子小部件之前和之后的可用空间。

让我们借助一个示例来理解它，在该示例中，我们将对齐内容，以便在行中子项周围有均匀的空间

输出

当我们运行此应用程序时，我们应该获得类似于以下屏幕截图的 UI。

列

此小部件在屏幕上的垂直方向排列其子项。 换句话说，它会期望一个垂直的子小部件数组。如果子小部件需要填充可用的垂直空间，我们必须将子小部件包装在 Expanded 小部件中。

Column 小部件不显示为可滚动，因为它在可见视图中显示小部件。 因此，如果我们在列中有更多不适合可用空间的孩子，则认为是错误的。如果我们想创建一个可滚动的列小部件列表，我们需要使用 ListView 小部件。

我们还可以使用属性 mainAxisAlignment 和 crossAxisAlignment 控制列小部件如何对齐其子项。 列的交叉轴将水平运行，而主轴将垂直运行。 以下可视化表示形式更清楚地说明了它。

注意：Column 小部件还使用与我们在 Row 小部件中讨论的属性相同的属性（例如 start、end、center、spaceAround、spaceBetween 和 spaceEvenly）对齐其内容。

让我们借助一个示例来理解它，在该示例中，我们将对齐内容，以便在列中平均分配子项之间的可用空间

输出

当我们运行此应用程序时，我们应该获得类似于以下屏幕截图的 UI。

Flutter 还允许开发者使用 crossAxisAlignment 和 mainAxisAlignment 的组合来对齐行和列小部件的子小部件。 让我们以上面的列小部件为例，其中我们将 mainAxisAlignment 设置为 MainAxisAlignment.spaceAround，将 crossAxisAlignment 设置为 CrossAxisAlignment.stretch。 它将使列的高度等于主体的高度。 请参见下面的屏幕截图。

Row 和 Column 小部件的缺点

• Flutter 中的 Row 小部件没有水平滚动。 因此，如果我们在单个行中插入了大量无法容纳在该行中的孩子，我们将看到溢出消息。
• Flutter 中的 Column 小部件没有垂直滚动。 因此，如果我们在单个列中插入了大量子项，而这些子项的总大小不等于屏幕的高度，我们将看到溢出消息。