arkUI：层叠布局（Stack）

1 主要内容说明

在 ArkUI 中，Stack 布局是一个容器，它用于将多个子组件堆叠在一起。Stack 布局常用于实现垂直或水平的层叠效果。它的特点是所有的子组件都在同一层级上，因此会在同一空间内覆盖和堆叠。可以使用对齐属性来控制子组件在堆叠容器中的排列方式。用alignContent：来设置子组件的对齐方式。

2 相关内容

2.1 层叠布局（Stack）

层叠布局用alignContent：来设置子组件的对齐方式，对齐方式常用有9种，如下表：

开始位	中位	结尾位
TopStar（上左）	Top（上）	TopEnd（上右）
Start（左）	Center（居中）	End（右）
BottomStart（下左）	Bottom（下）	BottomEnd（下右）

• Stack 布局是将所有子组件层叠显示的，组件间的位置相互叠加。
• 可以通过设置 alignContent 来控制子组件的排列方式。
• 不同于 Flex 布局，Stack 布局中的子组件不在水平或垂直方向上进行排列，而是按顺序堆叠 。

2.1.1 源码1的相关说明

源码1使用用了 Stack 和 Column 布局来创建一个堆叠布局，组件根据其顺序依次堆叠，并应用不同的背景颜色、宽度、高度和圆角。Stack 布局是一个容器，用于将多个子组件垂直堆叠。在这个例子中，alignContent: Alignment.Bottom 设置了子组件在堆叠时对齐到底部，意味着最后一个子组件（组件4）会紧贴容器的底部，其他子组件则会按顺序堆叠在上面。

2.1.2 源码1 （层叠布局）

@Entry
@Component
struct Page08Stack {build() {// Stack 布局，组件将垂直堆叠在一起，alignContent 设置为 Alignment.Bottom，意味着堆叠的内容会对齐到底部Stack({ alignContent: Alignment.Bottom }) {// 第一列，组件1Column() {Text("组件1").fontSize(22) // 设置文本字体大小为 22}.width("80%") // 设置列的宽度为容器宽度的 80%.backgroundColor("#86c5e3") // 设置背景色为浅蓝色.height("80%") // 设置列的高度为容器高度的 80%.borderRadius({ topLeft: 30, topRight: 30 }) // 设置圆角，上左和上右分别为 30// 第二列，组件2Column() {Text("组件2").fontSize(22) // 设置文本字体大小为 22}.width("60%") // 设置列的宽度为容器宽度的 60%.backgroundColor("#92d6cc") // 设置背景色为浅绿色.height("60%") // 设置列的高度为容器高度的 60%.borderRadius(30) // 设置圆角为 30// 第三列，组件3Column() {Text("组件3").fontSize(22) // 设置文本字体大小为 22}.width("40%") // 设置列的宽度为容器宽度的 40%.backgroundColor("#f5dc62") // 设置背景色为黄色.height("40%") // 设置列的高度为容器高度的 40%.borderRadius({ topLeft: 30, topRight: 30 }) // 设置圆角，上左和上右分别为 30// 第四列，组件4Column() {Text("组件4").fontSize(22) // 设置文本字体大小为 22}.width("20%") // 设置列的宽度为容器宽度的 20%.backgroundColor("#ff920bc8") // 设置背景色为紫色.height("20%") // 设置列的高度为容器高度的 20%}.height(300) // 设置 Stack 容器的高度为 300.width('100%') // 设置 Stack 容器的宽度为 100%（占满整个屏幕宽度）.backgroundColor("#ff6ce054") // 设置 Stack 容器的背景色为浅橙色}
}

2.1.3 源码1运行效果

2.1.3.1 当alignContent: Alignment.Bottom

2.1.3.2 当alignContent: Alignment.BottomStart

2.1.3.3 当alignContent: Alignment.BottomEnd

2.1.3.4 当alignContent: Alignment.Center

2.1.3.5 当alignContent: Alignment.Start

2.1.3.6 当alignContent: Alignment.End

2.1.3.7 当alignContent: Alignment.TopStart

2.1.3.8 当alignContent: Alignment.Top

2.1.3.9 当alignContent: Alignment.TopEnd

3.结语

图层相关的可以用zIndex来决定图层，哪个显示前，哪个显示后。不过本文例子不适合使用，如组件3使用zIndex后就会把组件4覆盖了。
由于笔者的能力有限，创作的内容有所不足在所难免，也敬请读者包涵和指出，万分感谢！

4.定位日期