层叠布局 Stack

层叠布局（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 }) // ... } } } }