在HarmonyOS NEXT开发中Stack 里 align不生效？

Question

在HarmonyOS NEXT开发中Stack 里 align不生效？问题描述

@Entry 
@Component 
struct Index { 
  icon: ResourceStr = $r("app.media.startIcon") 
 
  build() { 
    Stack() { 
      Image(this.icon) 
        .width(30) 
        .height(30) 
        .align(Alignment.TopStart) 
      Image(this.icon) 
        .width(30) 
        .height(30) 
        .align(Alignment.TopEnd) 
      Image(this.icon) 
        .width(30) 
        .height(30) 
        .align(Alignment.BottomStart) 
      Image(this.icon) 
        .width(30) 
        .height(30) 
        .align(Alignment.BottomEnd) 
 
    }.width("100%") 
    .height("100%") 
  } 
}

Answer 1

align设置容器元素绘制区域内的子元素的对齐方式。只在Stack、Button、Marquee、StepperItem、text、TextArea、TextInput、FolderStack中生效
使用弹性布局(Flex)，参考代码:

Flex({ direction: FlexDirection.Row, alignItems: ItemAlign.Center }) { // 容器组件设置子元素居中 
  Text('alignSelf Start').width('25%').height(80) 
    .alignSelf(ItemAlign.Start) 
    .backgroundColor(0xF5DEB3) 
  Text('alignSelf Baseline') 
    .alignSelf(ItemAlign.Baseline) 
    .width('25%') 
    .height(80) 
    .backgroundColor(0xD2B48C) 
  Text('alignSelf Baseline').width('25%').height(100) 
    .backgroundColor(0xF5DEB3) 
    .alignSelf(ItemAlign.Baseline) 
  Text('no alignSelf').width('25%').height(100) 
    .backgroundColor(0xD2B48C) 
  Text('no alignSelf').width('25%').height(100) 
    .backgroundColor(0xF5DEB3) 
 
}.width('90%').height(220).backgroundColor(0xAFEEEE)

参考链接:https://developer.huawei.com/consumer/cn/doc/harmonyos-guides...