StackLayout是什么

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

注意:StackLayout無自有的XML屬性

StackLayout示意圖

代碼如下

<?xml version="1.0" encoding="utf-8"?>
<StackLayoutxmlns:ohos="http://schemas.huawei.com/res/ohos"ohos:height="match_parent"ohos:width="match_parent"><Buttonohos:id="$+id:button1"ohos:height="300fp"ohos:width="300fp"ohos:background_element="#ddd333"ohos:text="OS"ohos:text_size="20fp"/><Buttonohos:id="$+id:button2"ohos:height="200fp"ohos:width="200fp"ohos:background_element="#00d8a0"ohos:text="OS"ohos:text_size="20fp"/><Buttonohos:id="$+id:button3"ohos:height="100fp"ohos:width="100fp"ohos:background_element="#EA0000"ohos:text="OS"ohos:text_size="20fp"/><Buttonohos:id="$+id:button4"ohos:height="50fp"ohos:width="50fp"ohos:background_element="#0000C6"ohos:text="OS"ohos:text_size="20fp"/></StackLayout>

StackLayout所包含組件可支持的XML屬性

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

demo練習

<?xml version="1.0" encoding="utf-8"?>
<StackLayoutxmlns:ohos="http://schemas.huawei.com/res/ohos"ohos:height="300fp"ohos:width="match_parent"><Buttonohos:id="$+id:button1"ohos:height="50fp"ohos:width="50fp"ohos:layout_alignment="left"ohos:background_element="#ddd333"ohos:text="OS"ohos:text_size="20fp"/><Buttonohos:id="$+id:button2"ohos:height="50fp"ohos:width="50fp"ohos:layout_alignment="right"ohos:background_element="#00d8a0"ohos:text="OS"ohos:text_size="20fp"/><Buttonohos:id="$+id:button3"ohos:height="50fp"ohos:width="50fp"ohos:layout_alignment="bottom"ohos:background_element="#EA0000"ohos:text="OS"ohos:text_size="20fp"/><Buttonohos:id="$+id:button4"ohos:height="50fp"ohos:width="50fp"ohos:layout_alignment="right|bottom"ohos:background_element="#0000C6"ohos:text="OS"ohos:text_size="20fp"/><Buttonohos:id="$+id:button5"ohos:height="50fp"ohos:width="50fp"ohos:layout_alignment="center"ohos:background_element="#0000C6"ohos:text="OS"ohos:text_size="20fp"/></StackLayout>

?效果圖如下：

官方參考地址鏈接

其他的布局

HarmonyOS UI開發 TableLayout(表格布局) 的使用

HarmonyOS UI開發 AdaptiveBoxLayout(自適應盒子布局) 的使用

HarmonyOS UI開發 PositionLayout(位置布局) 的使用

HarmonyOS UI開發 DependentLayout(依賴布局) 的使用

HarmonyOS UI開發 DirectionalLayout(定向布局) 的使用

總結

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

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