Flutter 中如何使用 Row 和 Column？

推荐答案

在 Flutter 中，Row 和 Column 是用于布局的基本组件，分别用于水平排列和垂直排列子组件。

使用 Row

// www.javascriptcn.com code example
Row(
  children: <Widget>[
    Container(
      color: Colors.red,
      width: 100,
      height: 100,
    ),
    Container(
      color: Colors.green,
      width: 100,
      height: 100,
    ),
    Container(
      color: Colors.blue,
      width: 100,
      height: 100,
    ),
  ],
)

使用 Column

// www.javascriptcn.com code example
Column(
  children: <Widget>[
    Container(
      color: Colors.red,
      width: 100,
      height: 100,
    ),
    Container(
      color: Colors.green,
      width: 100,
      height: 100,
    ),
    Container(
      color: Colors.blue,
      width: 100,
      height: 100,
    ),
  ],
)

本题详细解读

Row 和 Column 的基本概念

• Row: 用于在水平方向上排列子组件。子组件会从左到右依次排列。
• Column: 用于在垂直方向上排列子组件。子组件会从上到下依次排列。

主要属性

• children: 一个 Widget 列表，表示要排列的子组件。
• mainAxisAlignment: 控制子组件在主轴（Row 中是水平轴，Column 中是垂直轴）上的对齐方式。常见的值有 MainAxisAlignment.start、MainAxisAlignment.center、MainAxisAlignment.end、MainAxisAlignment.spaceBetween、MainAxisAlignment.spaceAround 和 MainAxisAlignment.spaceEvenly。
• crossAxisAlignment: 控制子组件在交叉轴（Row 中是垂直轴，Column 中是水平轴）上的对齐方式。常见的值有 CrossAxisAlignment.start、CrossAxisAlignment.center、CrossAxisAlignment.end 和 CrossAxisAlignment.stretch。
• mainAxisSize: 控制 Row 或 Column 在主轴上的大小。常见的值有 MainAxisSize.max 和 MainAxisSize.min。

示例代码解析

• Row 示例: 三个不同颜色的 Container 在水平方向上排列。
• Column 示例: 三个不同颜色的 Container 在垂直方向上排列。

注意事项

• 如果子组件的总宽度或高度超过了 Row 或 Column 的可用空间，可能会导致溢出错误。可以通过使用 Expanded 或 Flexible 组件来调整子组件的大小，或者使用 SingleChildScrollView 来支持滚动。
• Row 和 Column 的默认行为是尽可能占据所有可用空间，除非显式设置了 mainAxisSize 为 MainAxisSize.min。