StackLayout簡介

StackLayout意為堆疊佈局，用於在螢幕上保留一個區域來顯示元件，實現特殊的功能。通常，堆疊佈局中只應該放置一個子元件，如果存在多個子元件，則顯示最新的元件。這個佈局相對於其他的佈局比較簡單，我們不做過多的贅述。

示例

我們將使用StackLayout來顯示三個Text元件，Text元件給定固定的寬高以及不同的背景色，這樣便於我們來區分哪個在最上層，哪個在最下層。根據最終執行效果，我們可以看出，子元件在最後的反而在最上層，也就是後來者居上。

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

    <Text
        ohos:height="500vp"
        ohos:width="500vp"
        ohos:background_element="#CC5815"
        ohos:text="我是第一個Text."
        ohos:text_size="50"
        />

    <Text
        ohos:height="400vp"
        ohos:width="400vp"
        ohos:background_element="#07CCFF"
        ohos:text="我是第二個Text."
        ohos:text_size="50"
        />

    <Text
        ohos:height="300vp"
        ohos:width="300vp"
        ohos:background_element="#16CCB7"
        ohos:text="我是第三個Text."
        ohos:text_size="50"
        />

</StackLayout>
 

常用場景

我們在什麼時候用堆疊佈局呢？

① 對於在地圖上做操作，我們就需要使用堆疊佈局（也可將其理解為可以在其中放置子元件的元件）畫出我們的行動軌跡，或者進行路線導航等。

② 比如短視訊APP中，右側的使用者、點贊、分享等按鈕都可以浮動在視訊上方而不影響視訊的暫停播放。

③ 我們也可以在UI頁面右下角做一個固定位置的功能按鈕。

作者：IT明

想了解更多內容，請訪問：
51CTO和華為官方戰略合作共建的鴻蒙技術社群
https://harmonyos.51cto.com#bky

【免費直播課-HarmonyOS 2.0原始碼框架分析】