HarmonyOS Stack如何设置子布局的对齐方式？

Question

文档地址：

https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V5/arkts-layout-development-stack-layout-V5

Stack如何设置子布局的对齐方式

我看文档里有子条目设置align ，但是不起作用，是不支持吗？

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 }).backgroundColor(Color.Red)

Answer 1

参数alignContent与属性align存在冲突，如果两个都设置，后设置会生效。

Stack容器中没有明确主轴与交叉轴，通过设置alignContent参数来改变容器内组件的对齐方式。alignContent参数可设置一个对所有子组件都生效的对齐方式，要实现子组件位置的单独控制，可先设置一个alignContent值，再自行调整子组件的位置，可参考如下demo:

@Entry
@Component
struct Index {
  @State message: string = ‘Hello World’;

  build() {
    Row() {
      Stack({alignContent:Alignment.Top}){
        Button(‘111’)
        Button(‘222’)
        .margin({top:150})
      }
      .width(100)
      .height(200)
      .border({width:5,color:Color.Pink})
    }
    .height(‘100%’)
    .width(‘100%’)
  }
}