文章目录

• 一、网格布局 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"?> <TableLayoutxmlns: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列 --><Textohos: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列 --><Textohos: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列 --><Textohos: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>

效果展示 :

总结

以上是生活随笔为你收集整理的【鸿蒙 HarmonyOS】UI 布局 ( 网格布局 TableLayout )的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。