Flutter流式布局（Wrap、Flow）

封面图 • 2025-10-27 • Flutter

在 Flutter 中，**流式布局（Flow Layout）** 是一种灵活的布局方式，它允许子组件按照一定的规则进行排列，而不是像 `Row` 或 `Column` 那样严格地水平或垂直排列。Flutter 提供了两种主要的流式布局组件：**`Wrap`** 和 **`Flow`**。

---

## 一、`Wrap` 布局

### ✅ 作用：
`Wrap` 是一个 **弹性布局** 组件，用于将子组件 **按行排列**，当一行放不下时会自动换行。它类似于 HTML 中的 `flex-wrap: wrap`。

### 📌 特点：
- 自动换行
- 可设置主轴和交叉轴方向
- 支持对齐方式（如 `start`, `center`, `end`, `spaceBetween`, `spaceAround`, `spaceEvenly`）
- 适合标签、按钮组等需要自动换行的场景

### 🧾 示例代码：

```dart
Wrap(
  spacing: 10.0, // 水平间距
  runSpacing: 10.0, // 行间距
  alignment: WrapAlignment.center, // 主轴对齐方式
  children: List.generate(20, (index) {
    return Container(
      padding: EdgeInsets.all(10),
      color: Colors.blue,
      child: Text('Item $index'),
    );
  }),
)
```

### 📌 常用属性：

| 属性 | 说明 |
|------|------|
| `spacing` | 子组件之间的水平间距 |
| `runSpacing` | 子组件之间的垂直间距 |
| `alignment` | 主轴对齐方式（`WrapAlignment`） |
| `crossAxisAlignment` | 交叉轴对齐方式（`WrapCrossAlignment`） |

---

## 二、`Flow` 布局

### ✅ 作用：
`Flow` 是一个更底层、更灵活的布局方式，它允许你 **自定义每个子组件的位置**，非常适合实现一些复杂的布局效果，例如卡片翻转、瀑布流等。

### 📌 特点：
- 需要自定义 `FlowDelegate` 来控制子组件的位置
- 更加灵活但复杂
- 适用于需要精细控制子组件位置的场景

### 🧾 示例代码：

```dart
Flow(
  delegate: MyFlowDelegate(),
  children: List.generate(10, (index) {
    return Container(
      width: 100,
      height: 100,
      color: Colors.green,
      child: Center(child: Text('Item $index')),
    );
  }),
)
```

### 自定义 `FlowDelegate`：

```dart
class MyFlowDelegate extends FlowDelegate {
  @override
  void paintChildren(FlowPaintingContext context) {
    for (int i = 0; i < context.childCount; i++) {
      final child = context.children[i];
      // 设置每个子组件的位置
      context.paintChild(child, Offset(i * 110, i * 110));
    }
  }

@override
  bool shouldRepaint(covariant FlowDelegate oldDelegate) {
    return false;
  }
}
```

### 📌 注意事项：
- `Flow` 不支持自动换行，需要手动计算每个子组件的位置。
- 使用 `Flow` 时要注意性能问题，尤其是大量子组件时。

---

## 三、`Wrap` vs `Flow`

| 特性 | `Wrap` | `Flow` |
|------|--------|--------|
| 自动换行 | ✅ | ❌ |
| 灵活性 | ⚠️ | ✅ |
| 易用性 | ✅ | ❌ |
| 适用场景 | 标签、按钮组等 | 卡片翻转、瀑布流等复杂布局 |

---

## 四、使用建议

- 如果你需要 **自动换行** 的布局（比如标签云），优先使用 `Wrap`。
- 如果你需要 **精确控制子组件的位置**（比如自定义布局），使用 `Flow`。
- 对于更高级的布局需求（如瀑布流、棋盘布局），可以结合 `Flow` 和 `CustomScrollView` 实现。

---

如果你有具体的布局需求，我可以帮你设计对应的代码示例！是否需要我提供某个特定场景的实现？