ArkUI容器类组件-层叠布局容器（Stack）
原创
ArkUI开发框架提了堆叠容器组件 Stack ，它的布局方式是把子组件按照设置的对齐方式顺序依次堆叠，后一个子组件覆盖在前一个子组件上边。
Stack定义介绍
interface StackInterface {
(value?: { alignContent?: Alignment }): StackAttribute;
}- alignContent：设置子组件的对其方式，
Alignment定义了以下 9 种对齐方式：- TopStart：子组件在
Stack内靠左上角对齐，简单样例如下所示：
- TopStart：子组件在
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的讲解同上，这里就不再介绍了。
小结
本节简单介绍了 Stack 布局特性：堆叠式，它的使用很简单，唯一需要读者注意的是小的子组件可能出现会被遮挡的情况，熟练该容器组件后就可以构建相对比较复杂的UI了。
写在最后
如果你觉得这篇内容对你还蛮有帮助，我想邀请你帮我三个小忙：
- 点赞，转发，有你们的 『点赞和评论』，才是我创造的动力；
- 关注小编，同时可以期待后续文章ing🚀，不定期分享原创知识；
- 想要获取更多完整鸿蒙最新学习知识点，可关注B站：码牛课堂鸿蒙开发；
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
评论
登录后参与评论
推荐阅读
腾讯云开发者
