harmonyos开发-DependentLayout布局

后端 / 笔记 / 2021-10-26

harmonyos开发-DependentLayout布局

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

img

属性

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

表示左对齐。

image.png

top

表示顶部对齐。

image.png

表示右对齐。

image.png

bottom

表示底部对齐。

image.png

horizontal_center

表示水平居中对齐。

image.png

vertical_center

表示垂直居中对齐。

image.png

center

表示居中对齐。

image.png

组合属性

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

比如说

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>

image.png

子组件属性

<?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>

left_of

将右边缘与另一个子组件的左边缘对齐

放到相对组件的左边

仅可引用DependentLayout中包含的其他组件的id。

image.png

right_of

将左边缘与另一个子组件的右边缘对齐

放到相对组件的右边

image.png

start_of

将结束边与另一个子组件的起始边对齐

放到相对组件的前面

image20211026174050153.png

end_of

将起始边与另一个子组件的结束边对齐

放到相对组件的后面

image.png

above

将下边缘与另一个子组件的上边缘对齐

放到一个组件的上面

image.png

below

将上边缘与另一个子组件的下边缘对齐

放到一个组件的下面

image.png

align_baseline

将子组件的基线与另一个子组件的基线对齐

image.png

align_left

将左边缘与另一个子组件的左边缘对齐

image.png

align_top

将上边缘与另一个子组件的上边缘对齐

image.png

align_right

将右边缘与另一个子组件的右边缘对齐

多余部分会被裁减掉

image.png

align_bottom

将底边与另一个子组件的底边对齐

image.png

align_start

将起始边与另一个子组件的起始边对齐

image.png

align_end

将结束边与另一个子组件的结束边对齐

image.png

align_parent_left

将左边缘与父组件的左边缘对齐

image.png

align_parent_top

将上边缘与父组件的上边缘对齐

image.png

align_parent_right

将右边缘与父组件的右边缘对齐

image.png

align_parent_bottom

将底边与父组件的底边对齐

image.png

align_parent_start

将起始边与父组件的起始边对齐

image.png

align_parent_end

将结束边与父组件的结束边对齐

image.png

center_in_parent

将子组件保持在父组件的中心

image.png

horizontal_center

将子组件保持在父组件水平方向的中心

image20211026183300351.png

vertical_center

将子组件保持在父组件垂直方向的中心

image20211026183237669.png