一、网格布局 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>

  

 

  
1
  
2
  
3
  
4
  
5
  
6
  
7
  
8
  
9
  
10
  
11
  
12
  
13
  
14
  
15
  
16
  
17
  
18
  
19
  
20
  
21
  
22
  
23
  
24
  
25
  
26
  
27
  
28
  
29
  
30
  
31
  
32
  
33
  
34
  
35
  
36
  
37
  
38
  
39
  
40
  
41
  
42
  
43
  
44
  
45
  
46
  
47
  
48
 

效果展示 :

文章来源: hanshuliang.blog.csdn.net，作者：韩曙亮，版权归原作者所有，如需转载，请联系作者。

原文链接：hanshuliang.blog.csdn.net/article/details/111659893