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值越大,显示层级越高。

posted on 2024-04-02 11:50  梁飞宇  阅读(218)  评论(0)    收藏  举报