文章目录
一、网格布局 TableLayout
一、网格布局 TableLayout
网格布局 需要设置整个布局中有多少行 , 多少列 , 每个单元格都可以设置一个组件 , 这个组件可以是单个 , 也可以是父组件嵌套多个子组件 ;
网格布局设置行列个数 : 在 TableLayout 跟标签中设置行列数 ;
① 设置行数 : ohos:row_count=“2” ;
② 设置列数 : ohos:column_count=“2”
网格布局摆放规则 : 以 2 × 2 2 \times 22×2 网格布局为例 ;
第 1 11 个组件 , 自动放到第 1 11 行第 1 11 列 ;
第 2 22 个组件 , 自动放到第 1 11 行第 2 22 列 ;
第 3 33 个组件 , 自动放到第 22 2222 行第 1 11 列 ;
如果 2 22 行 2 22 列总共 4 44 个格子 , 只有 3 33 个组件 , 填不满 , 后面就空着 ;
网格布局示例 :
<?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>
效果展示 :
