Flutter布局类组件简介

封面图 • 2025-10-26 • Flutter

在 Flutter 中，布局是构建用户界面的基础。Flutter 提供了多种布局类组件（Layout Widgets），用于控制子组件的排列方式、大小、对齐等。这些组件属于 `flutter/material.dart` 或 `flutter/widgets.dart` 中的一部分。

以下是 Flutter 中常见的**布局类组件**及其简介：

---

## 1. **Container**
- **功能**：用于包裹其他组件，并为其设置边距、填充、背景色、边框、阴影等。
- **常用属性**：
  - `padding`：内边距
  - `margin`：外边距
  - `color` / `decoration`：背景颜色或装饰
  - `alignment`：子组件的对齐方式
- **示例**：
  ```dart
  Container(
    padding: EdgeInsets.all(16),
    color: Colors.blue,
    child: Text("Hello"),
  )
  ```

---

## 2. **Row**
- **功能**：水平排列子组件。
- **特点**：
  - 子组件按从左到右顺序排列。
  - 可以使用 `mainAxisAlignment` 控制主轴对齐方式。
  - 使用 `crossAxisAlignment` 控制交叉轴对齐方式。
- **示例**：
  ```dart
  Row(
    mainAxisAlignment: MainAxisAlignment.center,
    children: [
      Text("Left"),
      Text("Right"),
    ],
  )
  ```

---

## 3. **Column**
- **功能**：垂直排列子组件。
- **特点**：
  - 子组件从上到下排列。
  - 同样支持 `mainAxisAlignment` 和 `crossAxisAlignment`。
- **示例**：
  ```dart
  Column(
    crossAxisAlignment: CrossAxisAlignment.center,
    children: [
      Text("Top"),
      Text("Bottom"),
    ],
  )
  ```

---

## 4. **Stack**
- **功能**：将多个子组件堆叠在一起，可以指定它们的位置。
- **特点**：
  - 使用 `Positioned` 组件来定位子组件。
  - 可以通过 `alignment` 控制默认位置。
- **示例**：
  ```dart
  Stack(
    alignment: Alignment.center,
    children: [
      Container(color: Colors.red, width: 100, height: 100),
      Container(color: Colors.blue, width: 50, height: 50),
    ],
  )
  ```

---

## 5. **ListView**
- **功能**：滚动列表视图，用于显示大量可滚动的内容。
- **特点**：
  - 支持垂直和水平滚动。
  - 可以使用 `ListView.builder` 构建动态列表。
- **示例**：
  ```dart
  ListView(
    children: List.generate(20, (index) => Text("Item $index")),
  )
  ```

---

## 6. **GridView**
- **功能**：网格布局，将子组件按行列排列。
- **特点**：
  - 支持固定列数或自动适应屏幕宽度。
  - 常用于图片展示等场景。
- **示例**：
  ```dart
  GridView.count(
    crossAxisCount: 2,
    children: List.generate(10, (index) => Container(color: Colors.primaries[index % 10])),
  )
  ```

---

## 7. **Flex / Row / Column 的父类**
- **功能**：`Row` 和 `Column` 是 `Flex` 的子类，`Flex` 是更通用的布局组件。
- **特点**：
  - 可以通过 `direction` 设置为横向或纵向。
  - 使用 `mainAxisAlignment` 和 `crossAxisAlignment` 控制对齐。
- **示例**：
  ```dart
  Flex(
    direction: Axis.horizontal,
    children: [Text("Left"), Text("Right")],
  )
  ```

---

## 8. **Expanded / Flexible**
- **功能**：用于在 `Row` 或 `Column` 中分配空间。
- **特点**：
  - `Expanded` 会尽可能扩展其子组件的空间。
  - `Flexible` 可以设置弹性比例。
- **示例**：
  ```dart
  Row(
    children: [
      Expanded(child: Container(color: Colors.red)),
      Expanded(child: Container(color: Colors.blue)),
    ],
  )
  ```

---

## 9. **SizedBox**
- **功能**：设置一个固定大小的盒子。
- **特点**：
  - 用于强制子组件具有特定尺寸。
- **示例**：
  ```dart
  SizedBox(
    width: 100,
    height: 50,
    child: Text("Fixed size"),
  )
  ```

---

## 10. **Align**
- **功能**：将子组件对齐到指定方向。
- **特点**：
  - 可以设置 `alignment` 属性。
- **示例**：
  ```dart
  Align(
    alignment: Alignment.topRight,
    child: Text("Top Right"),
  )
  ```

---

## 11. **Padding**
- **功能**：给子组件添加内边距。
- **特点**：
  - 简化 `Container` 的 `padding` 属性。
- **示例**：
  ```dart
  Padding(
    padding: EdgeInsets.all(16),
    child: Text("Padded text"),
  )
  ```

---

## 12. **Center**
- **功能**：将子组件居中显示。
- **特点**：
  - 等价于 `Align(alignment: Alignment.center)`。
- **示例**：
  ```dart
  Center(
    child: Text("Centered Text"),
  )
  ```

---

## 总结

| 组件名       | 功能                             | 适用场景                     |
|--------------|----------------------------------|------------------------------|
| `Container`  | 包裹组件并设置样式               | 通用布局容器                 |
| `Row`        | 水平排列                         | 行内元素布局                 |
| `Column`     | 垂直排列                         | 列式布局                     |
| `Stack`      | 堆叠布局                         | 图层叠加、定位               |
| `ListView`   | 可滚动列表                       | 长内容展示                   |
| `GridView`   | 网格布局                         | 图片墙、表格展示             |
| `Flex`       | 弹性布局（Row/Column的父类）     | 自定义方向布局               |
| `Expanded`   | 分配剩余空间                     | 在Row/Column中伸展           |
| `SizedBox`   | 固定大小盒子                     | 强制设定尺寸                 |
| `Align`      | 对齐子组件                       | 控制对齐方式                 |
| `Padding`    | 内边距                             | 简化容器内边距设置           |
| `Center`     | 居中显示                         | 快速居中组件                 |

---

如果你有具体的布局需求，我可以帮你选择合适的组件组合来实现！需要我帮你写一个具体例子吗？