一、StackLayout 簡介

• StackLayout 直接在屏幕上開辟出一塊空白的區域，添加到這個布局中的視圖都是以層疊的方式顯示，而它會把這些視圖默認放到這塊區域的左上角，第一個添加到布局中的視圖顯示在最底層，最后一個被放在最頂層。上一層的視圖會覆蓋下一層的視圖。
• StackLayout 示意如下：

二、支持的 XML 屬性

• StackLayout 無自有的 XML 屬性，共有 XML 屬性繼承自 Component。詳情請參考我之前的博客：HarmonyOS之組件通用的XML屬性總覽。
• StackLayout 所包含組件可支持的 XML 屬性見下表：

屬性名稱中文描述取值取值說明使用案例layout_alignment對齊方式left表示左對齊可以設置取值項如表中所列，也可以使用“|”進行多項組合。 ohos:layout_alignment="top" ohos:layout_alignment="top|left"top表示頂部對齊right表示右對齊bottom表示底部對齊horizontal_center表示水平居中對齊vertical_center表示垂直居中對齊center表示居中對齊

三、StackLayout 使用

• 創建 StackLayout：

<?xml version="1.0" encoding="utf-8"?><StackLayoutxmlns:ohos="http://schemas.huawei.com/res/ohos"ohos:height="match_parent"ohos:width="match_parent"></StackLayout>

• 使用默認布局添加組件，StackLayout 中組件的布局默認在區域的左上角，并且以后創建的組件會在上層。xml 布局如下：

<?xml version="1.0" encoding="utf-8"?><StackLayoutxmlns:ohos="http://schemas.huawei.com/res/ohos"ohos:id="$+id:stack_layout"ohos:height="match_parent"ohos:width="match_parent"><Textohos:id="$+id:text_blue"ohos:text_alignment="bottom|horizontal_center"ohos:text_size="24fp"ohos:text="Layer 1"ohos:height="400vp"ohos:width="400vp"ohos:background_element="#3F56EA" /><Textohos:id="$+id:text_light_purple"ohos:text_alignment="bottom|horizontal_center"ohos:text_size="24fp"ohos:text="Layer 2"ohos:height="300vp"ohos:width="300vp"ohos:background_element="#00AAEE" /><Textohos:id="$+id:text_orange"ohos:text_alignment="center"ohos:text_size="24fp"ohos:text="Layer 3"ohos:height="80vp"ohos:width="80vp"ohos:background_element="#00BFC9" /></StackLayout>

• 多個視圖排列效果如下所示：

• 使用相對位置添加組件，使用 layout_alignment 屬性可以指定組件在 StackLayout 中的相對位置，如下表示 Button 組件位于 StackLayout 的右面：

• xml 布局：

<?xml version="1.0" encoding="utf-8"?><StackLayoutxmlns:ohos="http://schemas.huawei.com/res/ohos"ohos:id="$+id:stack_layout"ohos:height="match_parent"ohos:width="match_parent"><Buttonohos:id="$+id:button"ohos:height="40vp"ohos:width="80vp"ohos:layout_alignment="right"ohos:background_element="#3399FF"/></StackLayout>

四、場景展示

• 點擊將子視圖從底層移到頂層顯示：

• Java 示例代碼：

ComponentContainer stackLayout = (ComponentContainer) findComponentById(ResourceTable.Id_stack_layout);Text textFirst = (Text) findComponentById(ResourceTable.Id_text_blue);textFirst.setClickedListener(new Component.ClickedListener() {@Overridepublic void onClick(Component component) {stackLayout.moveChildToFront(component);}});

總結

以上是生活随笔為你收集整理的HarmonyOS之常用布局StackLayout的使用的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。