【鴻蒙 HarmonyOS】UI 布局 ( 網格布局 TableLayout )

文章目錄

• ​​一、網格布局 TableLayout​​

一、網格布局 TableLayout

網格布局 需要設定整個布局中有多少行 , 多少列 , 每個單元格都可以設定一個元件 , 這個元件可以是單個 , 也可以是父元件嵌套多個子元件 ;

網格布局設定行列個數 : 在 TableLayout 跟标簽中設定行列數 ;

① 設定行數 : ohos:row_count=“2” ;

② 設定列數 : ohos:column_count=“2”

網格布局擺放規則 : 以

2

×

2

2 \times 2

2×2 網格布局為例 ;

第

1

1

1 個元件 , 自動放到第

1

1

1 行第

1

1

1 列 ;

第

2

2

2 個元件 , 自動放到第

1

1

1 行第

2

2

2 列 ;

第

3

3

3 個元件 , 自動放到第

22

22

22 行第

1

1

1 列 ;

如果

2

2

2 行

2

2

2 列總共

4

4

4 個格子 , 隻有

3

3

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>      

效果展示 :