七、ArkTS 声明式UI-常用布局-层叠布局 (Stack)
官方文档：developer.huawei.com/consumer/cn…
1. 概述
层叠布局（StackLayout）用于在屏幕上预留一块区域来显示组件中的元素，提供元素可以重叠的布局。层叠布局通过Stack容器组件实现位置的固定定位与层叠，容器中的子元素依次入栈，后一个子元素覆盖前一个子元素，子元素可以叠加，也可以设置位置。
层叠布局具有较强的页面层叠、位置定位能力，其使用场景有广告、卡片层叠效果等。
层叠布局是指将多个组件沿垂直于屏幕的方向堆叠在一起，类似于图层的叠加。以下效果都可以通过层叠布局实现
层叠布局可通过Stack容器组件实现，其子元素会按照其添加顺序依次叠加在一起，后添加的子元素位于先添加的子元素之上。具体效果如下
Stack() {
Row()
.width(250)
.height(250)
.backgroundColor('#107B02')//绿色
.shadow({ radius: 50 })
Row()
.width(200)
.height(200)
.backgroundColor('#E66826')//橙色
.shadow({ radius: 50 })
Row()
.width(150)
.height(150)
.backgroundColor('#255FA7')//蓝色
.shadow({ radius: 50 })
}.width(300).height(300).backgroundColor('#E5E5E5') //灰色
2. 参数
Stack组件的参数类型为{ alignContent?: Alignment }，alignContent用于设置子组件的对齐方式，该属性可通过枚举类型Alignment进行设置，可选的枚举值及其效果如下图所示
该参数的一个实际使用场景如下：
3. 实用技巧
3.1. 子组件Z轴控制
Stack容器中子组件的层级除了可按照添加顺序决定，还能通过zIndex()进行手动的设置，zIndex的值越大，层级越高。
Stack() {
Row()
.width(150)
.height(150)
.backgroundColor('#255FA7')//蓝色
.shadow({ radius: 50 }).zIndex(3)
Row()
.width(200)
.height(200)
.backgroundColor('#E66826')//橙色
.shadow({ radius: 50 }).zIndex(2)
Row()
.width(250)
.height(250)
.backgroundColor('#107B02')//绿色
.shadow({ radius: 50 }).zIndex(1)
}.width(300).height(300).backgroundColor('#E5E5E5') //灰色
3.2. 子组件精确定位
Stack容器的子组件可使用position()方法进行更精确的定位，该方法可设置子组件左上角相对于Stack容器左上角的偏移量，具体效果如下
Stack() {
Image($r('app.media.img_avatar'))
.width('100%')
.height('100%')
Image($r('app.media.icon_v'))
.width(60)
.height(60)
.position({ x: 140, y: 140 })
}.width(200).height(200)
公众号搜“Harry技术”,关注我,带你看不一样的人间烟火！
