层叠布局（StackLayout）用于在屏幕上预留一块区域来显示组件中的元素，提供元素可以重叠的布局。层叠布局通过Stack容器组件实现位置的固定定位与层叠，容器中的子元素（子组件）依次入栈，后一个子元素覆盖前一个子元素，子元素可以叠加，也可以设置位置。
Column(){ Stack({ }) { Column(){}.width('90%').height('100%').backgroundColor('#ff58b87c') Text('text').width('60%').height('60%').backgroundColor('#ffc3f6aa') Button('button').width('30%').height('30%').backgroundColor('#ff8ff3eb').fontColor('#000') // Text('text').width('60%').height('60%').backgroundColor('#ffc3f6aa') 会覆盖Button }.width('100%').height(150).margin({ top: 50 }) }zIndex
Stack容器中兄弟组件显示层级关系可以通过Z序控制的zIndex属性改变。zIndex值越大，显示层级越高，即zIndex值大的组件会覆盖在zIndex值小的组件上方。一般来说组件的默认层级都是1，可以直接使用一些交大的数去尝试改变层级。类似前端的z-index属性。
注意：
在层叠布局中，如果后面子元素尺寸大于前面子元素尺寸，则前面子元素完全隐藏
Column(){ Stack({ }) { Column(){}.width('90%').height('100%').backgroundColor('#ff58b87c') // Text('text').width('60%').height('60%').backgroundColor('#ffc3f6aa') Button('button').width('30%').height('30%').backgroundColor('#ff8ff3eb').fontColor('#000').zIndex(2) Text('text').width('60%').height('60%').backgroundColor('#ffc3f6aa') // 会覆盖Button }.width('100%').height(150).margin({ top: 50 }) }对齐方式
Stack组件通过alignContent参数实现位置的相对移动
@Entry @Component struct Index { build() { Column(){ // Stack({ alignContent: Alignment.Start }) { // Stack({ alignContent: Alignment.Center }) { // Stack({ alignContent: Alignment.End }) { // Stack({ alignContent: Alignment.BottomStart }) { // Stack({ alignContent: Alignment.Bottom }) { Stack({ alignContent: Alignment.BottomEnd }) { Column(){}.width('90%').height('100%').backgroundColor('#ff58b87c') // Text('text').width('60%').height('60%').backgroundColor('#ffc3f6aa') Button('button').width('30%').height('30%').backgroundColor('#ff8ff3eb').fontColor('#000').zIndex(2) Text('text').width('60%').height('60%').backgroundColor('#ffc3f6aa') // 会覆盖Button }.width('100%').height(150).margin({ top: 50 }) } } }offset
可以使用offset调整元素位置
@Entry @Component struct Index { build() { Column(){ Stack({ alignContent: Alignment.BottomEnd }) { Column(){}.width('90%').height('100%').backgroundColor('#ff58b87c') // Text('text').width('60%').height('60%').backgroundColor('#ffc3f6aa') Button('button').width('30%').height('30%').backgroundColor('#ff8ff3eb').fontColor('#000').zIndex(2).offset({x: -10, y: -20}) Text('text').width('60%').height('60%').backgroundColor('#ffc3f6aa') // 会覆盖Button }.width('100%').height(150).margin({ top: 50 }) } } }返回顶部场景
@Entry @Component struct Index { @State names:number[] = [1,2,3,4,5,6,7,8,9] @State isShow:boolean = false scroll = new Scroller() build() { Column(){ Stack({alignContent:Alignment.BottomEnd}) { if (this.isShow) { Text('↑') .width(80) .height(80) .fontColor(Color.White) .fontSize(24) .backgroundColor(Color.Black) .borderRadius(40) .textAlign(TextAlign.Center) .zIndex(2) .offset({x:-10,y:-20}) .stateStyles({ pressed: { .backgroundColor(Color.Red) } }) .onClick(() => { this.scroll.scrollToIndex(0) }) } List({scroller: this.scroll}) { ForEach(this.names, (item:number) => { ListItem() { Text(item.toString()).width('100%').height(200).backgroundColor(Color.Gray).margin({bottom:20}) } }) } .onScrollIndex((start:number,end:number) => { this.isShow = end > 5 }) // ... } } } }
)
