鸿蒙层叠布局

今天给你大家带来层叠布局：

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

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

效果如下：

场景一般作用在美团  饿了吗等软件用的多一点

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

下面是代码演示

@Entry
@Component
struct Index {
  build() {
    Column() {
      Stack() {
        Column() {
        }
        .width('90%')
        .height(130)
        .backgroundColor(Color.Gray)

        Text('text')
          .width('60%')
          .height('60%')
          .backgroundColor(Color.Orange)
        Button('button')
          .width('30%')
          .height('30%')
          .backgroundColor('#ff8ff3eb')
          .fontColor('#000')
      }
      .width('100%')
      .height(150)
      .backgroundColor(Color.Pink)
    }
    .margin(10)
  }
}