Flutter弹性布局（Flex）

封面图 • 2025-10-27 • Flutter

在 **Flutter** 中，**Flex 布局**（也称为弹性布局）是一种非常灵活且强大的布局方式，它基于 **Flexbox 布局模型**，类似于 CSS 中的 Flexbox。Flutter 中的 Flex 布局主要通过 `Row`、`Column` 和 `Flex` 这三个组件来实现。

---

## 一、基本概念

### 1. **Row**
- 水平方向排列子组件。
- 子组件沿 **水平轴** 排列。
- 示例：
```dart
Row(
  children: [
    Text('Hello'),
    Text('World'),
  ],
)
```

### 2. **Column**
- 垂直方向排列子组件。
- 子组件沿 **垂直轴** 排列。
- 示例：
```dart
Column(
  children: [
    Text('Hello'),
    Text('World'),
  ],
)
```

### 3. **Flex**
- 更通用的布局组件，可以控制子组件的排列方向（水平或垂直）。
- 可以设置 `mainAxisAlignment` 和 `crossAxisAlignment` 来控制对齐方式。
- 示例：
```dart
Flex(
  direction: Axis.horizontal, // 或 Axis.vertical
  children: [
    Text('Hello'),
    Text('World'),
  ],
)
```

---

## 二、Flex 布局的核心属性

| 属性 | 说明 |
|------|------|
| `direction` | 布局方向：`Axis.horizontal`（水平）或 `Axis.vertical`（垂直） |
| `mainAxisAlignment` | 主轴上的对齐方式（如 `MainAxisAlignment.start`, `center`, `end`, `spaceBetween`, `spaceAround`, `spaceEvenly`） |
| `crossAxisAlignment` | 交叉轴上的对齐方式（如 `CrossAxisAlignment.start`, `center`, `end`, `stretch`） |
| `mainAxisSize` | 主轴的大小（默认为 `MainAxisSize.max`） |
| `textDirection` | 文本方向（用于控制子组件的排列方向） |

---

## 三、常用对齐方式示例

### Row 的对齐方式

```dart
Row(
  mainAxisAlignment: MainAxisAlignment.spaceEvenly,
  crossAxisAlignment: CrossAxisAlignment.center,
  children: [
    Container(width: 50, height: 50, color: Colors.red),
    Container(width: 50, height: 50, color: Colors.blue),
  ],
)
```

### Column 的对齐方式

```dart
Column(
  mainAxisAlignment: MainAxisAlignment.center,
  crossAxisAlignment: CrossAxisAlignment.end,
  children: [
    Container(width: 100, height: 50, color: Colors.green),
    Container(width: 100, height: 50, color: Colors.yellow),
  ],
)
```

---

## 四、Flex vs Row/Column

| 特性 | Row / Column | Flex |
|------|--------------|------|
| 方向固定 | 是 | 可自定义 |
| 灵活性 | 一般 | 更高 |
| 对齐方式 | 有限 | 更丰富 |
| 适用场景 | 简单水平/垂直布局 | 复杂布局、需要自定义对齐方式 |

---

## 五、Flex 的高级用法：Expanded 和 Flexible

### 1. **Expanded**
- 让子组件占据剩余空间。
- 适用于 `Row` 或 `Column` 中。
- 示例：
```dart
Row(
  children: [
    Expanded(child: Text('Left')),
    Expanded(child: Text('Right')),
  ],
)
```

### 2. **Flexible**
- 类似于 `Expanded`，但可以设置 `flex` 属性来控制比例。
- 示例：
```dart
Row(
  children: [
    Flexible(flex: 1, child: Text('Left')),
    Flexible(flex: 2, child: Text('Right')),
  ],
)
```

---

## 六、总结

| 组件 | 用途 | 说明 |
|------|------|------|
| `Row` | 水平排列子组件 | 简单水平布局 |
| `Column` | 垂直排列子组件 | 简单垂直布局 |
| `Flex` | 弹性布局 | 更灵活，支持对齐和方向控制 |
| `Expanded` | 占据剩余空间 | 用于 `Row` 或 `Column` |
| `Flexible` | 控制比例 | 更细粒度的空间分配 |

---

如果你有具体的布局需求（比如左右分栏、上下结构、居中等），我可以帮你写出对应的代码示例 😊