目 录
- 前言
- [Stack 控件概论](#Stack 控件概论)
- 层叠的核心原则：画家算法
- 对齐与定位 (Alignment vs Positioned)
- [4.1 Alignment：整体对齐](#4.1 Alignment：整体对齐)
- [4.2 Positioned：绝对定位的艺术](#4.2 Positioned：绝对定位的艺术)
- [Stack 布局计算流程图](#Stack 布局计算流程图)
- [Positioned 属性对照表](#Positioned 属性对照表)
- [Stack 业务组件关系 UML 图](#Stack 业务组件关系 UML 图)
- 鸿蒙实战：构建带渐变遮罩的卡片布局
- 总结
前言
在 UI 设计的进阶之路中，线性布局（Row/Column）解决的是组件的"并列"问题，而 Stack (层叠布局) 解决的则是组件的"深度"问题。想象一下，如果你想在一个精美的视频封面图上贴一个"热播"标签，或者在一个图片背景上悬浮一个搜索框，单纯的行列排布将无能为力。这时，我们需要引入三维空间的思维，让组件在垂直于屏幕的方向上进行重叠。
在适配 HarmonyOS NEXT 的多元化界面（如智慧屏、车载中控、移动终端）时，层叠布局是构建复杂视觉层次的关键。它能让我们在有限的屏幕空间内，通过遮罩、悬浮窗、水印等设计元素，大幅提升应用的视觉丰富度。本文将带你深度剖析 Stack 控件的层叠逻辑，探索 Positioned 绝对定位的精准美学，助你在鸿蒙系统的方寸之间，构建出极具纵深感的界面盛宴。
Stack 控件概论
Stack 控件是 Flutter 中处理重叠关系的基础容器。它允许你将其子组件按顺序堆叠。默认情况下，先放入 children 列表的组件处于最底层，后放入的则逐层向上叠加。这种"后发制人"的逻辑，确保了顶层交互组件（如按钮、标签）始终处于可见状态。
层叠的核心原则：画家算法
Stack 的渲染逻辑类似于画家的创作过程：
- 先画背景：首先绘制列表中的第一个子组件。
- 逐层覆盖：后续的子组件会覆盖在已绘制的内容之上。
- 坐标锁定 ：通过
alignment或Positioned确定每一个组件的绘制原点。
对齐与定位 (Alignment vs Positioned)
在 Stack 中，子组件分为两类：非定位组件 (Non-positioned) 和 定位组件 (Positioned)。
4.1 Alignment：整体对齐
如果子组件没有被 Positioned 包裹，它们会根据 Stack 的 alignment 属性进行整体对齐。
dart
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）进行精准定位。
dart
Positioned(
right: 10,
bottom: 10,
child: FloatingActionButton(...), // 固定在右下角
)Stack 布局计算流程图
下图展示了 Stack 如何平衡不同类型子组件的尺寸与位置：
Stack 开始布局
查找所有非定位组件
根据非定位组件最大尺寸确定 Stack 尺寸
查找所有 Positioned 定位组件
根据 top/left/right/bottom 计算定位组件坐标
按列表顺序逐层光栅化绘制
后加入的组件覆盖在上方
屏幕呈现重叠效果
Positioned 属性对照表
为了更加合理的说明内容，下表总结了精准定位的关键参数：
| 属性 | 功能描述 | 配合参数 | 推荐场景 |
|---|---|---|---|
left / right |
水平边界距离 | 同时设置可拉伸宽度 | 顶部搜索栏、通屏遮罩 |
top / bottom |
垂直边界距离 | 同时设置可拉伸高度 | 底部状态条、顶部标签 |
width / height |
显式指定尺寸 | 优先级高于边界计算 | 固定大小的徽章 (Badge) |
Stack 业务组件关系 UML 图
展示 Stack、Positioned 与 Alignment 之间的逻辑协作关系：
Contains
Decorates
Uses for Default
Constrained by
Stack
+Alignment alignment
+StackFit fit
+List children
Positioned
+double left
+double top
+double width
+double height
Alignment
+double x
+double y
<<Interface>>
Widget
鸿蒙实战：构建带渐变遮罩的卡片布局
在鸿蒙视频应用或画报中，常见的封面图设计如下：
dart
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