文章目錄

• 一、網格布局 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 )的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。