harmonyos开发-DependentLayout布局

DependentLayout是Java UI框架里的一种常见布局。与DirectionalLayout相比，拥有更多的排布方式，每个组件可以指定相对于其他同级元素的位置，或者指定相对于父组件的位置。

属性

alignment

布局对齐方式

<?xml version="1.0" encoding="utf-8"?>
<DirectionalLayout
    xmlns:ohos="http://schemas.huawei.com/res/ohos"
    ohos:height="match_parent"
    ohos:width="match_parent"
    ohos:background_element="#2edf8f"
    ohos:orientation="vertical">
    <DependentLayout
        ohos:height="match_parent"
        ohos:alignment="left"
        ohos:width="match_parent">
        <Text
            ohos:margin="10vp"
            ohos:padding="20vp"

            ohos:text="LEFT"
            ohos:text_alignment="center"
            ohos:height="match_content"
            ohos:background_element="$graphic:background_radius"
            ohos:width="match_content"/>

    </DependentLayout>

</DirectionalLayout>

left

表示左对齐。

top

表示顶部对齐。

right

表示右对齐。

bottom

表示底部对齐。

horizontal_center

表示水平居中对齐。

vertical_center

表示垂直居中对齐。

center

表示居中对齐。

组合属性

属性之间可以组合，通过|来进行分割

比如说

right|center

<?xml version="1.0" encoding="utf-8"?>
<DirectionalLayout
    xmlns:ohos="http://schemas.huawei.com/res/ohos"
    ohos:height="match_parent"
    ohos:width="match_parent"
    ohos:background_element="#2edf8f"
    ohos:orientation="vertical">
    <DependentLayout
        ohos:height="match_parent"
        ohos:alignment="right|center"
        ohos:width="match_parent">
        <Text
            ohos:margin="10vp"
            ohos:padding="20vp"

            ohos:text="RIGHT|CENTER"
            ohos:text_alignment="center"
            ohos:height="match_content"
            ohos:background_element="$graphic:background_radius"
            ohos:width="match_content"/>

    </DependentLayout>

</DirectionalLayout>

子组件属性

<?xml version="1.0" encoding="utf-8"?>
<DependentLayout
    xmlns:ohos="http://schemas.huawei.com/res/ohos"
    ohos:height="match_parent"
    ohos:width="match_parent"
    ohos:background_element="#2edf8f"
    ohos:orientation="vertical">

    <Text
        ohos:id="$+id:element"
        ohos:height="match_content"
        ohos:width="match_content"
        ohos:padding="10vp"
        ohos:background_element="#FFFFFF"
        ohos:text="ELEMENT"
        ohos:text_alignment="center"/>
    <Text
        ohos:height="match_content"
        ohos:padding="10vp"
        ohos:width="match_content"
        ohos:background_element="#FFFFFF"
        ohos:text_color="red"
        ohos:text_weight="500"
        ohos:top_margin="100vp"
        ohos:text="LEFT_OF"
        ohos:text_alignment="center"/>

</DependentLayout>