Flutter Row、Column 详解：用灵活布局打造精美 UI

引言

Flutter 中的 Row 和 Column 是灵活且用途广泛的布局控件，用于安排子控件。Row 水平排列子控件，而 Column 垂直排列子控件。掌握这些控件至关重要，因为它可以帮助你创建结构良好的界面，并响应不同的屏幕尺寸和设备方向。

Row：水平布局

Row 控件将子控件排列成水平线。它类似于 HTML 中的 flexbox 布局。Row 具有以下主要属性：

• mainAxisAlignment ：指定子控件在 Row 中的对齐方式。
• crossAxisAlignment ：指定子控件在 Row 中垂直对齐方式。
• mainAxisSize ：指定 Row 沿主轴（水平）的大小。
• children ：包含要排列的子控件。

示例：

Row(
  children: [
    Text('文本 1'),
    SizedBox(width: 10),
    Text('文本 2'),
  ],
);

Column：垂直布局

Column 控件将子控件排列成垂直线。它的属性与 Row 类似，但沿垂直轴工作。Column 的主要属性包括：

• mainAxisAlignment ：指定子控件在 Column 中的对齐方式。
• crossAxisAlignment ：指定子控件在 Column 中水平对齐方式。
• mainAxisSize ：指定 Column 沿主轴（垂直）的大小。
• children ：包含要排列的子控件。

示例：

Column(
  children: [
    Text('文本 1'),
    SizedBox(height: 10),
    Text('文本 2'),
  ],
);

布局选项

Row 和 Column 提供了多种布局选项，可让你创建复杂且动态的界面。这些选项包括：

• 间距： 可以使用 SizedBox 控件在子控件之间添加间距。
• 对齐： mainAxisAlignment 和 crossAxisAlignment 属性可用于控制子控件的对齐方式。
• 灵活空间： Flex 控件可用于创建具有可变大小的子控件。
• 滚动： SingleChildScrollView 或 ListView 控件可用于处理超出可用空间的子控件。

实际示例

以下是使用 Row 和 Column 创建复杂布局的实际示例：

• 表单布局： 使用 Row 和 Column 创建具有标签和输入字段的表单。
• 导航栏： 使用 Row 创建包含按钮或图标的导航栏。
• 网格布局： 使用嵌套 Row 和 Column 创建网格布局，以显示列表或图像。
• 响应式布局： 根据屏幕大小和设备方向调整布局。

结论

Row 和 Column 是 Flutter 中必不可少的布局控件。通过掌握它们的属性和布局选项，你可以创建结构良好的、响应迅速的界面。本文深入探讨了 Row 和 Column，提供了实际示例和布局技巧，帮助你成为熟练的 Flutter 开发人员。