> 文档中心 > HarmonyOS应用开发:Stack层叠布局

HarmonyOS应用开发:Stack层叠布局


Stack

堆叠容器,子组件按照顺序依次入栈,后一个子组件覆盖前一个子组件。

子组件

可以包含子组件。

接口

Stack(value?: { alignContent?: Alignment })

参数:

参数名 参数类型 必填 参数描述
alignContent Alignment

设置子组件在容器内的对齐方式
默认值:Alignment.Center

对齐方式

设置子元素在容器内的对齐方式。支持左上,上中,右上,左,中,右,右下,中下,右下九种对齐方式,如下表所示:
 

// xxx.ets@Entry@Componentstruct StackExample {  build() {    Stack({ alignContent: Alignment.Bottom }) {      Text('First child, show in bottom').width('90%').height('100%').backgroundColor(0xd2cab3).align(Alignment.Top)      Text('Second child, show in top').width('70%').height('60%').backgroundColor(0xc1cbac).align(Alignment.Top)    }.width('100%').height(150).margin({ top: 5 })  }}

Z序控制

Stack容器中兄弟组件显示层级关系可以通过Stack子元素的zIndex属性改变。zIndex值越大,显示层级越高,即zIndex值大的组件会覆盖在zIndex值小的组件上方。

  • 在层叠布局中,如果后面子元素尺寸大于前面子元素尺寸,则前面子元素完全隐藏。