2.2、层叠布局（Stack）

概述

层叠布局（StackLayout ）用于在屏幕上预留一块区域来显示组件中的元素，提供元素可以重叠的布局。层叠布局通过 Stack 容器组件实现位置的固定定位与层叠，容器中的子元素（子组件）依次入栈，后一个子元素覆盖前一个子元素，子元素可以叠加，也可以设置位置。

层叠布局具有较强的页面层叠、位置定位能力，其使用场景有广告、卡片层叠效果等。

我开发的 Demo 展示

以下代码均经过我 demo 的实战验证，确保代码和效果对应

布局

Stack 组件为容器组件，容器内可包含各种子组件。其中子组件默认进行居中堆叠。子元素被约束在 Stack 下，进行自己的样式定义以及排列。

对齐方式

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

Alignment.TopStart

对应代码

ts 复制代码

 Stack({ }) {
   Text('Item3')
     .width('100%')
     .height('100%')
     .backgroundColor('#ff58b87c')
     .align(Alignment.Bottom)

   Text('Item2')
     .width('60%')
     .height('60%')
     .backgroundColor('#ffc3f6aa')
     .align(Alignment.Bottom)

   Text('Item1')
     .width('30%')
     .height('30%')
     .backgroundColor('#ff8ff3eb')
     .fontColor('#000')
 }
 .width('100%')
 .height(150)
 .margin({ top: 10 })
 .alignContent(Alignment.TopStart)

Alignment.Top

对应代码

ts 复制代码

 Stack({ }) {
  Text('Item3')
     .width('100%')
     .height('100%')
     .backgroundColor('#ff58b87c')
     .align(Alignment.Bottom)

   Text('Item2')
     .width('60%')
     .height('60%')
     .backgroundColor('#ffc3f6aa')
     .align(Alignment.Bottom)

   Text('Item1')
     .width('30%')
     .height('30%')
     .backgroundColor('#ff8ff3eb')
     .fontColor('#000')
 }
 .width('100%')
 .height(150)
 .margin({ top: 10 })
 .alignContent(Alignment.Top)

Alignment.TopEnd

对应代码

ts 复制代码

 Stack({ }) {
  Text('Item3')
    .width('100%')
    .height('100%')
    .backgroundColor('#ff58b87c')
    .align(Alignment.Bottom)

  Text('Item2')
    .width('60%')
    .height('60%')
    .backgroundColor('#ffc3f6aa')
    .align(Alignment.Bottom)

  Text('Item1')
    .width('30%')
    .height('30%')
    .backgroundColor('#ff8ff3eb')
    .fontColor('#000')
}
.width('100%')
.height(150)
.margin({ top: 10 })
.alignContent(Alignment.TopEnd)

Alignment.Center

ts 复制代码

Stack({ }) {
 Text('Item3')
    .width('100%')
    .height('100%')
    .backgroundColor('#ff58b87c')
    .align(Alignment.Bottom)

  Text('Item2')
    .width('60%')
    .height('60%')
    .backgroundColor('#ffc3f6aa')
    .align(Alignment.Bottom)

  Text('Item1')
    .width('30%')
    .height('30%')
    .backgroundColor('#ff8ff3eb')
    .fontColor('#000')
}
.width('100%')
.height(150)
.margin({ top: 10 })
.alignContent(Alignment.Center)

Alignment.BottomStart

对应代码

ts 复制代码

Stack({ }) {
  Text('Item3')
     .width('100%')
     .height('100%')
     .backgroundColor('#ff58b87c')
     .align(Alignment.TopStart)

   Text('Item2')
     .width('60%')
     .height('60%')
     .backgroundColor('#ffc3f6aa')
     .align(Alignment.TopStart)

   Text('Item1')
     .width('30%')
     .height('30%')
     .backgroundColor('#ff8ff3eb')
     .fontColor('#000')
 }
 .width('100%')
 .height(150)
 .margin({ top: 10 })
 .alignContent(Alignment.BottomStart)

Alignment.Bottom

对应代码

ts 复制代码

Stack({ }) {
  Text('Item3')
    .width('100%')
    .height('100%')
    .backgroundColor('#ff58b87c')
    .align(Alignment.TopStart)

  Text('Item2')
    .width('60%')
    .height('60%')
    .backgroundColor('#ffc3f6aa')
    .align(Alignment.TopStart)

  Text('Item1')
    .width('30%')
    .height('30%')
    .backgroundColor('#ff8ff3eb')
    .fontColor('#000')
}
.width('100%')
.height(150)
.margin({ top: 10 })
.alignContent(Alignment.Bottom)

Alignment.BottomEnd

对应代码

ts 复制代码

Stack({ }) {
  Text('Item3')
    .width('100%')
    .height('100%')
    .backgroundColor('#ff58b87c')
    .align(Alignment.TopStart)

  Text('Item2')
    .width('60%')
    .height('60%')
    .backgroundColor('#ffc3f6aa')
    .align(Alignment.TopStart)

  Text('Item1')
    .width('30%')
    .height('30%')
    .backgroundColor('#ff8ff3eb')
    .fontColor('#000')
}
.width('100%')
.height(150)
.margin({ top: 10 })
.alignContent(Alignment.BottomEnd)

Z序控制

Stack 容器中兄弟组件显示层级关系可以通过Z序控制的 zIndex 属性改变。zIndex 值越大，显示层级越高，即 zIndex 值大的组件会覆盖在 zIndex 值小的组件上方。

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

ts 复制代码

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.Grey)
}
.margin({ top: 10 })
.width(350)
.height(350)
.backgroundColor(0xe0e0e0)

上图中，最后的子元素3的尺寸大于前面的所有子元素，所以，前面两个元素完全隐藏。改变子元素1，子元素2的zIndex属性后，可以将元素展示出来。 对应代码

ts 复制代码

Stack({ alignContent: Alignment.BottomStart }) {
  Column() {
    Text('Stack子元素1')
      .textAlign(TextAlign.End)
      .fontSize(20)
  }
  .width(100)
  .height(100)
  .backgroundColor(0xffd306)
  .zIndex(2)

  Column() {
    Text('Stack子元素2')
      .fontSize(20)
  }
  .width(150)
  .height(150)
  .backgroundColor(Color.Pink)
  .zIndex(1)

  Column() {
    Text('Stack子元素3')
      .fontSize(20)
  }
  .width(200)
  .height(200)
  .backgroundColor(Color.Grey)
}
.margin({ top: 10 })
.width(350)
.height(350)
.backgroundColor(0xe0e0e0)

上一篇：2.1、线性布局（Row/Column）下一篇：2.3、弹性布局（Flex）