OpenHarmony 北向應(yīng)用開(kāi)發(fā)—ArkTS語(yǔ)言入門(mén)之構(gòu)建應(yīng)用頁(yè)面 3.0
想了解更多關(guān)于開(kāi)源的內(nèi)容，請(qǐng)?jiān)L問(wèn)：
通過(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ě)法。
排列方式
由上面兩個(gè)例子我們不難發(fā)現(xiàn)，Grid可以自由的設(shè)置其子組件GridItem的大小、長(zhǎng)寬比以及數(shù)量，那么我們?cè)撊绾蝸?lái)設(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è)有效列寬。
說(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è)置主軸方向
這里我們就需要要確定一個(gè)頁(yè)面的主軸，主軸是水平方向還是垂直方向決定了接下來(lái)GridItem按什么方式排列，這里會(huì)引入Grid的一個(gè)新的屬性：layoutDirection，該屬性的參數(shù)是GridDirection，通過(guò)這個(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è)置行列間距
接下來(lái)，我們要來(lái)了解一下如何控制各個(gè)GridItem之間的距離，將頁(yè)面做得更加美觀。
設(shè)置行列間距只需要用到兩個(gè)簡(jiǎn)單的屬性：rowsGap和columnsGap，我們直接進(jìn)入代碼演示：
Grid() {
...
}
.columnsGap(10)
.rowsGap(15)
我們只需要根據(jù)頁(yè)面的布局，更改這兩個(gè)屬性中的數(shù)據(jù)，就可以自由的調(diào)整各個(gè)元素之間的距離。
