harmonyos开发-StackLayout布局

StackLayout直接在屏幕上开辟出一块空白的区域，添加到这个布局中的视图都是以层叠的方式显示，而它会把这些视图默认放到这块区域的左上角，第一个添加到布局中的视图显示在最底层，最后一个被放在最顶层。上一层的视图会覆盖下一层的视图。

子组件属性

layout_alignment

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

    ohos:orientation="vertical">
    <Text
        ohos:layout_alignment="left"
        ohos:height="match_content"
        ohos:text="LEFT"
        ohos:padding="10vp"
        ohos:background_element="$graphic:background_radius"
        ohos:width="match_content"/>

</StackLayout>

left

表示左对齐

top

表示顶部对齐

right

表示右对齐

bottom

表示底部对齐

horizontal_center

水平居中对齐

vertical_center

垂直居中对齐

center

水平，垂直，居中对齐

组合对齐

同样 StackLayout布局支持组合对齐,|分割

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

    ohos:orientation="vertical">
    <Text
        ohos:layout_alignment="vertical_center|left"
        ohos:height="match_content"
        ohos:text="VCENTER|LEFT"
        ohos:padding="10vp"
        ohos:background_element="$graphic:background_radius"
        ohos:width="match_content"/>

</StackLayout>

多层叠放

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

    <Text
        ohos: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" />

    <Text
        ohos: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" />

    <Text
        ohos: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>