想了解更多關(guān)于開源的內(nèi)容，請?jiān)L問：

本站開源基礎(chǔ)軟件社區(qū)

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

Grid

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

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

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

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

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

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

排列方式

由上面兩個(gè)例子我們不難發(fā)現(xiàn)，Grid可以自由的設(shè)置其子組件GridItem的大小、長寬比以及數(shù)量，那么我們該如何來設(shè)置它呢？

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è)有效列寬。
說明：
設(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è)有效行高。
說明：
設(shè)置為’0fr’，則這一行的行寬為0，這一行GridItem不顯示。設(shè)置為其他非法值，按固定1行處理。

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

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

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

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

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

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

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

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

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

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è)置主軸方向

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

從圖中我們可以看到，一共有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è)置行列間距

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

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

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

想了解更多關(guān)于開源的內(nèi)容，請?jiān)L問：

本站開源基礎(chǔ)軟件社區(qū)