作者：韓茹
公司：程式咖（北京）科技有限公司
鴻蒙巴士專欄作家
StackLayout直接在螢幕上開闢出一塊空白的區域，
新增到這個佈局中的檢視都是以層疊的方式顯示
，而它會把這些檢視預設放到這塊區域的左上角，第一個新增到佈局中檢視顯示在最底層，最後一個被放在最頂層。上一層的檢視會覆蓋下一層的檢視。因此該佈局叫做堆疊佈局。 它很自由，無論你放多少個元件進去他都是從左上角開始計算，所以你可以用layout_alignment和margin做出隨心所欲的佈局。
一、支援的XML屬性
StackLayout無自有的XML屬性，共有XML屬性繼承自：Component
屬性名稱
中文描述
取值
取值說明
使用案例
id
控制元件identity，用以識別不同控制元件物件，每個控制元件唯一
integer型別
僅可用於配置控制元件的id。
ohos：id=“$+id：component_id”
theme
樣式
引用
僅可引用pattern資源。
ohos：theme=“$pattern：button_pattern”
width
寬度，必填項
float型別，match_parent，match_content
ohos：width=“20”
ohos：width=“10vp”
ohos：width=“$float：size_value”
height
高度，必填項
float型別，match_parent，match_content
ohos：height=“20” ohos：height=“20vp” ohos：height=“$float：size_value”
min_width
最小寬度
float型別
ohos：min_width=“20”
ohos：min_width=“20vp”
ohos：min_width=“$float：size_value”
min_height
最小高度
float型別
ohos：min_height=“20”
ohos：min_height=“20vp”
ohos：min_height=“$float：size_value”
alpha
透明度
float型別
取值範圍在0~1。
ohos：alpha=“0。86”
ohos：alpha=“$float：value”
enabled
是否啟用
boolean型別
ohos：enabled=“true”
ohos：enabled=“$boolean：true”
visibility
可見性
visible，invisible，hide
ohos：visibility=“visible”
padding
內間距
float型別
margin
外邊距
float型別
StackLayout所包含元件可支援的XML屬性見下表：
表1
StackLayout所包含元件可支援的XML屬性
屬性名稱
中文描述
取值
取值說明
使用案例
layout_alignment
對齊方式
left
表示左對齊。
可以設定取值項如表中所列，
也可以使用“|”進行多項組合。ohos：layout_alignment=“top”
ohos：layout_alignment=“top|left”
top
表示頂部對齊。
right
表示右對齊。
bottom
表示底部對齊。
horizontal_center
表示水平居中對齊。
vertical_center
表示垂直居中對齊。
center
表示居中對齊。
二、排列方式
2。1 使用預設佈局新增元件
StackLayout，一層一層。每個子控制元件，預設從左上角開始顯示，離父容器的宣告標籤越近，越位於底層。也就是說，越在後面宣告的控制元件，越在上層。
示例程式碼：
<？xml version=“1。0” encoding=“utf-8”？>
效果圖：
示例程式碼：
<？xml version=“1。0” encoding=“utf-8”？>
效果圖：
2。2 使用相對位置新增元件
使用layout_alignment屬性可以指定元件在StackLayout中的相對位置
。
示例程式碼：
<？xml version=“1。0” encoding=“utf-8”？>
效果圖：
示例程式碼：
我們可以利用堆疊佈局，結合layout_alignment和margin這兩個屬性，可以任意擺放。特別的方便。
這裡負數就是在原來的基礎上相反方向移動多少
注意：此處是負數，因為 layout_alignment = “center” 表示水平和垂直方向上居中，基準線為檢視水平和垂直方向的中點， 因為鳥在基準線的上方向（負方向），所以為負數）
<？xml version=“1。0” encoding=“utf-8”？>
效果圖：
三、寫個例子
一個有背景顏色的Text，一個圖片，點選Text，顯示圖片，點選圖片，顯示Text，預覽效果：
首先我們在layout目錄 下，新建一個xml檔案：demo_stack_layout。xml，程式碼如下：
<？xml version=“1。0” encoding=“utf-8”？>
初始效果：
然後我們修改一下MainAbilitySlice。java的程式碼：
首先修改一下要顯示的佈局檔案：
@Override public void onStart（Intent intent） { super。onStart（intent）； // 指定要展示的xml佈局 super。setUIContent（ResourceTable。Layout_demo_stack_layout）； }
然後獲取xml中的控制元件物件，image物件，text1物件，還有textMsg物件，用於顯示提示資訊。然後給text1新增點選事件，點選text1的時候，將image物件，顯示到前面，並且修改textMsg，更改顯示到文字。再給image新增點選事件，點選iamge的時候，將text1物件，顯示到前面，並且修改textMsg的文字內容。程式碼如下：
package com。example。myapplication。slice；import com。example。myapplication。ResourceTable；import ohos。aafwk。ability。AbilitySlice；import ohos。aafwk。content。Intent；import ohos。agp。components。*；public class MainAbilitySlice extends AbilitySlice { @Override public void onStart（Intent intent） { super。onStart（intent）； super。setUIContent（ResourceTable。Layout_demo_stack_layout）； ComponentContainer stackLayout = （ComponentContainer） findComponentById（ResourceTable。Id_stack_layout）； Text textMsg = （Text） findComponentById（ResourceTable。Id_text_msg）； Text text1 = （Text） findComponentById（ResourceTable。Id_text1）； Image image = （Image） findComponentById（ResourceTable。Id_image1）； text1。setClickedListener（new Component。ClickedListener（） { @Override public void onClick（Component component） { // 指定的把子元素搬到前面去 stackLayout。moveChildToFront（image）； textMsg。setText（“點一下，帶回去，藏起來。。”）； System。out。println（“component——————————”+component）； } }）； image。setClickedListener（new Component。ClickedListener（） { @Override public void onClick（Component component） { stackLayout。moveChildToFront（text1）； textMsg。setText（“點一下有美女”）； System。out。println（“component——————————”+component）； } }）； } @Override public void onActive（） { super。onActive（）； } @Override public void onForeground（Intent intent） { super。onForeground（intent）； }}
執行即可。
