Flutter线性布局（Row和Column）

封面图 • 2025-10-27 • Flutter

在 **Flutter** 中，**线性布局（Linear Layout）** 是最常用的布局方式之一，主要通过 `Row` 和 `Column` 两个小部件来实现。它们分别用于水平方向和垂直方向的排列。

---

## ✅ 一、Row（水平布局）

`Row` 小部件将子组件按照**水平方向**依次排列。

### 📌 基本语法：
```dart
Row(
  children: <Widget>[...],
)
```

### 📌 常用属性：

| 属性 | 说明 |
|------|------|
| `mainAxisAlignment` | 控制主轴（水平）上的对齐方式（如 `MainAxisAlignment.start`, `center`, `end`, `spaceBetween`, `spaceAround`） |
| `crossAxisAlignment` | 控制交叉轴（垂直）上的对齐方式（如 `CrossAxisAlignment.center`, `start`, `end`） |
| `textDirection` | 设置文本方向（用于对齐方式的调整） |
| `children` | 子组件列表 |

### 📌 示例代码：
```dart
Row(
  mainAxisAlignment: MainAxisAlignment.spaceEvenly,
  children: [
    Container(width: 50, height: 50, color: Colors.red),
    Container(width: 50, height: 50, color: Colors.green),
    Container(width: 50, height: 50, color: Colors.blue),
  ],
)
```

---

## ✅ 二、Column（垂直布局）

`Column` 小部件将子组件按照**垂直方向**依次排列。

### 📌 基本语法：
```dart
Column(
  children: <Widget>[...],
)
```

### 📌 常用属性：

| 属性 | 说明 |
|------|------|
| `mainAxisAlignment` | 控制主轴（垂直）上的对齐方式（如 `MainAxisAlignment.start`, `center`, `end`, `spaceBetween`, `spaceAround`） |
| `crossAxisAlignment` | 控制交叉轴（水平）上的对齐方式（如 `CrossAxisAlignment.center`, `start`, `end`） |
| `verticalDirection` | 控制垂直方向（仅在 `mainAxisAlignment` 为 `spaceBetween` 等时使用） |
| `children` | 子组件列表 |

### 📌 示例代码：
```dart
Column(
  crossAxisAlignment: CrossAxisAlignment.center,
  children: [
    Container(width: 100, height: 50, color: Colors.red),
    Container(width: 100, height: 50, color: Colors.green),
    Container(width: 100, height: 50, color: Colors.blue),
  ],
)
```

---

## ✅ 三、常见问题与技巧

### 1. **如何让子组件充满整个空间？**

使用 `Expanded` 或 `Flexible` 来分配剩余空间。

```dart
Row(
  children: [
    Expanded(
      flex: 2,
      child: Container(color: Colors.red),
    ),
    Expanded(
      flex: 1,
      child: Container(color: Colors.green),
    ),
  ],
)
```

### 2. **如何处理超出屏幕的布局？**

使用 `ListView` 包裹 `Row` 或 `Column`，可以实现滚动。

```dart
ListView(
  children: [
    Row(...),
    Column(...),
  ],
)
```

### 3. **如何控制子组件的大小？**

使用 `Container` 或 `SizedBox` 指定宽度或高度。

```dart
Container(width: 100, height: 100, color: Colors.yellow)
```

---

## ✅ 四、总结对比

| 特性 | Row（水平） | Column（垂直） |
|------|-------------|----------------|
| 排列方向 | 水平 | 垂直 |
| 主轴 | 横向 | 纵向 |
| 对齐方式 | `mainAxisAlignment` | `mainAxisAlignment` |
| 交叉轴对齐 | `crossAxisAlignment` | `crossAxisAlignment` |

---

如果你有具体的布局需求（比如：居中、左右对齐、弹性布局等），我可以帮你写出更详细的示例代码 😊