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"就可以实现组件在底部右对齐。