容器组件：层叠布局容器（HarmonyOS学习第四课【4.4】）_stack({aligncontent:alignment.center})-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_58213084/article/details/139033074

层叠布局容器（Stack）

ArkUI开发框架提了堆叠容器组件 Stack ，它的布局方式是把子组件按照设置的对齐方式顺序依次堆叠，后一个子组件覆盖在前一个子组件上边。

Stack定义介绍

interface StackInterface {
  (value?: { alignContent?: Alignment }): StackAttribute;
}

alignContent：设置子组件的对其方式， Alignment 定义了以下 9 种对齐方式：

TopStart：子组件在 Stack 内靠左上角对齐，简单样例如下所示：

Stack({alignContent: Alignment.TopStart}) {
  Text('Text1')
    .width(200)
    .height(180)
    .textAlign(TextAlign.End)
    .backgroundColor("#aabbcc")

  Text('Text2')
    .width(130)
    .height(100)
    .textAlign(TextAlign.End)
    .backgroundColor('#bbccaa')

  Text('Text3')       // 被遮挡住了
    .backgroundColor('#ccaabb')

  Text('Text4')
    .width(60)
    .height(45)
    .textAlign(TextAlign.End)
    .backgroundColor('#abcabc')
}
.backgroundColor(Color.Pink)
.width("100%")
.height('200')

样例运行结果如下图所示：

Top：设置子组件在 Stack 内靠顶部水平居中对齐，简单样例如下所示：

Stack({alignContent: Alignment.Top}) {
  Text('Text1')
    .width(200)
    .height(180)
    .textAlign(TextAlign.End)
    .backgroundColor("#aabbcc")

  Text('Text2')
    .width(130)
    .height(100)
    .textAlign(TextAlign.End)
    .backgroundColor('#bbccaa')

  Text('Text3')       // 被遮挡住了
    .backgroundColor('#ccaabb')

  Text('Text4')
    .width(60)
    .height(45)
    .textAlign(TextAlign.End)
    .backgroundColor('#abcabc')
}
.backgroundColor(Color.Pink)
.width("100%")
.height('200')

样例运行结果如下图所示：

TopEnd：设置子组件在 Stack 内部靠右上角对齐，简单样例如下所示：

Stack({alignContent: Alignment.TopEnd}) {
  Text('Text1')
    .width(200)
    .height(180)
    .textAlign(TextAlign.Start)
    .backgroundColor("#aabbcc")

  Text('Text2')
    .width(130)
    .height(100)
    .textAlign(TextAlign.Start)
    .backgroundColor('#bbccaa')

  Text('Text3')       // 被遮挡住了
    .backgroundColor('#ccaabb')

  Text('Text4')
    .width(60)
    .height(45)
    .textAlign(TextAlign.Start)
    .backgroundColor('#abcabc')
}
.backgroundColor(Color.Pink)
.width("100%")
.height('200')

样例运行结果如下图所示：

Start：子组件靠 Stack 左边侧竖直居中对齐，简单样例如下所示：

Stack({alignContent: Alignment.Start}) {
  Text('Text1')
    .width(200)
    .height(180)
    .textAlign(TextAlign.End)
    .backgroundColor("#aabbcc")

  Text('Text2')
    .width(130)
    .height(100)
    .textAlign(TextAlign.End)
    .backgroundColor('#bbccaa')

  Text('Text3')       // 被遮挡住了
    .backgroundColor('#ccaabb')

  Text('Text4')
    .width(60)
    .height(45)
    .textAlign(TextAlign.End)
    .backgroundColor('#abcabc')
}
.backgroundColor(Color.Pink)
.width("100%")
.height('200')

样例运行结果如下图所示：

Center（默认值）：设置子组件居中对齐，简单样例如下所示：

Stack({alignContent: Alignment.Center}) {
  Text('Text1')
    .width(200)
    .height(180)
    .backgroundColor("#aabbcc")

  Text('Text2')
    .width(130)
    .height(100)
    .backgroundColor('#bbccaa')

  Text('Text3')       // 被遮挡住了
    .backgroundColor('#ccaabb')

  Text('Text4')
    .width(60)
    .height(45)
    .backgroundColor('#abcabc')
}
.backgroundColor(Color.Pink)
.width("100%")
.height('200')

样例运行结果如下图所示：

End：设置子组件靠右竖直居中对齐，简单样例如下所示：

Stack({alignContent: Alignment.End}) {
  Text('Text1')
    .width(200)
    .height(180)
    .backgroundColor("#aabbcc")

  Text('Text2')
    .width(130)
    .height(100)
    .backgroundColor('#bbccaa')

  Text('Text3')       // 被遮挡住了
    .backgroundColor('#ccaabb')

  Text('Text4')
    .width(60)
    .height(45)
    .backgroundColor('#abcabc')
}
.backgroundColor(Color.Pink)
.width("100%")
.height('200')

样例运行结果如下图所示：

BottomStart：设置子组件左下角对齐，简单样例如下所示：

Stack({alignContent: Alignment.BottomStart}) {
  Text('Text1')
    .width(200)
    .height(180)
    .textAlign(TextAlign.End)
    .backgroundColor("#aabbcc")

  Text('Text2')
    .width(130)
    .height(100)
    .textAlign(TextAlign.End)
    .backgroundColor('#bbccaa')

  Text('Text3')       // 被遮挡住了
    .backgroundColor('#ccaabb')

  Text('Text4')
    .width(60)
    .height(45)
    .textAlign(TextAlign.End)
    .backgroundColor('#abcabc')
}
.backgroundColor(Color.Pink)
.width("100%")
.height('200')

样例运行结果如下图所示：

Bottom：设置子组件底部水平居中对齐，简单样例如下所示：

Stack({alignContent: Alignment.Bottom}) {
  Text('Text1')
    .width(200)
    .height(180)
    // .textAlign(TextAlign.End)
    .backgroundColor("#aabbcc")

  Text('Text2')
    .width(130)
    .height(100)
    // .textAlign(TextAlign.End)
    .backgroundColor('#bbccaa')

  Text('Text3')       // 被遮挡住了
    .backgroundColor('#ccaabb')

  Text('Text4')
    .width(60)
    .height(45)
    // .textAlign(TextAlign.End)
    .backgroundColor('#abcabc')
}
.backgroundColor(Color.Pink)
.width("100%")
.height('200')

样例运行结果如下图所示：

BottomEnd：设置子组件右下角对齐，简单样例如下所示：

Stack({alignContent: Alignment.BottomEnd}) {
  Text('Text1')
    .width(200)
    .height(180)
    // .textAlign(TextAlign.End)
    .backgroundColor("#aabbcc")

  Text('Text2')
    .width(130)
    .height(100)
    // .textAlign(TextAlign.End)
    .backgroundColor('#bbccaa')

  Text('Text3')       // 被遮挡住了
    .backgroundColor('#ccaabb')

  Text('Text4')
    .width(60)
    .height(45)
    // .textAlign(TextAlign.End)
    .backgroundColor('#abcabc')
}
.backgroundColor(Color.Pink)
.width("100%")
.height('200')

样例运行结果如下图所示：

📢：根据以上示例可知： Stack 组件层叠式布局，尺寸较小的布局会有被遮挡的风险，读者在布局组件的时候需要注意一下。

Stack属性介绍

declare class StackAttribute extends CommonMethod<StackAttribute> {
  alignContent(value: Alignment): StackAttribute;
}

alignContent：设置子组件的对齐方式， Alignment 的讲解同上，这里就不再介绍了。

参考图片为 arkui.club网站