Flutter层叠布局（Stack、Positioned）

封面图 • 2025-10-27 • Flutter

在 Flutter 中，**层叠布局（Stack）** 是一种将多个子组件按照层叠的方式排列的布局方式。它类似于 CSS 中的 `position: absolute` 布局，允许你将子组件定位到父容器的特定位置。

Flutter 中实现层叠布局的主要组件是：

- `Stack`
- `Positioned`

---

## 一、`Stack` 组件

`Stack` 是一个用于层叠布局的容器，它允许其子组件按照“堆叠”的方式排列，也就是说，后面的组件会覆盖前面的组件。

### 示例代码：
```dart
Stack(
  children: [
    Container(color: Colors.red, width: 200, height: 200),
    Container(color: Colors.green, width: 150, height: 150),
    Container(color: Colors.blue, width: 100, height: 100),
  ],
)
```

> **注意**：默认情况下，`Stack` 中的所有子组件都会被放置在左上角（即 `(0, 0)`），不会自动调整大小或位置。

---

## 二、`Positioned` 组件

`Positioned` 是一个用于在 `Stack` 中定位子组件的组件。它可以设置 `left`, `right`, `top`, `bottom` 等属性，来控制子组件的位置。

> **注意**：`Positioned` 必须嵌套在 `Stack` 内部使用。

### 示例代码：
```dart
Stack(
  children: [
    Container(color: Colors.red, width: 200, height: 200),
    Positioned(
      left: 50,
      top: 50,
      child: Container(color: Colors.green, width: 100, height: 100),
    ),
    Positioned(
      right: 30,
      bottom: 30,
      child: Container(color: Colors.blue, width: 80, height: 80),
    ),
  ],
)
```

---

## 三、`Stack` 的常用属性

| 属性 | 说明 |
|------|------|
| `alignment` | 设置子组件的对齐方式（如 `Alignment.center`） |
| `textDirection` | 文本方向（用于对齐） |
| `clipBehavior` | 控制子组件是否裁剪（如 `Clip.none` 或 `Clip.hardEdge`） |

### 示例：设置 `alignment`
```dart
Stack(
  alignment: Alignment.center,
  children: [
    Container(color: Colors.red, width: 200, height: 200),
    Container(color: Colors.green, width: 100, height: 100),
  ],
)
```

---

## 四、`Positioned` 的常用属性

| 属性 | 说明 |
|------|------|
| `left` | 距离左边的距离 |
| `right` | 距离右边的距离 |
| `top` | 距离顶部的距离 |
| `bottom` | 距离底部的距离 |
| `width` | 子组件的宽度（可选） |
| `height` | 子组件的高度（可选） |

> 如果同时设置 `left` 和 `right`，那么 `width` 会被忽略；同理，`top` 和 `bottom` 会覆盖 `height`。

---

## 五、层叠布局的常见应用场景

- 图标叠加（如头像 + 状态指示）
- 按钮上的动画效果
- 弹窗/提示框的定位
- 自定义 UI 布局（如卡片层叠）

---

## 六、完整示例

```dart
import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Flutter Stack Example')),
        body: Stack(
          alignment: Alignment.center,
          children: [
            Container(
              color: Colors.grey[200],
              width: 300,
              height: 300,
            ),
            Positioned(
              left: 40,
              top: 40,
              child: Container(
                color: Colors.red,
                width: 100,
                height: 100,
              ),
            ),
            Positioned(
              right: 40,
              bottom: 40,
              child: Container(
                color: Colors.blue,
                width: 80,
                height: 80,
              ),
            ),
          ],
        ),
      ),
    );
  }
}
```

---

## 七、总结

| 组件 | 功能 |
|------|------|
| `Stack` | 实现层叠布局的容器 |
| `Positioned` | 在 `Stack` 中定位子组件 |

通过 `Stack` 和 `Positioned`，你可以灵活地实现复杂的 UI 布局，尤其适合需要绝对定位和层叠显示的场景。

如果你有具体的布局需求，可以告诉我，我可以帮你写对应的代码 😊