层叠布局——Stack容器组件
层叠布局（StackLayout）用于在屏幕上预留一块区域来显示组件中的元素，提供元素可以重叠的布局。层叠布局通过Stack容器组件实现位置的固定定位与层叠，容器中的子元素依次入栈，后一个子元素覆盖前一个子元素，子元素可以叠加，也可以设置位置。
层叠布局具有较强的页面层叠、位置定位能力，其使用场景有广告、卡片层叠效果等。
层叠布局优先使用层叠布局Stack组件。
如图1，Stack作为容器，容器内的子元素的顺序为Item1->Item2->Item3。
图1 层叠布局
开发布局
Stack组件为容器组件，子元素默认进行居中堆叠。
对齐方式——alignContent参数
Stack组件通过alignContent参数实现位置的相对移动。
build() {
//Alignment枚举类型
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 })
}
TopStart 顶部起始端。
Top 顶部横向居中。
TopEnd 顶部尾端。
Start 起始端纵向居中。
Center 横向和纵向居中。
End 尾端纵向居中。
BottomStart 底部起始端。
Bottom 底部横向居中。
BottomEnd 底部尾端。
层叠布局案例
@Entry
@Component
struct Index {
@State message: string = 'Hello World';
//层叠布局
build() {
Column(){
Column(){
//层叠布局默认居中显示，利用alignContent参数进行调整
Stack({alignContent:Alignment.Bottom}){
Image($r('app.media.bz_img'))
.width('100%')
.height('100%')
.borderRadius({ topLeft:10,topRight:10 })
Row(){
Row({space:5}){
Image($r('app.media.bz_play'))
.fillColor(Color.White)
.width(14)
Text('288万')
.fontColor(Color.White)
.fontSize(14)
}.margin({right:10})
Row({space:5}){
Image($r('app.media.bz_msg'))
.fillColor(Color.White)
.width(14)
Text('8655')
.fontColor(Color.White)
.fontSize(14)
}
Text('4:33')
.fontColor(Color.White)
.fontSize(14)
.margin({right:10})
}.height(24)
.width('100%')
}
.width('100%')
.height(125)
Column({space:5}){
Text('【凤凰传奇新歌】欢迎来到国风统治区：唢呐一响神曲《铁衣流派推广曲》')
.textOverflow({overflow:TextOverflow.Ellipsis})
.maxLines(2)
.fontSize(13)
.lineHeight(16)
// .fontWeight(700)
Row(){
Text('19万点赞')
.fontColor('#eaa28a')
.backgroundColor('#fef0ef')
.fontSize(10)
.padding(5)
Image($r('app.media.bz_more'))
.fillColor('#666')
.width(14)
}.width('100%')
.margin({top:6})
// .height(50)
.justifyContent(FlexAlign.SpaceBetween)
}
}.width(200)
.height(200)
.borderRadius(10)
.margin({top:10})
.backgroundColor(Color.White)
}.width('100%')
.height('100%')
.backgroundColor('#ccc')
}
}
绝对定位——position属性
相对于父组件进行位移。添加position属性时，默认x,y为0。一旦添加position属性，组件不再占用原来位置。
使用position属性，可能出现层叠遮盖的效果，写在后面的组件会遮盖写在前面的兄弟组件。可以利用zIndex调整兄弟之间的层级关系。
Z序控制——zIndex属性
调整层级关系。
Stack容器中兄弟组件显示层级关系可以通过Z序控制的zIndex属性改变。
zIndex值越大，显示层级越高，即zIndex值大的组件会覆盖在zIndex值小的组件上方。组件上移/下移
在层叠布局中，如果后面子元素尺寸大于前面子元素尺寸，则前面子元素完全隐藏。这时可以用zIndex调整组件的上下顺序。zIndex大的在上面。
绝对定位场景示例
@Entry
@Component
struct Index {
@State message: string = 'Hello World';
//绝对定位
build() {
Column(){
Column(){
Text('VIP')
.width(40)
.height(20)
.borderRadius({topLeft:10,bottomRight:10})
.border({width:2, color:'#feb7a3'})
.backgroundColor('#e49642')
.fontStyle(FontStyle.Italic)
.fontSize(14)
.fontColor('#feb7a3')
.fontWeight(700)
.textAlign(TextAlign.Center)//文本居中
.position({x:0,y:0})//绝对定位
.zIndex(666)
Image($r('app.media.position_moco'))
.height(210)
.width('100%')
.borderRadius(10)
Row(){
Image($r('app.media.position_earphone'))
.width(20)
.height(20)
.borderRadius(10)
.backgroundColor('#55b7f4')
.padding(5)//挤压svg元素
.fillColor(Color.White)
.margin({left:5, right:5})
Text('飞狗MOCO')
.fontWeight(700)
.margin({left:5})
}.height(30)
.width('100%')
}.width(160)
.height(240)
.backgroundColor(Color.White)
}.width('100%')
.height('100%')
.backgroundColor(Color.Pink)
}
}