布局

1.线性布局DirectionalLayout

属性：

ohos:orientation="horizontal"//水平

下生效的对齐方式有：布局位于父布局的位置

ohos:layout_alignment="top"

ohos:layout_alignment="bottom"

ohos:layout_alignment="vertical_center"

ohos:layout_alignment="center"

//=======================================

ohos:orientation="vertical"//垂直

下生效的对齐方式有

ohos:layout_alignment="left"

ohos:layout_alignment="right"

ohos:layout_alignment="horizontal_center"

ohos:layout_alignment="center"

2.相对布局DependentLayout

每个组件可以指定相对于其他同级元素的位置，或者指定相对于父组件的位置

<?xml version="1.0" encoding="utf-8"?>

    xmlns:ohos="http://schemas.huawei.com/res/ohos"

    ohos:height="match_parent"

    ohos:background_element="$color:aquamarine"

    ohos:width="match_parent">

        ohos:id="$+id:text1"

        ohos:height="match_content"

        ohos:width="match_parent"

        ohos:background_element="$color:red"

        ohos:element_bottom="true"

        ohos:padding="10vp"

        ohos:text="DependentLayout相对布局"

        ohos:text_alignment="horizontal_center"

        ohos:text_color="$color:white"

        ohos:text_size="25fp"

        ohos:text_style="bold"

        ohos:text_weight="1"/>

        ohos:id="$+id:text2"

        ohos:height="match_content"

        ohos:width="match_parent"

        ohos:background_element="$color:gree_home"

        ohos:below="$id:text1"

        ohos:element_bottom="true"

        ohos:padding="10vp"

        ohos:text="DependentLayout相对布局"

        ohos:text_alignment="horizontal_center"

        ohos:text_color="$color:white"

        ohos:text_size="25fp"

        ohos:text_style="bold"

        ohos:text_weight="1"/>

        ohos:id="$+id:directionalLayout"

        ohos:below="$id:text2"

        ohos:height="match_content"

        ohos:width="match_parent"

        ohos:orientation="horizontal">

            ohos:padding="10vp"

            ohos:background_element="$color:blanchedalmond"

            ohos:height="match_content"

            ohos:width="match_parent"

            ohos:text_alignment="center"

            ohos:text="测试文字03"

            ohos:id="$+id:text3"

            ohos:text_size="25fp"

            ohos:weight="1"/>

            ohos:padding="10vp"

            ohos:background_element="$color:azure"

            ohos:height="match_content"

            ohos:width="match_parent"

            ohos:text="测试文字04"

            ohos:text_alignment="center"

            ohos:text_size="25fp"

            ohos:id="$+id:text4"

            ohos:weight="1"/>

        ohos:top_margin="50"

        ohos:below="$id:directionalLayout"

        ohos:height="match_parent"

        ohos:background_element="$color:red"

        ohos:width="match_parent">

        ohos:id="$+id:text8"

        ohos:width="match_content"

        ohos:height="match_content"

        ohos:text="center_in_parent"

        ohos:text_size="12fp"

        ohos:background_element="$color:red"

        ohos:center_in_parent="1"/>

        ohos:padding="10vp"

        ohos:id="$+id:text9"

        ohos:width="match_content"

        ohos:height="match_content"

        ohos:text="align_parent_right_bottom"

        ohos:text_size="12fp"

        ohos:background_element="$color:yellow"

        ohos:align_parent_right="true"

        ohos:align_parent_bottom="true"/>

        ohos:padding="10vp"

        ohos:id="$+id:text9"

        ohos:width="match_content"

        ohos:height="match_content"

        ohos:text="align_parent_left_top"

        ohos:text_size="12fp"

        ohos:background_element="$color:yellow"

        ohos:align_parent_left="true"

        ohos:align_parent_top="true"/>

        ohos:padding="10vp"

        ohos:id="$+id:text9"

        ohos:width="match_content"

        ohos:height="match_content"

        ohos:text="align_parent_left_bottom"

        ohos:text_size="12fp"

        ohos:background_element="$color:yellow"

        ohos:align_parent_bottom="true"

        ohos:align_parent_left="true"/>

        ohos:padding="10vp"

        ohos:id="$+id:text9"

        ohos:width="match_content"

        ohos:height="match_content"

        ohos:text="align_parent_top_right"

        ohos:text_size="12fp"

        ohos:background_element="$color:yellow"

        ohos:align_parent_top="true"

        ohos:align_parent_right="true"/>

</DependentLayout>

3.层叠式布局StackLayout

4.表格布局TabLayout