【鸿蒙 HarmonyOS】UI 布局 ( 网格布局 TableLayout )

一、网格布局 TableLayout

---

网格布局 需要设置整个布局中有多少行 , 多少列 , 每个单元格都可以设置一个组件 , 这个组件可以是单个 , 也可以是父组件嵌套多个子组件 ;

网格布局设置行列个数 : 在 TableLayout 跟标签中设置行列数 ;

① 设置行数 : ohos:row_count=“2” ;

② 设置列数 : ohos:column_count=“2”

网格布局摆放规则 : 以 $2\times 2$ 网格布局为例 ;

第 $1$ 个组件 , 自动放到第 $1$ 行第 $1$ 列 ;

第 $2$ 个组件 , 自动放到第 $1$ 行第 $2$ 列 ;

第 $3$ 个组件 , 自动放到第 $22$ 行第 $1$ 列 ;

如果 $2$ 行 $2$ 列总共 $4$ 个格子 , 只有 $3$ 个组件 , 填不满 , 后面就空着 ;

网格布局示例 :

<?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:row_count="2"
    ohos:column_count="2">

    <!--
        该网格布局设置了两行两列
        下面是三个组件 , 会自动摆放到对应的位置
        如 : 第 1 个组件 , 自动放到第 1 行第 1 列 ;
        第 2 个组件 , 自动放到第 1 行第 2 列 ;
        第 3 个组件 , 自动放到第 2 行第 1 列 ;
        如果 2 行 2 列总共 4 个格子填不满 , 后面就空着
     -->

    <!-- 1行1列 -->
    <Text
        ohos:id="$+id:text1"
        ohos:height="match_content"
        ohos:width="match_content"
        ohos:background_element="#FF0000"
        ohos:layout_alignment="horizontal_center"
        ohos:text=" Hello World 1 "
        ohos:text_size="50"/>

    <!-- 1行2列 -->
    <Text
        ohos:id="$+id:text2"
        ohos:height="match_content"
        ohos:width="match_content"
        ohos:background_element="#00FF00"
        ohos:layout_alignment="horizontal_center"
        ohos:text=" Hello World 2 "
        ohos:text_size="50"/>

    <!-- 2行1列 -->
    <Text
        ohos:id="$+id:text3"
        ohos:height="match_content"
        ohos:width="match_content"
        ohos:background_element="#0000FF"
        ohos:layout_alignment="horizontal_center"
        ohos:text=" Hello World 3 "
        ohos:text_size="50"/>

</TableLayout>

效果展示 :