HarmonyOS应用开发:Stack层叠布局
Stack
堆叠容器,子组件按照顺序依次入栈,后一个子组件覆盖前一个子组件。
子组件
可以包含子组件。
接口
Stack(value?: { alignContent?: Alignment })
参数:
参数名 | 参数类型 | 必填 | 参数描述 |
---|---|---|---|
alignContent | Alignment | 否 |
设置子组件在容器内的对齐方式。 |
对齐方式
设置子元素在容器内的对齐方式。支持左上,上中,右上,左,中,右,右下,中下,右下九种对齐方式,如下表所示:
// 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值小的组件上方。
-
在层叠布局中,如果后面子元素尺寸大于前面子元素尺寸,则前面子元素完全隐藏。