OpenHarmony 北向應(yīng)用開發(fā)—ArkTS語言入門之構(gòu)建應(yīng)用頁面 3.0
通過之前的學(xué)習(xí)，想必大家對如何通過Row和Column來構(gòu)建一個最基礎(chǔ)的頁面已經(jīng)有了一個初步的掌握，接下來，筆者將會介紹更多的頁面布局，來將我們的頁面變得更加豐富精彩。在本篇博客中，筆者將會介紹Grid/GridItem(網(wǎng)格布局)，盡可能的詳細(xì)的解釋該布局的用法以及在實際開發(fā)過程中一些小技巧的使用。
Grid
首先我們來對Grid進(jìn)行一個初步的認(rèn)識：
網(wǎng)格布局（Grid）是由“行”和“列”分割的單元格所組成，通過指定“項目”所在的單元格做出各種各樣的布局。網(wǎng)格布局具有較強(qiáng)的頁面均分能力，子組件占比控制能力，是一種重要自適應(yīng)布局，其使用場景有九宮格圖片展示、日歷、計算器等。
上面的內(nèi)容是官方給出的對Grid的文字定義，不難看出，網(wǎng)格布局在特定場景（例如日歷、計算器等）下是有較大優(yōu)勢的，它可以輕松的將頁面進(jìn)行均分，大大減少代碼量，提高編碼效率，而且做出來的頁面會更加簡潔美觀。我們用圖片來解釋會更加明了，如下圖：
在這張圖片中，Grid網(wǎng)格布局通過其子組件GridItem將整個頁面劃分為一個九宮格的布局形式，我們可以在每一個GridItem再進(jìn)行布局，從而實現(xiàn)每一個GridItem都能實現(xiàn)其獨(dú)特的功能，大大提升了頁面的美觀以及實用性，需要注意的是，Grid的子組件只能是GridItem,所以，這兩者一般是組合出現(xiàn)使用的。
如圖便是一個計算器的頁面，這個頁面便是使用Grid的一個典型例子，在每一個GridItem中放入一個Button按鈕，并賦予他們各自的功能，最終組成整個計算器系統(tǒng)的頁面。
又例如此圖，軟件中它將不同的餐品放在一張張單獨(dú)的卡片中，這也是可以通過Grid來進(jìn)行布局的，這樣的布局使得整個頁面清晰明了，有利于顧客更好地選餐。總之這是一個應(yīng)用場景非常廣的布局方式，接下來，筆者將詳細(xì)講解一下該布局的寫法。
排列方式
由上面兩個例子我們不難發(fā)現(xiàn)，Grid可以自由的設(shè)置其子組件GridItem的大小、長寬比以及數(shù)量，那么我們該如何來設(shè)置它呢？
Grid組件提供了rowsTemplate和columnsTemplate屬性用于設(shè)置網(wǎng)格布局行列數(shù)量與尺寸占比。
rowsTemplate和columnsTemplate屬性值是一個由多個空格和’數(shù)字+fr’間隔拼接的字符串，fr的個數(shù)即網(wǎng)格布局的行或列數(shù)，fr前面的數(shù)值大小，用于計算該行或列在網(wǎng)格布局寬度上的占比，最終決定該行或列寬度。
columnsTemplate的屬性描述：
設(shè)置當(dāng)前網(wǎng)格布局列的數(shù)量或最小列寬值，不設(shè)置時默認(rèn)1列。
例如, ‘1fr 1fr 2fr’ 是將父組件分3列，將父組件允許的寬分為4等份，第一列占1份，第二列占1份，第三列占2份。
columnsTemplate(‘repeat(auto-fit, track-size)’)是設(shè)置最小列寬值為track-size，自動計算列數(shù)和實際列寬。
columnsTemplate(‘repeat(auto-fill, track-size)’)是設(shè)置固定列寬值為track-size，自動計算列數(shù)。
其中repeat、auto-fit、auto-fill為關(guān)鍵字。track-size為列寬，支持的單位包括px、vp、%或有效數(shù)字，track-size至少包括一個有效列寬。
說明：
設(shè)置為’0fr’時，該列的列寬為0，不顯示GridItem。設(shè)置為其他非法值時，GridItem顯示為固定1列。
rowsTemplate的屬性描述：
設(shè)置當(dāng)前網(wǎng)格布局行的數(shù)量或最小行高值，不設(shè)置時默認(rèn)1行。
例如, ‘1fr 1fr 2fr’是將父組件分三行，將父組件允許的高分為4等份，第一行占1份，第二行占一份，第三行占2份。
rowsTemplate(‘repeat(auto-fit, track-size)’)是設(shè)置最小行高值為track-size，自動計算行數(shù)和實際行高。
rowsTemplate(‘repeat(auto-fill, track-size)’)是設(shè)置固定行高值為track-size，自動計算行數(shù)。
其中repeat、auto-fit、auto-fill為關(guān)鍵字。track-size為行高，支持的單位包括px、vp、%或有效數(shù)字，track-size至少包括一個有效行高。
說明：
設(shè)置為’0fr’，則這一行的行寬為0，這一行GridItem不顯示。設(shè)置為其他非法值，按固定1行處理。
通過下面這張圖可以看得更加明了一點(diǎn)。
上圖使用代碼演示就是這樣:
Grid() {
...
}
.rowsTemplate('1fr 1fr 1fr')
.columnsTemplate('1fr 2fr 1fr')這段代碼通過rowsTemplate將整個頁面的分為了3行,每一行都為一等份 [ 使用(‘1fr 1fr 1fr’)表示 ] ,再在此基礎(chǔ)上分出了3列,其中兩邊為一份,中間為兩份 [ 使用(‘1fr 2fr 1fr’)表示 ],這樣切割下來,便成為了如上圖那樣的網(wǎng)格型布局了.
這樣一個頁面就有了一個初步的模型,接下來,我們以計算器為例,向GridItem中填充一些簡單的內(nèi)容:
通常的,我們只要向GridItem中加入Text組件,就可以實現(xiàn)文字的填充:
GridItem() {
Text('1')
...
}但是在下圖的這種情況中,我們還要使用到columnStart和columnEnd這兩個屬性。
這兩個屬性表示指定當(dāng)前元素的起始列號和終點(diǎn)列號，例如，上圖中的“0”按鈕，它與其他按鈕不同的是，它橫跨了第一列和第二列，所以在這個按鈕中填充文本時，就要加上起始和終點(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è)置主軸方向
這里我們就需要要確定一個頁面的主軸，主軸是水平方向還是垂直方向決定了接下來GridItem按什么方式排列，這里會引入Grid的一個新的屬性：layoutDirection，該屬性的參數(shù)是GridDirection，通過這個參數(shù)我們可以選擇該Grid的主軸方向，如圖：
從圖中我們可以看到，一共有4個選項，分別是Row、Column、RowReverse、ColumnReverse，前面兩個分別代表以水平正向排列和垂直正向排列（從左往右，從上往下），而后面兩個則是分別代表水平反向排列和垂直反向排列（從右往左，從下往上）,這里我們還需要引入一個新的屬性：maxCount和minCount，這兩個屬性代表著主軸上能排列的最大和最小的GridItem數(shù)量，例如
Grid() {
...
}
.layoutDirection(GridDirection.Row)//代表主軸方向為水平方向，即從左往右排列
.maxCount(3)//代表水平方向最多有3個GridItem，多于3個就要向下?lián)Q行如圖：
同理，將主軸換為垂直方向。
Grid() {
...
}
.layoutDirection(GridDirection.Column)//代表主軸方向為垂直方向，即從上往下排列
.maxCount(3)//代表垂直方向最多有3個GridItem，多于3個就要向右換行如圖：
設(shè)置行列間距
接下來，我們要來了解一下如何控制各個GridItem之間的距離，將頁面做得更加美觀。
設(shè)置行列間距只需要用到兩個簡單的屬性：rowsGap和columnsGap，我們直接進(jìn)入代碼演示：
Grid() {
...
}
.columnsGap(10)
.rowsGap(15)
我們只需要根據(jù)頁面的布局，更改這兩個屬性中的數(shù)據(jù)，就可以自由的調(diào)整各個元素之間的距離。
