目 录

1. 前言
2. Stack 控件概论
3. 层叠的核心原则：画家算法
4. 对齐与定位 (Alignment vs Positioned)
   • 4.1 Alignment：整体对齐
   • 4.2 Positioned：绝对定位的艺术
5. Stack 布局计算流程图
6. Positioned 属性对照表
7. Stack 业务组件关系 UML 图
8. 鸿蒙实战：构建带渐变遮罩的卡片布局
9. 总结

---

前言

在 UI 设计的进阶之路中，线性布局（Row/Column）解决的是组件的“并列”问题，而 Stack (层叠布局) 解决的则是组件的“深度”问题。想象一下，如果你想在一个精美的视频封面图上贴一个“热播”标签，或者在一个图片背景上悬浮一个搜索框，单纯的行列排布将无能为力。这时，我们需要引入三维空间的思维，让组件在垂直于屏幕的方向上进行重叠。

在适配 HarmonyOS NEXT 的多元化界面（如智慧屏、车载中控、移动终端）时，层叠布局是构建复杂视觉层次的关键。它能让我们在有限的屏幕空间内，通过遮罩、悬浮窗、水印等设计元素，大幅提升应用的视觉丰富度。本文将带你深度剖析 Stack 控件的层叠逻辑，探索 Positioned 绝对定位的精准美学，助你在鸿蒙系统的方寸之间，构建出极具纵深感的界面盛宴。

---

---

---

Stack 控件概论

Stack 控件是 Flutter 中处理重叠关系的基础容器。它允许你将其子组件按顺序堆叠。默认情况下，先放入 children 列表的组件处于最底层，后放入的则逐层向上叠加。这种“后发制人”的逻辑，确保了顶层交互组件（如按钮、标签）始终处于可见状态。

---

层叠的核心原则：画家算法

Stack 的渲染逻辑类似于画家的创作过程：

1. 先画背景：首先绘制列表中的第一个子组件。
2. 逐层覆盖：后续的子组件会覆盖在已绘制的内容之上。
3. 坐标锁定：通过 alignment 或 Positioned 确定每一个组件的绘制原点。

---

对齐与定位 (Alignment vs Positioned)

在 Stack 中，子组件分为两类：非定位组件 (Non-positioned) 和 定位组件 (Positioned)。

4.1 Alignment：整体对齐

如果子组件没有被 Positioned 包裹，它们会根据 Stack 的 alignment 属性进行整体对齐。

Stack(
  alignment: Alignment.center,
  children: [
    CircleAvatar(radius: 50, backgroundColor: Colors.blue),
    Icon(Icons.star, color: Colors.white), // 自动居中叠加在圆圈内
  ],
)

4.2 Positioned：绝对定位的艺术

当子组件被 Positioned 包装后，它可以相对于 Stack 的四个边界（top, bottom, left, right）进行精准定位。

Positioned(
  right: 10,
  bottom: 10,
  child: FloatingActionButton(...), // 固定在右下角
)

---

Stack 布局计算流程图

下图展示了 Stack 如何平衡不同类型子组件的尺寸与位置：

---

Positioned 属性对照表

为了更加合理的说明内容，下表总结了精准定位的关键参数：

属性	功能描述	配合参数	推荐场景
left / right	水平边界距离	同时设置可拉伸宽度	顶部搜索栏、通屏遮罩
top / bottom	垂直边界距离	同时设置可拉伸高度	底部状态条、顶部标签
width / height	显式指定尺寸	优先级高于边界计算	固定大小的徽章 (Badge)

---

Stack 业务组件关系 UML 图

展示 Stack、Positioned 与 Alignment 之间的逻辑协作关系：

---

鸿蒙实战：构建带渐变遮罩的卡片布局

在鸿蒙视频应用或画报中，常见的封面图设计如下：

Stack(
  children: [
    // 1. 底层大图
    Image.network('banner.jpg', fit: BoxFit.cover),
    // 2. 渐变遮罩 (防止白色字体在浅色图中看不清)
    Positioned.fill(
      child: DecoratedBox(
        decoration: BoxDecoration(
          gradient: LinearGradient(
            begin: Alignment.topCenter,
            end: Alignment.bottomCenter,
            colors: [Colors.transparent, Colors.black87],
          ),
        ),
      ),
    ),
    // 3. 底部文字信息
    Positioned(
      bottom: 20,
      left: 20,
      child: Text("分布式全场景协同", style: TextStyle(color: Colors.white, fontSize: 18)),
    ),
  ],
)

---

总结

Stack 控件是 Flutter 布局逻辑中的“空间折叠大师”。通过打破二维排版的束缚，它赋予了应用极具深度的视觉层级。在 HarmonyOS NEXT 的开发实践中，熟练掌握 Stack 配合 Positioned 的定位技巧，不仅能实现复杂的图形重叠效果，更能通过遮罩与悬浮元素的科学排布，提升界面的沉浸感与专业感。

层叠不是简单的堆砌，而是对视觉注意力的精准引导。在掌握了三维层叠的艺术后，下一篇我们将迎来布局骨架的最后一位核心成员——Flex (弹性布局)，学习如何让你的 UI 在不同比例的屏幕间自由伸缩。

欢迎加入开源鸿蒙跨平台社区：https://openharmonycrossplatform.csdn.net