harmonyos开发-DirectionalLayout布局

后端 / 笔记 / 2021-10-25

harmonyos开发-DirectionalLayout

DirectionalLayout是Java UI中的一种重要组件布局，用于将一组组件(Component)按照水平或者垂直方向排布，能够方便地对齐布局内的组件。该布局和其他布局的组合，可以实现更加丰富的布局方式。

img

属性

alignment

<?xml version="1.0" encoding="utf-8"?>
<DirectionalLayout
    xmlns:ohos="http://schemas.huawei.com/res/ohos"
    ohos:height="match_parent"
    ohos:padding="20vp"
    ohos:alignment="end"
    ohos:width="match_parent"
    ohos:background_element="#9013fe"
    ohos:orientation="horizontal">

    <Text
        ohos:height="match_content"
        ohos:background_element="$graphic:background_radius"
        ohos:padding="20vp"
        ohos:text_size="25fp"
        ohos:text="END"
        ohos:width="match_content"/>

</DirectionalLayout>

left

表示左对齐。

image20211025224703967.png

top

表示顶部对齐。

image20211025224730165.png

表示右对齐。

image20211025224749390.png

bottom

表示底部对齐。

image20211025224812931.png

horizontal_center

表示水平居中对齐。

image20211025225027185.png

vertical_center

表示垂直居中对齐。

image20211025225005223.png

center

表示居中对齐。

image20211025224944701.png

start

表示靠起始端对齐。

image20211025224922640.png

end

表示靠结束端对齐。

image20211025225055452.png

组合使用

属性之间是可以组合使用的，通过| 分割

top|center

<?xml version="1.0" encoding="utf-8"?>
<DirectionalLayout
    xmlns:ohos="http://schemas.huawei.com/res/ohos"
    ohos:height="match_parent"
    ohos:padding="20vp"
    ohos:alignment="top|center"
    ohos:width="match_parent"
    ohos:background_element="#9013fe"
    ohos:orientation="horizontal">

    <Text
        ohos:height="match_content"
        ohos:background_element="$graphic:background_radius"
        ohos:padding="20vp"
        ohos:text_size="25fp"
        ohos:text="TOP|CENTER"
        ohos:width="match_content"/>

</DirectionalLayout>

image20211025225227564.png

right|bottom

<?xml version="1.0" encoding="utf-8"?>
<DirectionalLayout
    xmlns:ohos="http://schemas.huawei.com/res/ohos"
    ohos:height="match_parent"
    ohos:padding="20vp"
    ohos:alignment="right|bottom"
    ohos:width="match_parent"
    ohos:background_element="#9013fe"
    ohos:orientation="horizontal">

    <Text
        ohos:height="match_content"
        ohos:background_element="$graphic:background_radius"
        ohos:padding="20vp"
        ohos:text_size="25fp"
        ohos:text="RIGHT|BOTTOM"
        ohos:width="match_content"/>

</DirectionalLayout>

image20211025225309152.png

orientation

子布局排列方向

horizontal

表示水平方向布局。

<?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="#9013fe"
    ohos:orientation="horizontal"
    ohos:padding="20vp">

    <Text
        ohos:height="match_content"
        ohos:width="match_content"
        ohos:background_element="$graphic:background_radius"
        ohos:padding="5vp"
        ohos:margin="5vp"
        ohos:text="Component"
        ohos:text_alignment="center"/>

    <Text
        ohos:height="match_content"
        ohos:width="match_content"
        ohos:margin="5vp"
        ohos:background_element="$graphic:background_radius"
        ohos:padding="5vp"
        ohos:text="Component"
        ohos:text_alignment="center"/>

    <Text
        ohos:height="match_content"
        ohos:width="match_content"
        ohos:margin="5vp"
        ohos:background_element="$graphic:background_radius"
        ohos:padding="5vp"
        ohos:text="Component"
        ohos:text_alignment="center"/>
</DirectionalLayout>

image20211025225959073.png

vertical

表示垂直方向布局。

<?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="#9013fe"
    ohos:orientation="vertical"
    ohos:padding="20vp">

    <Text
        ohos:height="match_content"
        ohos:width="match_parent"
        ohos:background_element="$graphic:background_radius"
        ohos:padding="10vp"
        ohos:margin="10vp"
        ohos:text="Component"
        ohos:text_alignment="center"/>

    <Text
        ohos:height="match_content"
        ohos:width="match_parent"
        ohos:margin="10vp"
        ohos:background_element="$graphic:background_radius"
        ohos:padding="10vp"
        ohos:text="Component"
        ohos:text_alignment="center"/>

    <Text
        ohos:height="match_content"
        ohos:width="match_parent"
        ohos:margin="10vp"
        ohos:background_element="$graphic:background_radius"
        ohos:padding="10vp"
        ohos:text="Component"
        ohos:text_alignment="center"/>
</DirectionalLayout>

image20211025225705202.png

total_weight

所有子视图的权重之和

可以直接设置浮点数值，也可以引用float浮点数资源。

通过这个可以实现自适应按比例布局

这里总权重为7，然后我们给子组件分配权重则会自动设定尺寸

如果每个权重均为1则尺寸一致

<?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="#9013fe"
    ohos:orientation="vertical"
    ohos:padding="20vp">

    <DirectionalLayout
        ohos:height="match_content"
        ohos:width="match_parent"
        ohos:orientation="horizontal"
        ohos:total_weight="7">

        <Text
            ohos:height="match_content"
            ohos:width="match_content"
            ohos:background_element="$graphic:background_radius"
            ohos:margin="5vp"
            ohos:padding="5vp"
            ohos:text="--2--"
            ohos:text_alignment="center"
            ohos:weight="2"/>

        <Text
            ohos:height="match_content"
            ohos:width="match_content"
            ohos:background_element="$graphic:background_radius"
            ohos:margin="5vp"
            ohos:padding="5vp"
            ohos:text="--3--"
            ohos:text_alignment="center"
            ohos:weight="3"/>

        <Text
            ohos:height="match_content"
            ohos:width="match_content"
            ohos:background_element="$graphic:background_radius"
            ohos:margin="5vp"
            ohos:padding="5vp"
            ohos:text="--2--"
            ohos:text_alignment="center"
            ohos:weight="2"/>
    </DirectionalLayout>

    <DirectionalLayout
        ohos:height="match_content"
        ohos:width="match_parent"
        ohos:orientation="horizontal"
        ohos:total_weight="7">

        <Text
            ohos:height="match_content"
            ohos:width="match_content"
            ohos:background_element="$graphic:background_radius"
            ohos:margin="5vp"
            ohos:padding="5vp"
            ohos:text="--1--"
            ohos:text_alignment="center"
            ohos:weight="1"/>

        <Text
            ohos:height="match_content"
            ohos:width="match_content"
            ohos:background_element="$graphic:background_radius"
            ohos:margin="5vp"
            ohos:padding="5vp"
            ohos:text="--4--"
            ohos:text_alignment="center"
            ohos:weight="4"/>

        <Text
            ohos:height="match_content"
            ohos:width="match_content"
            ohos:background_element="$graphic:background_radius"
            ohos:margin="5vp"
            ohos:padding="5vp"
            ohos:text="--2--"
            ohos:text_alignment="center"
            ohos:weight="2"/>
    </DirectionalLayout>

    <DirectionalLayout
        ohos:height="match_content"
        ohos:width="match_parent"
        ohos:orientation="horizontal"
        ohos:total_weight="3">

        <Text
            ohos:height="match_content"
            ohos:width="match_content"
            ohos:background_element="$graphic:background_radius"
            ohos:margin="5vp"
            ohos:padding="5vp"
            ohos:text="--1--"
            ohos:text_alignment="center"
            ohos:weight="1"/>

        <Text
            ohos:height="match_content"
            ohos:width="match_content"
            ohos:background_element="$graphic:background_radius"
            ohos:margin="5vp"
            ohos:padding="5vp"
            ohos:text="--1--"
            ohos:text_alignment="center"
            ohos:weight="1"/>

        <Text
            ohos:height="match_content"
            ohos:width="match_content"
            ohos:background_element="$graphic:background_radius"
            ohos:margin="5vp"
            ohos:padding="5vp"
            ohos:text="--1--"
            ohos:text_alignment="center"
            ohos:weight="1"/>
    </DirectionalLayout>
</DirectionalLayout>

image20211025230956734.png

layout_alignment

内部组件对其方式，使用方法和 alignment一致,这里不做详细概述。

java harmonyos

文章目录

最新评论

最新文章