31.Flutter 零基础入门（三十一）：Stack 与 Positioned —— 悬浮、角标与覆盖布局

Flutter 零基础入门（三十一）：Stack 与 Positioned ------ 悬浮、角标与覆盖布局

到目前为止，你写过的页面基本都是：

上下排列（Column）
左右排列（Row）
列表（ListView / GridView）

但真实 App 中，还有大量这样的 UI：

图片右上角的角标
悬浮在页面上的按钮
覆盖在图片上的文字
头像上的红点提醒

📌 这些布局，有一个共同点：

不是线性排列，而是"叠加"

这正是 Stack 的用武之地。

一、什么是 Stack？

一句话理解：

Stack = 可以让多个 Widget 叠在一起的容器

就像 Photoshop 的图层：

先放的在下面
后放的在上面

二、最简单的 Stack 示例

dart 复制代码

Stack(
  children: [
    Container(
      width: 200,
      height: 200,
      color: Colors.blue,
    ),
    Container(
      width: 100,
      height: 100,
      color: Colors.red,
    ),
  ],
)

效果：

红色在蓝色上面
完全重叠

📌 说明：

Stack 默认左上角对齐

三、Stack 的核心思想（非常重要）

记住这句话：

Stack 负责"叠加"
Positioned 负责"定位"

四、Positioned：精确控制位置

1️⃣ 基本用法

复制代码

Positioned(
  top: 10,
  right: 10,
  child: Container(
    width: 40,
    height: 40,
    color: Colors.red,
  ),
)

📌 可用属性：

top
bottom
left
right

2️⃣ 完整示例

复制代码

Stack(
  children: [
    Container(
      width: 200,
      height: 200,
      color: Colors.blue,
    ),
    Positioned(
      top: 10,
      right: 10,
      child: Container(
        width: 40,
        height: 40,
        color: Colors.red,
      ),
    ),
  ],
)

这就是最经典的角标结构。

五、真实场景一：图片右上角角标

示例结构

复制代码

Stack(
  children: [
    Container(
      width: 120,
      height: 120,
      color: Colors.grey[300],
      child: Center(child: Text('图片')),
    ),
    Positioned(
      top: 6,
      right: 6,
      child: Container(
        padding: EdgeInsets.symmetric(horizontal: 6, vertical: 2),
        decoration: BoxDecoration(
          color: Colors.red,
          borderRadius: BorderRadius.circular(10),
        ),
        child: Text(
          'HOT',
          style: TextStyle(color: Colors.white, fontSize: 12),
        ),
      ),
    ),
  ],
)

📌 这是 电商 / 内容类 App 的标配。

六、真实场景二：头像红点提醒

复制代码

Stack(
  children: [
    CircleAvatar(
      radius: 30,
      backgroundColor: Colors.blue,
      child: Text('A'),
    ),
    Positioned(
      top: 2,
      right: 2,
      child: Container(
        width: 10,
        height: 10,
        decoration: BoxDecoration(
          color: Colors.red,
          shape: BoxShape.circle,
        ),
      ),
    ),
  ],
)

📌 常用于：

消息提醒
未读状态
在线状态

七、Stack 的 alignment 属性

如果你不想用 Positioned，也可以整体对齐：

复制代码

Stack(
  alignment: Alignment.bottomCenter,
  children: [
    Container(width: 200, height: 200, color: Colors.blue),
    Container(width: 80, height: 40, color: Colors.black),
  ],
)

📌 常用 alignment：

Alignment.center
Alignment.topRight
Alignment.bottomCenter

八、Stack 使用时的常见坑

❌ Stack 放在 Column 里不限制高度

❌ 忘记 Stack 默认左上对齐

❌ Positioned 写在 Stack 外

❌ 所有元素都用 Positioned（可读性差）

❌ Stack 嵌套过深

九、什么时候一定要用 Stack？

记住这 4 种情况：

✅ 角标

✅ 悬浮按钮

✅ 图片文字覆盖

✅ 多元素重叠

📌 如果不是"叠加"，不要滥用 Stack。

十、本篇你真正掌握了什么？

你已经学会：

Stack 的核心用途
Positioned 的精确定位
角标 / 红点实现方式
覆盖布局的正确思路

到这里为止：

你的 Flutter 布局能力已经达到"企业 UI 基础线"

十一、一句话总结

Row / Column 管排列
Stack / Positioned 管叠加

🔜 下一篇预告

《Flutter 零基础入门（三十二）：TextField 输入框 ------ 表单与用户输入必学》

下一篇我们将正式进入：

用户输入
表单页面
登录 / 搜索 / 编辑场景

🚀 从"展示页面"走向"交互页面"