Flutter空间适配（FittedBox）

封面图 • 2025-10-29 • Flutter

在 Flutter 中，**`FittedBox`** 是一个非常有用的布局组件，用于在有限的空间中**按比例缩放内容**，使其适应其父容器的大小。它通常用于图片、图标等需要保持宽高比的组件。

---

## ✅ 一、什么是 FittedBox？

`FittedBox` 是一个 `SingleChildScrollView` 的子类（实际上是一个 `LayoutBuilder`），它会根据其 **父容器的尺寸** 来**自动缩放其子组件**，以确保子组件能够完整地显示在父容器中。

> 它的核心作用是：**按比例缩放子组件，使其适应父容器的大小，同时保持宽高比不变**。

---

## ✅ 二、FittedBox 的使用方式

```dart
FittedBox(
  child: YourWidget(),
)
```

或者指定缩放方式：

```dart
FittedBox(
  fit: BoxFit.cover, // 控制缩放方式
  child: Image.asset('assets/image.png'),
)
```

---

## ✅ 三、常用属性说明

| 属性 | 类型 | 说明 |
|------|------|------|
| `child` | Widget | 需要缩放的子组件 |
| `fit` | BoxFit | 缩放方式，默认为 `BoxFit.contain` |
| `alignment` | AlignmentGeometry | 对齐方式，默认为 `Alignment.center` |

---

## ✅ 四、BoxFit 常见取值

| BoxFit | 说明 |
|--------|------|
| `BoxFit.fill` | 拉伸填充，可能变形 |
| `BoxFit.cover` | 覆盖，保持比例，裁剪 |
| `BoxFit.contain` | 包含，保持比例，留白 |
| `BoxFit.none` | 不缩放 |
| `BoxFit.scaleDown` | 按比例缩小，不超过原图尺寸 |

---

## ✅ 五、示例代码

### 示例 1：简单使用 FittedBox 显示图片

```dart
Container(
  width: 200,
  height: 100,
  color: Colors.grey[200],
  child: FittedBox(
    fit: BoxFit.cover,
    child: Image.asset('assets/landscape.jpg'),
  ),
)
```

> 这个例子中，图片会被缩放并覆盖整个容器，保持比例，可能会被裁剪。

---

### 示例 2：文本适配

```dart
Container(
  width: 200,
  height: 100,
  color: Colors.yellow,
  child: FittedBox(
    fit: BoxFit.scaleDown,
    child: Text(
      '这是一段很长的文字，会根据容器大小进行缩放',
      style: TextStyle(fontSize: 24),
    ),
  ),
)
```

> 文本会根据容器大小进行缩放，但不会超过原始大小。

---

## ✅ 六、适用场景

- 图片、图标等需要保持比例的组件
- 动态文字内容，希望自适应容器大小
- 在固定宽度或高度的容器中展示内容

---

## ✅ 七、注意事项

- `FittedBox` 只能包裹一个子组件。
- 如果你希望多个组件一起缩放，可以将它们放在一个 `Row` 或 `Column` 中，再包裹 `FittedBox`。
- `FittedBox` 会强制子组件进入一个 `LayoutBuilder`，所以不能直接嵌套在 `ListView` 等滚动组件中（除非配合 `Scrollable` 使用）。

---

## ✅ 八、对比其他适配组件

| 组件 | 用途 | 特点 |
|------|------|------|
| `FittedBox` | 按比例缩放子组件 | 保持宽高比 |
| `Expanded` / `Flexible` | 控制子组件占用空间 | 不改变子组件大小 |
| `AspectRatio` | 设置固定宽高比 | 不缩放 |
| `Image` + `BoxFit` | 图片缩放 | 和 FittedBox 类似，但只能用于图片 |

---

如果你有具体的应用场景（比如图片、文本、图标等），我可以帮你写更具体的示例代码 😊