ArkUI层叠布局(Stack容器)详解（附带实例）

层叠布局用于在屏幕上预留一块区域来显示组件中的元素，并且元素可以重叠。

层叠布局通过 Stack 容器组件实现位置的固定定位与层叠。容器中的子元素依次入栈，后添加的子元素会覆盖前一个子元素，同时可以设置各子元素的显示位置。

层叠布局具有较强的页面层叠和位置定位能力，常用于广告、卡片层叠等场景。如下图所示，Stack是容器组件，容器内的子元素的顺序为 Item1->Item2->Item3。


在层叠布局中，子元素被约束在 Stack 容器组件下，默认进行居中堆叠。当然，我们也可以自定义子元素的样式和排列。示例代码如下：

// 使用 Record 设置外边距
let MTop: Record<string, number> = { 'top': 50 }

@Entry
@Component
struct StackExample {
  build() {
    // 列容器组件
    Column() {
      // 层叠布局
      Stack({}) {
        // 类容器组件，作为最底层
        Column() {
        }.width('90%').height('100%').backgroundColor('#ff58b87c')
       
        // 文本显示组件，作为列容器组件的上一层
        Text('text').width('60%').height('60%')
          .backgroundColor('#ffc3f6aa')
        // 按钮组件，处于最上层
        Button('button').width('30%').height('30%')
          .backgroundColor('#ff8ff3eb').fontColor('#000')
      }.width('100%').height(150)
      // 通过 Record 实例设置外边距
      .margin(MTop) 
    }
  }
}

显示效果如下图所示：

对齐方式

Stack 组件通过 alignContent 参数实现位置的相对移动，如下图所示，支持 9 种对齐方式。


示例代码如下：

@Entry
@Component
struct StackExample {
  build() {
    // 层叠布局，通过alignContent属性设置子组件对齐方式为左上角对齐
    Stack({ alignContent: Alignment.TopStart }) {
      // 文本显示组件，先放的组件处于最底层
      Text('Stack').width('90%').height('100%').backgroundColor('#e1dede')
        .align(Alignment.BottomEnd)
      // 文本显示组件，位于上一个元素的上一层
      Text('Item 1').width('70%').height('80%').backgroundColor(0xd2cab3)
        .align(Alignment.BottomEnd)
      // 文本显示组件，位于上一个元素的上一层
      Text('Item 2').width('50%').height('60%').backgroundColor(0xc1cbac)
        .align(Alignment.BottomEnd)
    }.width('100%').height(150).margin({ top: 5 })
  }
}

显示效果如下图所示：

Z序控制

在 Stack 容器中，兄弟组件显示层级关系可以通过 Z 序控制的 zIndex 属性进行设置。zIndex 值越大，显示的层级越高，即 zIndex 值大的组件会作为 zIndex 值小的组件的上一层。

在层叠布局中，如果后面子元素尺寸大于前面子元素尺寸，则前面子元素完全隐藏。示例代码如下：

@Entry
@Component
struct StackExample {
  build() {
    // 层叠布局组件，设置子组件的对齐方式为左下角对齐
    Stack({ alignContent: Alignment.BottomStart }) {
      // 列容器组件，该组件按层叠布局的默认方式处于显示的最底层
      Column() {
        // 文本显示组件，文本对齐方式为右侧对齐
        Text('Stack 子元素 1').textAlign(TextAlign.End).fontSize(20)   
      }.width(100).height(100).backgroundColor(0xffd306)

      // 列容器组件，该组件按照层叠布局的默认方式处于上一个元素的上一层
      Column() {
        // 文本显示组件
        Text('Stack 子元素 2').fontSize(20)   
      }.width(150).height(150).backgroundColor(Color.Pink)

      // 列容器组件，该组件按照层叠布局的默认方式处于上一个元素的上一层
      Column() {
        // 文本显示组件
        Text('Stack 子元素 3').fontSize(20)
      }.width(200).height(200).backgroundColor(Color.Gray)
    }.width(350).height(350).backgroundColor(0xe0e0e0)
  }
}

显示效果如下图所示：


显然第一个列容器组件元素完全覆盖了第二个列容器组件元素，第三个列容器组件完全覆盖了第二个列容器组件，最终仅显示最上层的第三个列容器组件。

在图 5 中，最后的 Stack 子元素 3 的尺寸大于前面的所有子元素，所以前面两个元素被完全隐藏。改变 Stack 子元素 1 和 Stack 子元素 2 的 zIndex 属性后，可以将它们展示出来。示例代码如下：

@Entry
@Component
struct StackExample {
  build() {
    // 层叠布局组件，设置子组件的对齐方式为左下角对齐
    Stack({ alignContent: Alignment.BottomStart }) {
      // 列容器组件，默认情况下处于层叠布局的最底层
      Column() {
        Text('Stack 子元素 1').fontSize(20)
      }.width(100).height(100).backgroundColor(0xffd306)
      // 设置 zIndex 值为 2
      .zIndex(2)
     
      // 列容器组件，默认情况下处于层叠布局的上一个组件的上一层
      Column() {
        Text('Stack 子元素 2').fontSize(20)
      }.width(150).height(150).backgroundColor(Color.Pink)
      // 设置 zIndex 值为 1，该值小于上一个元素的 zIndex 值，因此该组件处于上一个组件的下一层
      .zIndex(1)
     
      // 列容器组件，默认情况下处于层叠布局的上一个组件的上一层
      Column() {
        Text('Stack 子元素 3').fontSize(20)
      }.width(200).height(200).backgroundColor(Color.Grey)
    }.width(350).height(350).backgroundColor(0xe0e0e0)
  }
}

显示效果如下图所示：