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"就可以實現組件在底部右對齊。