2.2.3 StackLayout

与前两种布局方式相比，StackLayout（层叠布局）相对简单一些。它会为每一个放进去的组件创建一个空白区域，通常称为一层。这些层默认会从屏幕左上角开始绘制，即 StackLayout 默认从左上角的（0，0）坐标开始绘制组件，最先放入的组件位于底层，最后放入的组件在最上层，这些组件看起来好像层叠在一起，这就是 StackLayout 的效果。层叠布局在开发过程中可以用于地图设计、游戏页面等场景，如图2-21所示。

图2-21 层叠布局示意图

下面通过实践来加深对层叠布局的理解。创建一个最外层为 StackLayout的父布局，并在其中添加相应的组件。

在上述布局文件中添加了三个 Te x t 组件，其属性在后面章节中再详细介绍。这三个组件从上到下依次变小，颜色逐渐变浅，层次堆叠摆放，最后添加的“第三层”在顶部，“第一层”在底部，重叠部分会被顶部的盖住。页面的预览效果如图 2-22所示。

其实也可以看到，StackLayout 中的组件位置也是可以改变的，只是默认从左上角开始绘制。在上述案例中，通过ohos：layout_alignment属性改变了组件在 StackLayout 中的位置。除了 center，StackLayout还支持以下位置属性值，见表2-3。

图2-22 层叠布局的显示效果

表2-3 StackLayout中的位置属性值

ohos：layout_alignment 还支持这些属性值的组合使用。比如，想让组件在底部右对齐，这个时候可以使用“|”作为连接符来组合多个属性值，只需要使用ohos：layout_alignment="bottom|right"就可以实现组件在底部右对齐。