鸿蒙初学者学习手册(HarmonyOSNext_API12)_应用开发UI设计（层叠布局 (Stack) ）

层叠布局

• 概述：是一种在屏幕上为元素预留显示区域的布局方式，它允许组件中的元素重叠。通过Stack容器组件实现，能够固定和层叠元素位置。在Stack容器中，子元素按照添加顺序依次入栈，其中后添加的子元素会覆盖先添加的子元素，从而实现元素的叠加效果。此外，这些子元素不仅可以叠加，还可以根据需要设置特定的位置。
• 层叠布局因其强大的页面层叠和精确定位能力，广泛应用于多种场景，展示广告、实现卡片层叠效果等。

基础示例代码

// 使用@Entry装饰器标记入口组件
// 使用@Component装饰器标记组件
@Entry
@Component
struct Page {
  // 构建方法，用于构建组件的UI
  build() {
    // 创建一个列容器
    Column(){
      // 创建一个堆叠布局，并在其中添加子组件
      Stack({ }) {
        // 创建一个列容器，并在其中添加一个文本组件
        Column(){
          Text("我是Column中的一个文本")
        }.width('90%')
        .height('100%')
        .backgroundColor('#ff58b87c')
        // 创建一个文本组件，并设置其样式
        Text("文本")
          .width('60%')
          .height('60%')
          .backgroundColor('#ffc3f6aa')
        // 创建一个按钮组件，并设置其样式
        Button('按钮"')
          .width('30%')
          .height('30%')
          .backgroundColor('#ff8ff3eb')
          .fontColor('#000')
      }.width('100%')
      .height(150)
      .margin(100)
    }
  }
}

层叠布局的对齐方式

通过alignContent参数实现位置的相对移动

// xxx.ets
/**
* StackExample组件的入口
* 该组件用于演示Stack布局的使用方法
*/
@Entry
@Component
struct StackExample {
 /**
  * 构建组件的UI结构
  * 本函数没有参数和返回值
  * 主要功能是创建一个Stack布局，并在其中添加多个Text组件，展示不同的布局和样式
  */
 build() {

   // 创建一个Stack布局，并设置其内容的对齐方式
   Stack({
     alignContent: Alignment.BottomStart//参数
   }) {

       // 添加第一个Text组件，设置其宽度、高度、背景色和对齐方式
       Text('Stack').width('90%').height('100%').backgroundColor('#e1dede')

       // 在Stack布局中添加第二个Text组件，同样设置其样式和布局
       Text('Item 1').width('80%').height('80%').backgroundColor(0xd2cab3)

       // 添加第三个Text组件，继续设置不同的样式和布局以展示Stack的特性
       Text('Item 2').width('70%').height('60%').backgroundColor(0xc1cbac)

     }.width('100%').height(150).margin({ top: 5 })
   }
}

除了Alignment以外还有通用属性

层叠布局的Z序控制

在Stack布局中，若需调整兄弟组件的堆叠顺序，可利用zindex属性。具体而言，z-index值较高的组件会覆盖并显示在z-index值较低的组件之上。因此，通过为组件分配不同的z-index值，你可以灵活地控制它们在Stack容器中的显示层级。
zIndex值越大，显示层级越高，zIndex值大的组件会覆盖在zIndex值小的组件上方。

// Page2.ets
/**
 * Page2组件的入口
 * 该组件用于演示Stack布局中多个Column组件的堆叠效果
 */
@Entry
@Component
struct Page2 {
  /**
   * 构建组件的UI结构
   * 本函数没有参数和返回值
   * 主要功能是创建一个Stack布局，并在其中添加三个Column组件，展示不同zIndex下的堆叠效果
   */
  build() {
    // 创建一个Stack布局，用于堆叠多个Column组件
    Stack({  }) {
      // 第一个Column组件，设置其宽度、高度、背景色和zIndex
      Column() {
        Text('Stack1').fontSize(20)
      }.width(100).height(100).backgroundColor(Color.Orange).zIndex(2)

      // 第二个Column组件，设置其宽度、高度、背景色和zIndex
      Column() {
        Text('Stack2').fontSize(20)
      }.width(150).height(150).backgroundColor(Color.Brown).zIndex(0)

      // 第三个Column组件，设置其宽度、高度、背景色和zIndex
      Column() {
        Text('Stack3').fontSize(20).zIndex(50)
      }.width(200).height(200).backgroundColor(Color.Blue)
    }.width(350).height(350).backgroundColor(0xe0e0e0)
  }
}

综上所述

Stack容器组件实现元素重叠与位置固定，适用于需要页面层叠和精确位置定位的场景