通過(guò)之前的學(xué)習(xí)，想必大家對(duì)如何通過(guò)Row和Column來(lái)構(gòu)建一個(gè)最基礎(chǔ)的頁(yè)面已經(jīng)有了一個(gè)初步的掌握，接下來(lái)，筆者將會(huì)介紹更多的頁(yè)面布局，來(lái)將我們的頁(yè)面變得更加豐富精彩。在本篇博客中，筆者將會(huì)介紹Grid/GridItem(網(wǎng)格布局)，盡可能的詳細(xì)的解釋該布局的用法以及在實(shí)際開(kāi)發(fā)過(guò)程中一些小技巧的使用。

Grid

首先我們來(lái)對(duì)Grid進(jìn)行一個(gè)初步的認(rèn)識(shí)：

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

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

在這張圖片中，Grid網(wǎng)格布局通過(guò)其子組件GridItem將整個(gè)頁(yè)面劃分為一個(gè)九宮格的布局形式，我們可以在每一個(gè)GridItem再進(jìn)行布局，從而實(shí)現(xiàn)每一個(gè)GridItem都能實(shí)現(xiàn)其獨(dú)特的功能，大大提升了頁(yè)面的美觀以及實(shí)用性，需要注意的是，Grid的子組件只能是GridItem,所以，這兩者一般是組合出現(xiàn)使用的。

圖片

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

又例如此圖，軟件中它將不同的餐品放在一張張單獨(dú)的卡片中，這也是可以通過(guò)Grid來(lái)進(jìn)行布局的，這樣的布局使得整個(gè)頁(yè)面清晰明了，有利于顧客更好地選餐?？傊@是一個(gè)應(yīng)用場(chǎng)景非常廣的布局方式，接下來(lái)，筆者將詳細(xì)講解一下該布局的寫(xiě)法。

排列方式

Grid組件提供了rowsTemplate和columnsTemplate屬性用于設(shè)置網(wǎng)格布局行列數(shù)量與尺寸占比。

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

columnsTemplate的屬性描述：

設(shè)置當(dāng)前網(wǎng)格布局列的數(shù)量或最小列寬值，不設(shè)置時(shí)默認(rèn)1列。

例如, ‘1fr 1fr 2fr’ 是將父組件分3列，將父組件允許的寬分為4等份，第一列占1份，第二列占1份，第三列占2份。

columnsTemplate(‘repeat(auto-fit, track-size)’)是設(shè)置最小列寬值為track-size，自動(dòng)計(jì)算列數(shù)和實(shí)際列寬。

columnsTemplate(‘repeat(auto-fill, track-size)’)是設(shè)置固定列寬值為track-size，自動(dòng)計(jì)算列數(shù)。

其中repeat、auto-fit、auto-fill為關(guān)鍵字。track-size為列寬，支持的單位包括px、vp、%或有效數(shù)字，track-size至少包括一個(gè)有效列寬。

說(shuō)明：

設(shè)置為’0fr’時(shí)，該列的列寬為0，不顯示GridItem。設(shè)置為其他非法值時(shí)，GridItem顯示為固定1列。

rowsTemplate的屬性描述：

設(shè)置當(dāng)前網(wǎng)格布局行的數(shù)量或最小行高值，不設(shè)置時(shí)默認(rèn)1行。

例如, ‘1fr 1fr 2fr’是將父組件分三行，將父組件允許的高分為4等份，第一行占1份，第二行占一份，第三行占2份。

rowsTemplate(‘repeat(auto-fit, track-size)’)是設(shè)置最小行高值為track-size，自動(dòng)計(jì)算行數(shù)和實(shí)際行高。

rowsTemplate(‘repeat(auto-fill, track-size)’)是設(shè)置固定行高值為track-size，自動(dòng)計(jì)算行數(shù)。

其中repeat、auto-fit、auto-fill為關(guān)鍵字。track-size為行高，支持的單位包括px、vp、%或有效數(shù)字，track-size至少包括一個(gè)有效行高。

說(shuō)明：

設(shè)置為’0fr’，則這一行的行寬為0，這一行GridItem不顯示。設(shè)置為其他非法值，按固定1行處理。

通過(guò)下面這張圖可以看得更加明了一點(diǎn)。

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

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

這段代碼通過(guò)rowsTemplate將整個(gè)頁(yè)面的分為了3行,每一行都為一等份 [ 使用('1fr 1fr 1fr')表示 ] ,再在此基礎(chǔ)上分出了3列,其中兩邊為一份,中間為兩份 [ 使用('1fr 2fr 1fr')表示 ],這樣切割下來(lái),便成為了如上圖那樣的網(wǎng)格型布局了. 這樣一個(gè)頁(yè)面就有了一個(gè)初步的模型,接下來(lái),我們以計(jì)算器為例,向GridItem中填充一些簡(jiǎn)單的內(nèi)容:

圖片

通常的,我們只要向GridItem中加入Text組件,就可以實(shí)現(xiàn)文字的填充:

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

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

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

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

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

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

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

設(shè)置主軸方向

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

Grid() {
  ...
}
.layoutDirection(GridDirection.Row)//代表主軸方向?yàn)樗椒较?，即從左往右排?.maxCount(3)//代表水平方向最多有3個(gè)GridItem，多于3個(gè)就要向下?lián)Q行

如圖：

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

Grid() {
  ...
}
.layoutDirection(GridDirection.Column)//代表主軸方向?yàn)榇怪狈较颍磸纳贤屡帕?.maxCount(3)//代表垂直方向最多有3個(gè)GridItem，多于3個(gè)就要向右換行

如圖：

圖片

設(shè)置行列間距

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

我們只需要根據(jù)頁(yè)面的布局，更改這兩個(gè)屬性中的數(shù)據(jù)，就可以自由的調(diào)整各個(gè)元素之間的距離。

本篇博客到此為止，如果文章中有疏漏的地方，還請(qǐng)各位讀者多多包涵指正！

本博客由 金陵科技學(xué)院-開(kāi)放原子開(kāi)源社 張子航編寫(xiě)。