ArkUI 常用布局容器之层叠布局(Stack)
一、层叠布局概述
层叠布局通过Stack容器组件实现位置的固定定位与层叠,容器中的子元素(子组件)依次入栈,后一个子元素覆盖前一个子元素。
❗️层叠布局主要用于实现基于Z轴的布局,容器中的子元素(子组件)依次入栈,后一个子元素覆盖前一个子元素,子元素可以叠加,也可以通过zIndex设置位置
二、层叠布局的使用
Stack容器组件的特点:
按照子元素的先后顺序层叠,后面的元素覆盖在前面的元素上面。
默认的对齐方式是垂直水平居中。
不指定宽的情况,Stack容器组件的宽等于子元素中最宽的长度。
不指定高的情况,Stack容器组件的高等于子元素中最高的长度。
三、层叠布局的对齐方式
Stack容器组件通过alignContent参数实现位置的相对移动。
Alignment.TopStart:顶部开端
Alignment.Top:顶部居中
Alignment.TopEnd:顶部尾部
Alignment.Start:左侧居中
Alignment.Center:中心点(默认值)
Alignment.End:右侧居中
Alignment.BottomStart:底部开端
Alignment.Bottom:底部居中
Alignment.BottomEnd:底部尾部
四、 Z 序控制
Stack容器组件中,默认的子元素的层叠是根据元素引用的先后顺序。Stack容器中子元素显示层级关系可以通过Z序控制的zIndex属性改变。zIndex值越大,显示层级越高。