鸿蒙开发之ArkUI 界面篇 二十二 层叠布局 Stack

Stack语法格式如下，其实鸿蒙的容器组件的语法都是一样的，只是实现效果和和容器组件的名字不一样而已。

与绝对定位相比，实现更简单些，绝地定位更灵活，如果需要调整子组件的对其方式，需要这样添

加：

优先能用层叠还是就使用层叠，实战效果如下：

代码如下：

@Entry
@Component
struct Index {
  build() {
    Column(){
      Stack({
        alignContent:Alignment.Center
      }){
        Text('第一个组件').fontSize(18).backgroundColor(Color.Red)
          .width(350)
          .height(350)
        Text('第二个组件').fontSize(18).backgroundColor(Color.White)
          .width(300)
          .height(300)
        Text('第三个组件').fontSize(18).backgroundColor(Color.Orange)
          .width(250)
          .height(250)
        Text('第四个组件').fontSize(18).backgroundColor(Color.Yellow)
          .width(150)
          .height(150)
        Text('第五个组件').fontSize(18).backgroundColor(Color.Brown)
          .width(100)
          .height(100)

      }.width(350)
      .height(350)
      .backgroundColor(Color.Orange)

  }.width('100%')
    .height('100%')
    .backgroundColor(Color.Pink)
}
}

把alignContent:Alignment.Center改为alignContent:Alignment.Start，效果如下图：

总结：stack层叠布局能快速的实现层叠效果，默认中心开花方式，都是可以调整的，