大家好，我是你们的朋友 朋哥，今天开始朋哥开始研究鸿蒙了，会写一些文章分享给大家，希望多多提意见。
上一篇原创文章 解读了 鸿蒙开发布局的相对布局，是界面排版很方便的布局，有些比较复杂的界面可以通过该布局来实现。
堆叠布局相对于 线性布局和相对布局来说 作用不大，可以做一些层叠加的布局，通过属性来设置位置，下面来看看他的简单使用。
简介：
StackLayout直接在屏幕上开辟出一块空白的区域，添加到这个布局中的视图都是以层叠的方式显示，而它会把这些视图默认放到这块区域的左上角，第一个添加到布局中视图显示在最底层，最后一个被放在最顶层。上一层的视图会覆盖下一层的视图。
上图中的 1，2，3是先后次序，最后的3是在最上面的一层。
支持的XML属性
|
属性名称 |
中文描述 |
取值 |
取值说明 |
使用案例 |
|---|---|---|---|---|
|
layout_alignment |
对齐方式 |
left |
表示左对齐。 |
可以设置取值项如表中所列，也可以使用“|”进行多项组合。 ohos:layout_alignment="top" ohos:layout_alignment="top|left" |
|
top |
表示顶部对齐。 |
|||
|
right |
表示右对齐。 |
|||
|
bottom |
表示底部对齐。 |
|||
|
horizontal_center |
表示水平居中对齐。 |
|||
|
vertical_center |
表示垂直居中对齐。 |
|||
|
center |
表示居中对齐。 |
|||
相对于其它布局，该布局的属性比较少。可以一个一个验证一下。
实例
布局中我们默认添加一个 堆叠布局，看看效果是什么？
代码：
<?xml version="1.0" encoding="utf-8"?><StackLayout xmlns:ohos="http://schemas.huawei.com/res/ohos" ohos:id="$+id:stack_layout" ohos:height="match_parent" ohos:width="match_parent">
<Text ohos:id="$+id:text_blue" ohos:text_alignment="bottom|horizontal_center" ohos:text_size="24fp" ohos:text="第一层" ohos:height="200vp" ohos:width="200vp" ohos:background_element="#3F56EA" />
<Text ohos:id="$+id:text_light_purple" ohos:text_alignment="bottom|horizontal_center" ohos:text_size="24fp" ohos:text="第二层" ohos:height="150vp" ohos:width="150vp" ohos:background_element="#00AAEE" />
<Text ohos:id="$+id:text_orange" ohos:text_alignment="center" ohos:text_size="24fp" ohos:text="第三层" ohos:height="80vp" ohos:width="80vp" ohos:background_element="#00BFC9" />
</StackLayout>
StackLayout中组件的布局默认在区域的左上角，并且以后创建的组件会在上层。
属性的使用：
代码讲解：
查看代码中的 注释......
<?xml version="1.0" encoding="utf-8"?><StackLayout xmlns:ohos="http://schemas.huawei.com/res/ohos" ohos:id="$+id:stack_layout" ohos:height="match_parent" ohos:width="match_parent">
<Text ohos:id="$+id:text_blue" ohos:text_alignment="bottom|horizontal_center" ohos:text_size="24fp" ohos:text="第一层" ohos:height="200vp" ohos:width="200vp" ohos:layout_alignment="bottom" // 设置相对 堆叠布局 放在底部 ohos:background_element="#3F56EA" />
<Text ohos:id="$+id:text_light_purple" ohos:text_alignment="bottom|horizontal_center" ohos:text_size="24fp" ohos:text="第二层" ohos:height="150vp" ohos:width="150vp" ohos:layout_alignment="right" //设置放在右部 ohos:background_element="#00AAEE" />
<Text ohos:id="$+id:text_orange" ohos:text_alignment="center" ohos:text_size="24fp" ohos:text="第三层" ohos:height="80vp" ohos:width="80vp" ohos:layout_alignment="left" // 放在左部 ohos:background_element="#00BFC9" />
</StackLayout>
层叠移动的属性：
如果你想把最底层的 组件移动到最上层，可以使用
stackLayout.moveChildToFront(component); 属性。
