想了解更多關于開源的內容，請訪問：

51CTO 開源基礎軟件社區

https://ost.51cto.com

通過之前的學習，想必大家對如何通過Row和Column來構建一個最基礎的頁面已經有了一個初步的掌握，接下來，筆者將會介紹更多的頁面布局，來將我們的頁面變得更加豐富精彩。在本篇博客中，筆者將會介紹Grid/GridItem(網格布局)，盡可能的詳細的解釋該布局的用法以及在實際開發過程中一些小技巧的使用。

Grid

首先我們來對Grid進行一個初步的認識：

網格布局（Grid）是由“行”和“列”分割的單元格所組成，通過指定“項目”所在的單元格做出各種各樣的布局。網格布局具有較強的頁面均分能力，子組件占比控制能力，是一種重要自適應布局，其使用場景有九宮格圖片展示、日歷、計算器等。

上面的內容是官方給出的對Grid的文字定義，不難看出，網格布局在特定場景（例如日歷、計算器等）下是有較大優勢的，它可以輕松的將頁面進行均分，大大減少代碼量，提高編碼效率，而且做出來的頁面會更加簡潔美觀。我們用圖片來解釋會更加明了，如下圖：

在這張圖片中，Grid網格布局通過其子組件GridItem將整個頁面劃分為一個九宮格的布局形式，我們可以在每一個GridItem再進行布局，從而實現每一個GridItem都能實現其獨特的功能，大大提升了頁面的美觀以及實用性，需要注意的是，Grid的子組件只能是GridItem,所以，這兩者一般是組合出現使用的。

如圖便是一個計算器的頁面，這個頁面便是使用Grid的一個典型例子，在每一個GridItem中放入一個Button按鈕，并賦予他們各自的功能，最終組成整個計算器系統的頁面。

又例如此圖，軟件中它將不同的餐品放在一張張單獨的卡片中，這也是可以通過Grid來進行布局的，這樣的布局使得整個頁面清晰明了，有利于顧客更好地選餐。總之這是一個應用場景非常廣的布局方式，接下來，筆者將詳細講解一下該布局的寫法。

排列方式

由上面兩個例子我們不難發現，Grid可以自由的設置其子組件GridItem的大小、長寬比以及數量，那么我們該如何來設置它呢？

Grid組件提供了rowsTemplate和columnsTemplate屬性用于設置網格布局行列數量與尺寸占比。

rowsTemplate和columnsTemplate屬性值是一個由多個空格和’數字+fr’間隔拼接的字符串，fr的個數即網格布局的行或列數，fr前面的數值大小，用于計算該行或列在網格布局寬度上的占比，最終決定該行或列寬度。

columnsTemplate的屬性描述：

設置當前網格布局列的數量或最小列寬值，不設置時默認1列。
例如, ‘1fr 1fr 2fr’ 是將父組件分3列，將父組件允許的寬分為4等份，第一列占1份，第二列占1份，第三列占2份。
columnsTemplate(‘repeat(auto-fit, track-size)’)是設置最小列寬值為track-size，自動計算列數和實際列寬。
columnsTemplate(‘repeat(auto-fill, track-size)’)是設置固定列寬值為track-size，自動計算列數。
其中repeat、auto-fit、auto-fill為關鍵字。track-size為列寬，支持的單位包括px、vp、%或有效數字，track-size至少包括一個有效列寬。
說明：
設置為’0fr’時，該列的列寬為0，不顯示GridItem。設置為其他非法值時，GridItem顯示為固定1列。

rowsTemplate的屬性描述：

設置當前網格布局行的數量或最小行高值，不設置時默認1行。
例如, ‘1fr 1fr 2fr’是將父組件分三行，將父組件允許的高分為4等份，第一行占1份，第二行占一份，第三行占2份。
rowsTemplate(‘repeat(auto-fit, track-size)’)是設置最小行高值為track-size，自動計算行數和實際行高。
rowsTemplate(‘repeat(auto-fill, track-size)’)是設置固定行高值為track-size，自動計算行數。
其中repeat、auto-fit、auto-fill為關鍵字。track-size為行高，支持的單位包括px、vp、%或有效數字，track-size至少包括一個有效行高。
說明：
設置為’0fr’，則這一行的行寬為0，這一行GridItem不顯示。設置為其他非法值，按固定1行處理。

通過下面這張圖可以看得更加明了一點。

上圖使用代碼演示就是這樣:

Grid() {
  ...
}
.rowsTemplate('1fr 1fr 1fr')
.columnsTemplate('1fr 2fr 1fr')

這段代碼通過rowsTemplate將整個頁面的分為了3行,每一行都為一等份 [ 使用(‘1fr 1fr 1fr’)表示 ] ,再在此基礎上分出了3列,其中兩邊為一份,中間為兩份 [ 使用(‘1fr 2fr 1fr’)表示 ],這樣切割下來,便成為了如上圖那樣的網格型布局了.

這樣一個頁面就有了一個初步的模型,接下來,我們以計算器為例,向GridItem中填充一些簡單的內容:

通常的,我們只要向GridItem中加入Text組件,就可以實現文字的填充:

GridItem() {
  Text('1')
    ...
}

但是在下圖的這種情況中,我們還要使用到columnStart和columnEnd這兩個屬性。

這兩個屬性表示指定當前元素的起始列號和終點列號，例如，上圖中的“0”按鈕，它與其他按鈕不同的是，它橫跨了第一列和第二列，所以在這個按鈕中填充文本時，就要加上起始和終點列號，代碼如下：

GridItem() {
  Text("0")
    ...
}
.columnStart(1)
.columnEnd(2)//colum表示列，該按鈕橫跨第一列到第二列，所以起始Start為1，終點End為2

再例如上圖中的“=”按鈕，代碼如下：

GridItem() {
  Text("=")
    ...
}
.rowStart(5)
.rowEnd(6)//row表示行，該按鈕橫跨第五列到第六列，所以起始Start為5，終點End為6

上面的所有情況都是在已經設置好行和列的數量及占比的前提下進行的，如果我們直接讓GridItem去自行排列，則又是使用另外一種方法。

設置主軸方向

這里我們就需要要確定一個頁面的主軸，主軸是水平方向還是垂直方向決定了接下來GridItem按什么方式排列，這里會引入Grid的一個新的屬性：layoutDirection，該屬性的參數是GridDirection，通過這個參數我們可以選擇該Grid的主軸方向，如圖：

從圖中我們可以看到，一共有4個選項，分別是Row、Column、RowReverse、ColumnReverse，前面兩個分別代表以水平正向排列和垂直正向排列（從左往右，從上往下），而后面兩個則是分別代表水平反向排列和垂直反向排列（從右往左，從下往上）,這里我們還需要引入一個新的屬性：maxCount和minCount，這兩個屬性代表著主軸上能排列的最大和最小的GridItem數量，例如

Grid() {
  ...
}
.layoutDirection(GridDirection.Row)//代表主軸方向為水平方向，即從左往右排列
.maxCount(3)//代表水平方向最多有3個GridItem，多于3個就要向下換行

如圖：

同理，將主軸換為垂直方向。

Grid() {
  ...
}
.layoutDirection(GridDirection.Column)//代表主軸方向為垂直方向，即從上往下排列
.maxCount(3)//代表垂直方向最多有3個GridItem，多于3個就要向右換行

如圖：

設置行列間距

接下來，我們要來了解一下如何控制各個GridItem之間的距離，將頁面做得更加美觀。
設置行列間距只需要用到兩個簡單的屬性：rowsGap和columnsGap，我們直接進入代碼演示：

Grid() {
  ...
}
.columnsGap(10)
.rowsGap(15)

我們只需要根據頁面的布局，更改這兩個屬性中的數據，就可以自由的調整各個元素之間的距離。

想了解更多關于開源的內容，請訪問：

51CTO 開源基礎軟件社區

https://ost.51cto.com