鸿蒙布局元素篇（三）-层叠布局（Stack）

Stack(value?: { alignContent?: Alignment })：功能就是叠罗汉，包裹的元素排列顺序在后面会覆盖在排列的靠前的元素之上。

• 有一个参数alignContent用来指定子元素的对齐方式
• 有一个独有属性zIndex，用来修改层叠顺序，数组越大，位置越靠上层。参数调整顺序的优先级大于元素的排列的顺序

@Entry
@Component
struct Index {
  @Provide  message: string = 'Hello World'

  build() {
    Column({space: 10}) {
    // 对齐方式向下居中
      Stack({ alignContent: Alignment.Bottom }) {
        Text('1').width('90%').fontSize(50).height('100%').backgroundColor(0xd2cab3).align(Alignment.Top)
        // 用zIndex将第二个元素放到最上面
        Text('2').width('30%').fontSize(50).height('40%').backgroundColor(0xc1cbac).align(Alignment.Top).zIndex(1)
        Text('3').width('70%').fontSize(50).height('60%').backgroundColor(0xD2B48C).align(Alignment.Top)
      }.width('100%').height(150).margin({ top: 5 })
    }
  }
}

通过修改2的zIndex值让的浮在了3的上面。

具体使用场景没有想到太好的，关于对齐有9个参数，也就是9种对齐方式，不支持数值的方式，直接截官方的图。 可以参考一下官方的例子)