arkUI：层叠布局（Stack）

1 主要内容说明

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

2 相关内容

2.1 层叠布局（Stack）

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

• 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 }) {

      // 第一列，组件1
      Column() {
        Text("组件1")
          .fontSize(22) // 设置文本字体大小为 22
      }
      .width("80%") // 设置列的宽度为容器宽度的 80%
      .backgroundColor("#86c5e3") // 设置背景色为浅蓝色
      .height("80%") // 设置列的高度为容器高度的 80%
      .borderRadius({ topLeft: 30, topRight: 30 }) // 设置圆角，上左和上右分别为 30

      // 第二列，组件2
      Column() {
        Text("组件2")
          .fontSize(22) // 设置文本字体大小为 22
      }
      .width("60%") // 设置列的宽度为容器宽度的 60%
      .backgroundColor("#92d6cc") // 设置背景色为浅绿色
      .height("60%") // 设置列的高度为容器高度的 60%
      .borderRadius(30) // 设置圆角为 30

      // 第三列，组件3
      Column() {
        Text("组件3")
          .fontSize(22) // 设置文本字体大小为 22
      }
      .width("40%") // 设置列的宽度为容器宽度的 40%
      .backgroundColor("#f5dc62") // 设置背景色为黄色
      .height("40%") // 设置列的高度为容器高度的 40%
      .borderRadius({ topLeft: 30, topRight: 30 }) // 设置圆角，上左和上右分别为 30

      // 第四列，组件4
      Column() {
        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.定位日期