harmonyos开发-TableLayout布局

TableLayout使用表格的方式划分子组件。

alignment_type

表示布局对齐方式

align_edges

表示容器内组件按边界对齐

align_contents

表示容器内组件按边距对齐

column_count

表格列的个数

row_count

表格行的个数

orientation

元素排列方向

horizontal

水平排列

<?xml version="1.0" encoding="utf-8"?>
<TableLayout
    xmlns:ohos="http://schemas.huawei.com/res/ohos"
    ohos:height="match_parent"
    ohos:width="match_parent"
    ohos:alignment_type="align_edges"
    ohos:background_element="#bcc7c7"
    ohos:row_count="2"
    ohos:column_count="4"
    ohos:orientation="horizontal"
    >

    <Text
        ohos:height="match_content"
        ohos:width="match_content"
        ohos:background_element="#f52443"
        ohos:margin="6vp"
        ohos:padding="20vp"
        ohos:text="1"/>

    <Text
        ohos:height="match_content"
        ohos:width="match_content"
        ohos:background_element="#ec9433"
        ohos:margin="6vp"
        ohos:padding="20vp"
        ohos:text="2"/>

    <Text
        ohos:height="match_content"
        ohos:width="match_content"
        ohos:background_element="#f9e459"
        ohos:margin="6vp"
        ohos:padding="20vp"
        ohos:text="3"/>

    <Text
        ohos:height="match_content"
        ohos:width="match_content"
        ohos:background_element="#349e69"
        ohos:margin="6vp"
        ohos:padding="20vp"
        ohos:text="4"/>

    <Text
        ohos:height="match_content"
        ohos:width="match_content"
        ohos:background_element="#c8e6c6"
        ohos:margin="6vp"
        ohos:padding="20vp"
        ohos:text="5"/>

    <Text
        ohos:height="match_content"
        ohos:width="match_content"
        ohos:background_element="#1515f9"
        ohos:margin="6vp"
        ohos:padding="20vp"
        ohos:text="6"/>

    <Text
        ohos:height="match_content"
        ohos:width="match_content"
        ohos:background_element="#e666ff"
        ohos:margin="6vp"
        ohos:padding="20vp"
        ohos:text="7"/>
</TableLayout>

vertical

垂直排列

<?xml version="1.0" encoding="utf-8"?>
<TableLayout
    xmlns:ohos="http://schemas.huawei.com/res/ohos"
    ohos:height="match_parent"
    ohos:width="match_parent"
    ohos:alignment_type="align_edges"
    ohos:background_element="#bcc7c7"
    ohos:row_count="2"
    ohos:column_count="4"
    ohos:orientation="vertical"
    >

    <Text
        ohos:height="match_content"
        ohos:width="match_content"
        ohos:background_element="#f52443"
        ohos:margin="6vp"
        ohos:padding="20vp"
        ohos:text="1"/>

    <Text
        ohos:height="match_content"
        ohos:width="match_content"
        ohos:background_element="#ec9433"
        ohos:margin="6vp"
        ohos:padding="20vp"
        ohos:text="2"/>

    <Text
        ohos:height="match_content"
        ohos:width="match_content"
        ohos:background_element="#f9e459"
        ohos:margin="6vp"
        ohos:padding="20vp"
        ohos:text="3"/>

    <Text
        ohos:height="match_content"
        ohos:width="match_content"
        ohos:background_element="#349e69"
        ohos:margin="6vp"
        ohos:padding="20vp"
        ohos:text="4"/>

    <Text
        ohos:height="match_content"
        ohos:width="match_content"
        ohos:background_element="#c8e6c6"
        ohos:margin="6vp"
        ohos:padding="20vp"
        ohos:text="5"/>

    <Text
        ohos:height="match_content"
        ohos:width="match_content"
        ohos:background_element="#1515f9"
        ohos:margin="6vp"
        ohos:padding="20vp"
        ohos:text="6"/>

    <Text
        ohos:height="match_content"
        ohos:width="match_content"
        ohos:background_element="#e666ff"
        ohos:margin="6vp"
        ohos:padding="20vp"
        ohos:text="7"/>
</TableLayout>