HarmonyOS ArkTS 层叠布局（Stack）详解
在 ArkTS 的声明式 UI 开发里，层叠布局（Stack） 是一种非常灵活的布局方式，它允许你把多个组件“堆叠”在同一个区域中 —— 像图层一样，一层叠着一层。 这种布局在实现 覆盖式 UI、浮层效果、卡片叠加、背景与前景组合 等场景下非常有用。华为开发者
一、什么是 Stack 布局？
简单来说：
- Stack 是一个容器：你把内容放进它，它不会像 Row/Column 那样在一个方向排开；
- Stack 直接把子组件 按照添加顺序叠叠在一起；
- 后声明的组件会 覆盖在前面的组件之上；
这就像 Photoshop 里的图层叠加一样。华为开发者
Stack 的特性：
✔ 能够将元素叠加在同一区域 ✔ 每个子组件都可以独立设置位置 ✔ 支持简单对齐和更精细的定位 ✔ 适合做浮层、卡片叠加、背景叠前景等效果华为开发者
二、Stack 的基本用法
➤ 代码结构
Stack 的语法和大多数布局一样，直接在 build() 中写一个 Stack 区块，把子组件放进去：
Stack() {
// 放入一堆子组件，顺序决定叠加层级
Image(...)
Text("Hello Stack")
Button("Click Me")
}
在这个例子里：
Image在最底层Text在中间层Button在最上层
这种默认叠加顺序是 Stack 的核心行为。华为开发者
三、对子元素位置的控制
默认对齐
Stack 有一个非常常用的属性叫做 alignContent：
Stack({ alignContent: Alignment.Center }) {
...
}
这个 alignContent 控制的是 整体堆叠区域里的对齐方式，比如让所有内容：
- 靠左上
- 居中
- 靠右下
等不同的位置。常用对齐值包括：
| 对齐值 | 说明 |
|---|---|
TopStart | 左上对齐 |
Center | 居中对齐 |
BottomEnd | 右下对齐 |
这类似于把“整层”整体移动到某个方向。腾讯云
四、Layer（层级）控制：zIndex
Stack 的默认覆盖规则是 后出现的组件覆盖前面的组件，但有时候你想让某个组件“更靠上” —— 这时就用 zIndex()。
✔ zIndex 示例
Stack() {
Box().backgroundColor('#f00').width(200).height(200).zIndex(1)
Box().backgroundColor('#0f0').width(150).height(150).zIndex(2)
Box().backgroundColor('#00f').width(100).height(100).zIndex(3)
}
在这个例子里：
- 蓝色（zIndex:3）最高
- 绿色（zIndex:2）次之
- 红色（zIndex:1）在最底层
即使它们尺寸不一样，zIndex 越大越显眼、越在上层。腾讯云
zIndex 很像 CSS 的层级规则，它让你更精细地控制叠加顺序，而不只是依赖代码顺序。腾讯云
五、Stack 常见场景与技巧
Stack 虽然看起来简单，它真正有用的时候往往不是最底层叠，而是做一些层次丰富的 UI 结构：
1) 背景 + 前景
你可以把一张全屏图片放在底部，再叠加一些文字按钮，就像一个传统的欢迎页：
Stack() {
Image("bg.png").width('100%').height('100%')
Column() {
Text("Welcome")
Button("Get Started")
}.align(Alignment.Center) // 让文字按钮居中
}
底图铺满屏幕，前景内容居中出现 —— 很常见的启动页结构。华为开发者
2) 固定定位元素
Stack 的子组件支持 position() 来 精确定位：
Stack() {
Image("avatar.png").position({ x: 20, y: 20 })
Text("Username").position({ x: 20, y: 100 })
}
这特别适合做自定义浮层提示或通知卡片。腾讯云
3) Z 叠加卡片视觉
你可以通过组合不同大小的卡片来做层叠阴影效果，这种视觉在很多卡片式 UI、堆叠菜单、分享卡片都能见到：
Stack() {
Card(...).zIndex(1)
Card(...).zIndex(2)
Card(...).zIndex(3)
}
这种层叠不仅漂亮，还能通过 zIndex 和嵌套实现动画过渡。腾讯云
六、细节与注意点
子元素叠加并不等于可见
如果一个子元素尺寸完全覆盖了前面的所有元素（尤其是没有透明度），你可能看不到下层内容。这并不是 Stack 的 bug，而是“层叠规则决定的” —— 大尺寸高 zIndex 的层会遮住下面的层。腾讯云
要想看到全部层，可以通过：
- 使用透明度/阴影
- 控制尺寸
- 或者使用
align()和position()调整位置
来让层看起来“有重叠效果”而不是“只看到最上面那一层”。腾讯云
七、总结
Stack 是一种非常灵活的布局，它不是线性，而是叠加式的：
✔ 按顺序堆叠组件 ✔ 后放的组件默认覆盖前面 ✔ alignContent 可以控制整体对齐 ✔ zIndex 可以微调元素层级 ✔ 支持 position 定位精确布局
这种布局最适合用于：
覆盖式 UI 弹层/卡片叠加 背景 + 前景组合 精确定位组件
掌握 Stack 后，你在 HarmonyOS 的 ArkTS UI 开发中能够轻松做出很多漂亮且层次感丰富的界面。
