《鴻蒙HarmonyOS應(yīng)用開發(fā)基礎(chǔ)》課件 第4章 ArkUI（上）

第4章ArkUI（上）《鴻蒙HarmonyOS應(yīng)用開發(fā)基礎(chǔ)》學(xué)習(xí)目標(biāo)/Target了解組件的概念，能夠說出ArkUI組件的分類掌握組件的基本使用方法，能夠通過查閱鴻蒙開發(fā)文檔的方式學(xué)習(xí)組件熟悉自定義組件，能夠說明自定義組件的結(jié)構(gòu)學(xué)習(xí)目標(biāo)/Target掌握ArkUI中常用組件的使用方法，能夠靈活運(yùn)用組件掌握組件多態(tài)樣式的實(shí)現(xiàn)方法，能夠針對組件的不同內(nèi)部狀態(tài)設(shè)置不同的樣式掌握雙向數(shù)據(jù)綁定，能夠?qū)崿F(xiàn)將組件的狀態(tài)與變量的值自動(dòng)同步章節(jié)概述/SummaryUI開發(fā)對于提升用戶體驗(yàn)、增強(qiáng)應(yīng)用吸引力及確保應(yīng)用功能直觀、易用至關(guān)重要。鴻蒙應(yīng)用的UI開發(fā)框架ArkUI為開發(fā)者提供了豐富的組件，通過使用這些組件可以極大地提高UI的開發(fā)效率。本章將對ArkUI的基礎(chǔ)知識(shí)進(jìn)行詳細(xì)講解。目錄/Contents4.14.2初識(shí)組件自定義組件4.3ArkUI中的常用組件目錄/Contents4.44.5組件多態(tài)樣式雙向數(shù)據(jù)綁定4.6階段案例——華為登錄頁面初識(shí)組件4.14.1.1什么是組件

先定一個(gè)小目標(biāo)！了解組件的概念，能夠說出ArkUI組件的分類4.1.1什么是組件組件是獨(dú)立的代碼塊，具有特定的功能和樣式，并且可以在頁面中獨(dú)立使用和重復(fù)使用。ArkUI為開發(fā)者提供了可以直接在程序中使用的組件，通過組件可以快速構(gòu)建UI，提高UI的開發(fā)效率和一致性。4.1.1什么是組件組件可以按照其功能和用途進(jìn)行分類，ArkUI中的組件分類如下。①基礎(chǔ)組件：提供了構(gòu)建UI的基礎(chǔ)，如按鈕、單行文本輸入框、標(biāo)簽等，它們通常是構(gòu)建其他復(fù)雜組件的基礎(chǔ)。②容器組件：幫助開發(fā)者構(gòu)建不同樣式的頁面布局，如柵格系統(tǒng)、彈性布局、網(wǎng)格布局等，使頁面的布局更加靈活。③媒體組件：用于處理和展示音視頻內(nèi)容，豐富UI的視覺和交互體驗(yàn)。④繪制組件：用于繪制圖形，例如線條、矩形、圓形等，通常用于實(shí)現(xiàn)涂鴉板、繪圖工具等應(yīng)用場景。⑤畫布組件：提供了一個(gè)可繪制的畫布，開發(fā)者可以在畫布上繪制各種圖形、文本等內(nèi)容。這些組件通常用于創(chuàng)建自定義的圖形界面或?qū)崿F(xiàn)特定的繪圖功能。⑥其他組件：包括操作塊組件、彈出框組件、氣泡組件、工具欄組件等。4.1.1什么是組件ArkUI為組件提供了屬性和事件，包括所有組件通用的屬性和事件，以及每個(gè)組件特有的屬性和事件。關(guān)于屬性和事件的介紹如下。①屬性用于定義組件的樣式、數(shù)據(jù)、特性等。其中，定義組件樣式的屬性與網(wǎng)頁中的CSS樣式屬性類似，從而能讓W(xué)eb前端開發(fā)者快速上手鴻蒙應(yīng)用的UI開發(fā)。②事件用于定義組件的交互邏輯。開發(fā)者可以為組件的事件設(shè)置事件處理程序，當(dāng)用戶的交互觸發(fā)了事件時(shí)，程序就會(huì)執(zhí)行事件處理程序，從而處理用戶的操作。4.1.1什么是組件組件的屬性和事件都是以調(diào)用方法的形式設(shè)置的。例如，調(diào)用width()方法可以設(shè)置width屬性，調(diào)用onClick()方法可以設(shè)置onClick事件。通過鏈?zhǔn)秸{(diào)用的方式可以連續(xù)設(shè)置多個(gè)屬性和事件。4.1.2組件的基本使用方法

先定一個(gè)小目標(biāo)！掌握組件的基本使用方法，能夠通過查閱鴻蒙開發(fā)文檔的方式學(xué)習(xí)組件4.1.2組件的基本使用方法鴻蒙開發(fā)文檔提供了ArkUI組件的示例代碼，用于展示組件的實(shí)際應(yīng)用，這些示例代碼可以幫助開發(fā)者了解如何使用組件。建議初學(xué)者在學(xué)習(xí)時(shí)，一邊學(xué)習(xí)一邊查閱鴻蒙開發(fā)文檔，通過鴻蒙開發(fā)文檔獲取組件的相關(guān)信息。4.1.2組件的基本使用方法通過查閱鴻蒙開發(fā)文檔的方式學(xué)習(xí)ArkUI組件的基本流程如下。①在鴻蒙開發(fā)文檔中找到所需組件，閱讀組件的概述部分，了解組件的基本信息、特性和用途。②查看文檔中提供的示例代碼，以便了解如何使用該組件及其各種屬性和方法。③根據(jù)文檔提供的示例代碼和說明，在DevEcoStudio中進(jìn)行實(shí)際操作并測試組件的各種功能。④如果效果與實(shí)際需求有差異，可以進(jìn)一步調(diào)整和修改代碼，以達(dá)到期望的效果。4.1.2組件的基本使用方法在使用組件時(shí)，經(jīng)常會(huì)用到通用屬性和通用事件。通過鴻蒙開發(fā)文檔查閱通用屬性和通用事件的相關(guān)信息，文檔的路徑為“API參考

>應(yīng)用框架

>ArkUI（方舟UI框架）

>ArkTS組件

>組件通用信息”。4.1.2組件的基本使用方法下面列舉一些ArkUI中常用的通用屬性和通用事件。類型名稱說明通用屬性width設(shè)置寬度height設(shè)置高度margin設(shè)置外邊距padding設(shè)置內(nèi)邊距background設(shè)置背景backgroundColor設(shè)置背景顏色border設(shè)置邊框的樣式borderRadius設(shè)置邊框的圓角半徑通用事件onClick點(diǎn)擊事件4.1.2組件的基本使用方法在設(shè)置組件的屬性時(shí)，經(jīng)常需要設(shè)置一些數(shù)字（如高度、寬度）和顏色（如背景顏色、邊框色）。下面對ArkUI中數(shù)字的單位和顏色的取值分別進(jìn)行介紹。4.1.2組件的基本使用方法（1）數(shù)字的單位ArkUI中數(shù)字的默認(rèn)單位是vp。vp的含義是虛擬像素（virtualpixel），它提供了一種靈活的方式來使組件適應(yīng)不同屏幕像素密度的顯示效果，使組件在不同像素密度的設(shè)備上具有一致的視覺體驗(yàn)。在代碼中，直接使用number類型的數(shù)字即表示使用vp單位，此外還可以使用string類型的百分比數(shù)來設(shè)置相對值。4.1.2組件的基本使用方法（2）顏色的取值方式ArkUI中顏色的取值方式有5種，分別是預(yù)定義的顏色名、十六進(jìn)制顏色值、RGB值、RGBA值以及資源中的顏色，具體如下。①預(yù)定義的顏色名：例如，Color.Red、Color.Green、Color.Blue，分別表示紅色、綠色和藍(lán)色。當(dāng)在DevEcoStudio中輸入“Color.”后，DevEcoStudio會(huì)提示所有可用的顏色名。4.1.2組件的基本使用方法②十六進(jìn)制顏色值：有字符串和數(shù)字兩種類型，具體如下。字符串：由“#”開頭的8位十六進(jìn)制數(shù)字符串組成，每兩位代表一個(gè)值，一共4個(gè)值，從左到右依次表示不透明度、紅色、綠色、藍(lán)色，每個(gè)值的取值范圍是00~FF。如果每個(gè)值的兩位都相同，可以簡寫成1位，例如'#FFFF0000'（紅色）可以簡寫為'#FF00'。如果不需要設(shè)置不透明度，可以省略。例如，'#FFFF0000'可以簡寫成'#FF0000'或'#F00'。十六進(jìn)制顏色值中的英文字母不區(qū)分大小寫。數(shù)字：由“0x”開頭的6位十六進(jìn)制數(shù)表示，每兩位代表一個(gè)值，一共3個(gè)值，從左到右分別表示紅色、綠色、藍(lán)色，每個(gè)值的取值范圍是00～FF。例如，0xFF0000表示紅色。4.1.2組件的基本使用方法③RGB值：使用'rgb(r,g,b)'格式表示，其中r、g和b分別表示紅色、綠色、藍(lán)色，每個(gè)顏色的取值范圍為0~255的整數(shù)。例如，'rgb(255,0,0)'表示紅色。④RGBA值：使用'rgba(r,g,b,a)'格式表示，它相比RGB值多了a，a表示不透明度。不透明度的取值范圍為0~1，0表示完全透明。例如，'rgba(255,0,0,0.5)'表示半透明的紅色。⑤資源中的顏色：通過$r()函數(shù)讀取entry/src/main/resources/base目錄下的color.json文件中的內(nèi)容，寫法為“$r('app.color.資源名')”。4.1.2組件的基本使用方法下面演示如何通過查閱鴻蒙開發(fā)文檔的方式實(shí)現(xiàn)按鈕效果。自定義組件4.24.2自定義組件

先定一個(gè)小目標(biāo)！熟悉自定義組件，能夠說明自定義組件的結(jié)構(gòu)4.2自定義組件在entry/src/main/ets/pages目錄下，每個(gè)文件對應(yīng)一個(gè)頁面，在每個(gè)文件中可以定義多個(gè)自定義組件。打開該目錄下的Index.ets文件，會(huì)看到里面的代碼主要包括@Entry、@Component、structIndex{}、@State和build()，示例代碼如下。@Entry@ComponentstructIndex{@Statemessage:string='HelloWorld';build(){……（此處省略一些代碼）

}}4.2自定義組件1.裝飾器裝飾器用于裝飾類、結(jié)構(gòu)、方法以及變量，并賦予特殊的含義。裝飾器既可以與被裝飾的內(nèi)容寫在同一行，用空格分隔，也可以單獨(dú)寫在一行，寫在被裝飾內(nèi)容的上方。多個(gè)裝飾器可以同時(shí)使用，用空格或換行分隔即可。常用的裝飾器有：@Component@Entry@State@Preview4.2自定義組件（1）@Component使用@Component裝飾的struct具有組件化能力，能夠成為一個(gè)獨(dú)立的組件，即自定義組件。自定義組件可以調(diào)用其他自定義組件和ArkUI提供的組件，自定義組件內(nèi)部必須使用build()方法來描述UI結(jié)構(gòu)。4.2自定義組件（2）@Entry@Entry用于將一個(gè)自定義組件裝飾為頁面的入口組件。入口組件用于展示頁面，一個(gè)頁面只能有一個(gè)入口組件。當(dāng)一個(gè)頁面有入口組件時(shí)，需要通過自動(dòng)或手動(dòng)的方式將頁面注冊到entry/src/main/resources/base/profile目錄下的main_pages.json文件中，具體如下。①自動(dòng)注冊：通過“新建”→“Page”→“EmptyPage”的方式創(chuàng)建頁面，頁面會(huì)自動(dòng)注冊到main_pages.json文件中。②手動(dòng)注冊：通過“新建”→“ArkTSFile”的方式創(chuàng)建頁面時(shí)，需要在main_pages.json文件中手動(dòng)注冊頁面。如果刪除了入口組件，則需要手動(dòng)從main_pages.json文件中刪除相應(yīng)的注冊頁面的代碼，否則編譯時(shí)會(huì)報(bào)錯(cuò)。4.2自定義組件對于entry/src/main/ets/pages目錄下的頁面文件，應(yīng)采用“新建”→“Page”→“EmptyPage”的方式進(jìn)行創(chuàng)建。其他目錄下的文件（非頁面）則應(yīng)采用“新建”→“ArkTSFile”的方式進(jìn)行創(chuàng)建。4.2自定義組件main_page.json文件的示例代碼如下。{"src":["pages/Index","pages/Example"]}4.2自定義組件（3）@State@State用于裝飾自定義組件內(nèi)的變量，以保存狀態(tài)數(shù)據(jù)。狀態(tài)數(shù)據(jù)變化會(huì)觸發(fā)所在組件的UI重新渲染（或稱為刷新）。所有被@State裝飾的變量必須設(shè)置初始值。（4）@Preview@Preview用于使自定義組件可以在DevEcoStudio的預(yù)覽器上預(yù)覽。入口組件不需要添加@Preview即可預(yù)覽，@Preview通常用于預(yù)覽非入口組件。4.2自定義組件2.UI描述UI描述是指以聲明式的方式來描述自定義組件的UI結(jié)構(gòu)。UI描述的代碼寫在build()方法中。在build()方法中可以使用ArkUI提供的組件和自定義組件。build()方法可以沒有內(nèi)容，如果有內(nèi)容，需要注意以下兩點(diǎn)。①對于被@Entry裝飾的自定義組件，build()方法必須有且只能有一個(gè)根組件，且該根組件必須能夠容納子組件。②對于被@Component裝飾的自定義組件，build()方法必須有且只能有一個(gè)根組件，但這個(gè)根組件可以沒有子組件。4.2自定義組件3.structstruct是指使用struct關(guān)鍵字聲明的結(jié)構(gòu)（或稱為結(jié)構(gòu)體），被@Component裝飾的struct代表一個(gè)自定義組件。自定義組件是一個(gè)可復(fù)用的UI單元，可以組合其他組件。struct關(guān)鍵字后面的Index表示自定義組件的名稱，該名稱不能和ArkUI提供的組件名稱相同。ArkUI中的常用組件4.34.3.1Column組件

先定一個(gè)小目標(biāo)！掌握Column組件的使用方法，能夠?qū)崿F(xiàn)縱向布局效果4.3.1Column組件Column組件是用于沿垂直方向布局其子組件的容器組件，可以實(shí)現(xiàn)縱向布局效果。4.3.1Column組件Column容器（Column組件創(chuàng)建的容器）內(nèi)的子組件會(huì)按照代碼中的順序依次在垂直方向上排列。如果Column容器中的子組件的內(nèi)容超出了父容器組件的寬度或高度，超出部分不會(huì)換行也不會(huì)出現(xiàn)滾動(dòng)條。4.3.1Column組件Column組件的語法格式如下。在上述語法格式中，value參數(shù)為一個(gè)對象，該對象包含space屬性，用于設(shè)置垂直方向上子組件之間的間距。Column(value)4.3.1Column組件Column組件的常用屬性如下表所示。alignItems屬性的常用取值如下。①HorizontalAlign.Start：表示子組件在水平方向上左對齊。②HorizontalAlign.Center：默認(rèn)值，表示子組件在水平方向上居中對齊。③HorizontalAlign.End，表示子組件在水平方向上右對齊。屬性說明alignItems用于設(shè)置子組件在交叉軸（水平）方向上的對齊方式j(luò)ustifyContent用于設(shè)置子組件在主軸（垂直）方向上的對齊方式4.3.1Column組件Column容器內(nèi)子組件在水平方向上的對齊方式如下圖所示。4.3.1Column組件justifyContent屬性的常用取值如下。①FlexAlign.Start：默認(rèn)值，表示子組件在垂直方向上首端對齊，第一個(gè)子組件與首端邊沿對齊，同時(shí)后續(xù)的子組件與前一個(gè)子組件對齊。②FlexAlign.Center：表示子組件在垂直方向上中心對齊，第一個(gè)子組件與首端邊沿的距離與最后一個(gè)子組件與尾部邊沿的距離相同。③FlexAlign.End：表示子組件在垂直方向上尾部對齊，最后一個(gè)子組件與尾部邊沿對齊，其他子組件與后一個(gè)子組件對齊。4.3.1Column組件④FlexAlign.SpaceBetween：表示在垂直方向上均勻分布子組件，相鄰子組件之間距離相同。第一個(gè)子組件與首端邊沿對齊，最后一個(gè)子組件與尾部邊沿對齊。⑤FlexAlign.SpaceAround：表示在垂直方向上均勻分布子組件，相鄰子組件之間距離相同。第一個(gè)子組件到首端邊沿的距離和最后一個(gè)子組件到尾部邊沿的距離是相鄰子組件之間距離的一半。⑥FlexAlign.SpaceEvenly：表示在垂直方向上均勻分布子組件，相鄰子組件之間距離、第一個(gè)子組件與首端邊沿的距離、最后一個(gè)子組件與尾部邊沿的間距相同。4.3.1Column組件Column容器內(nèi)子組件在垂直方向上的對齊方式如下圖所示。4.3.1Column組件下面演示Column組件的使用方法。在entry/src/main/ets/pages目錄下創(chuàng)建ColumnPage.ets文件，在該文件中使用Column組件實(shí)現(xiàn)縱向布局。4.3.2Row組件

先定一個(gè)小目標(biāo)！掌握Row組件的使用方法，能夠?qū)崿F(xiàn)橫向布局效果4.3.2Row組件Row組件是用于沿水平方向布局其子組件的容器組件，可以實(shí)現(xiàn)橫向布局效果。4.3.2Row組件Row容器（Row組件創(chuàng)建的容器）內(nèi)的子組件會(huì)按照代碼中的順序依次在水平方向上排列。如果Row容器中的子組件的內(nèi)容超出了父容器組件的寬度或高度，超出部分不會(huì)換行也不會(huì)出現(xiàn)滾動(dòng)條。4.3.2Row組件Row組件的語法格式如下。在上述語法格式中，value參數(shù)為一個(gè)對象，該對象包含space屬性，用于設(shè)置水平方向上子組件的間距。Row(value)4.3.2Row組件Row組件的常用屬性如下表所示。alignItems屬性的常用取值如下。①VerticalAlign.Top：表示子組件在垂直方向上頂部對齊。②VerticalAlign.Center：默認(rèn)值，表示子組件在垂直方向上居中對齊。③VerticalAlign.Bottom：表示子組件在垂直方向上底部對齊。屬性說明alignItems用于設(shè)置子組件在交叉軸（垂直）方向上的對齊方式j(luò)ustifyContent用于設(shè)置子組件在主軸（水平）方向上的對齊方式4.3.2Row組件Row容器內(nèi)子組件在垂直方向上的對齊方式如下圖所示。4.3.2Row組件justifyContent屬性的常用取值如下。①FlexAlign.Start：默認(rèn)值，表示子組件在水平方向上首端對齊，第一個(gè)子組件與首端邊沿對齊，同時(shí)后續(xù)的子組件與前一個(gè)子組件對齊。②FlexAlign.Center：表示子組件在水平方向上中心對齊，第一個(gè)子組件與首端邊沿的距離與最后一個(gè)子組件與尾部邊沿的距離相同。③FlexAlign.End：表示子組件在水平方向上尾部對齊，最后一個(gè)子組件與尾部邊沿對齊，其他子組件與后一個(gè)子組件對齊。4.3.2Row組件④FlexAlign.SpaceBetween：表示在水平方向上均勻分布子組件，相鄰子組件之間距離相同。第一個(gè)子組件與首端邊沿對齊，最后一個(gè)子組件與尾部邊沿對齊。⑤FlexAlign.SpaceAround：表示在水平方向上均勻分布子組件，相鄰子組件之間距離相同。第一個(gè)子組件到首端邊沿的距離和最后一個(gè)子組件到尾部邊沿的距離是相鄰子組件之間距離的一半。⑥FlexAlign.SpaceEvenly：表示在水平方向上均勻分布子組件，相鄰子組件之間距離、第一個(gè)子組件與首端邊沿的間距、最后一個(gè)子組件與尾部邊沿的間距相同。4.3.2Row組件Row容器內(nèi)子組件在水平方向上的對齊方式如下圖所示。4.3.2Row組件下面演示Row組件的使用方法。在entry/src/main/ets/pages目錄下創(chuàng)建RowPage.ets文件，在該文件中使用Row組件實(shí)現(xiàn)橫向布局。4.3.3Image組件

先定一個(gè)小目標(biāo)！掌握Image組件的使用方法，能夠?qū)崿F(xiàn)圖像的顯示4.3.3Image組件Image是圖像組件，常用于在應(yīng)用程序中顯示圖像，它支持多種圖像格式，例如PNG、JPEG、BMP、SVG、WebP和GIF。4.3.3Image組件Image組件的語法格式如下。在上述語法格式中，src參數(shù)用于指定要顯示的圖像源。Image(src)4.3.3Image組件圖像源可以是string、PixelMap和Resource類型，具體介紹如下。①string類型常用于加載網(wǎng)絡(luò)圖像，需要先申請網(wǎng)絡(luò)訪問權(quán)限才能使用。當(dāng)使用相對路徑（相對ets目錄）引用本地圖像時(shí)，不支持跨包和跨模塊訪問圖像，例如Image('images/test.jpg')。②PixelMap類型用于加載像素圖像，常用于圖像編輯場景。4.3.3Image組件③Resource類型用于加載本地圖像，支持跨包和跨模塊訪問圖像?？梢詫D像放到entry/src/main/resources/base/media目錄下，通過$r()函數(shù)讀取并轉(zhuǎn)換為Resource格式。例如，訪問media目錄下的icon.png文件，示例代碼如下。此外，還可以將圖像放到entry/src/main/resources/rawfile目錄下，通過$rawfile()函數(shù)讀取并轉(zhuǎn)換為Resource格式。例如，訪問rawfile目錄下的icon.png文件，示例代碼如下。Image($r('app.media.icon'))Image($rawfile('icon.png'))4.3.3Image組件Image組件的常用屬性如下表所示。屬性說明alt用于設(shè)置圖像加載時(shí)顯示的占位圖objectFit用于設(shè)置圖像的填充效果interpolation用于設(shè)置圖像的插值效果，可緩解圖像在縮放時(shí)的鋸齒問題。SVG格式的圖像不支持使用該屬性objectRepeat用于設(shè)置圖像的重復(fù)樣式，從中心點(diǎn)向兩邊重復(fù)，剩余空間不足放下一張圖像時(shí)圖像會(huì)被截?cái)?。SVG格式的圖像不支持使用該屬性renderMode用于設(shè)置圖像的渲染模式為原色或黑白。SVG格式的圖像不支持使用該屬性fillColor用于設(shè)置填充顏色，設(shè)置后填充顏色會(huì)覆蓋在圖像上。該屬性僅對SVG格式的圖像生效，設(shè)置后會(huì)替換圖像的填充顏色4.3.3Image組件objectFit屬性的常用取值如下。①ImageFit.Cover：默認(rèn)值，表示在保持寬高比的情況下進(jìn)行縮小或者放大，使圖像完全覆蓋顯示區(qū)域，如果圖像的寬高比與顯示區(qū)域的寬高比不同，則圖像會(huì)被裁剪。②ImageFit.Contain：表示在保持寬高比的情況下進(jìn)行縮小或者放大，使圖像完全顯示在顯示邊界內(nèi)。③ImageFit.Auto：表示自適應(yīng)顯示。④ImageFit.Fill：表示在不保持寬高比的情況下進(jìn)行放大或者縮小，使圖像充滿顯示邊界。⑤ImageFit.ScaleDown：表示保持寬高比顯示，圖像需縮小或者保持不變。⑥ImageFit.None：表示保持圖像原有尺寸顯示。4.3.3Image組件interpolation屬性的常用取值如下。①ImageInterpolation.Low：默認(rèn)值，表示在圖像縮放時(shí)使用較低質(zhì)量的插值算法。②ImageInterpolation.None：表示在圖像縮放時(shí)不使用插值算法，這可能導(dǎo)致圖像顯示鋸齒或像素化。③ImageInterpolation.Medium：表示在圖像縮放時(shí)使用中等質(zhì)量的插值算法。④ImageInterpolation.High：表示在圖像縮放時(shí)使用較高質(zhì)量的插值算法，盡可能減少鋸齒效應(yīng)和失真。4.3.3Image組件objectRepeat屬性的常用取值如下。①ImageRepeat.NoRepeat：默認(rèn)值，表示不重復(fù)繪制圖像。②ImageRepeat.X：表示只在水平方向上重復(fù)繪制圖像。③ImageRepeat.Y：表示只在垂直方向上重復(fù)繪制圖像。④ImageRepeat.XY：表示在水平方向上和垂直方向上重復(fù)繪制圖像。renderMode屬性的常用取值如下。①ImageRenderMode.Original：默認(rèn)值，表示圖像的渲染模式為原色。②ImageRenderMode.Template：表示圖像的渲染模式為黑白。4.3.3Image組件下面演示Image組件的使用方法。在entry/src/main/ets/pages目錄下創(chuàng)建ImagePage.ets文件，在該文件中使用Image組件加載圖像。4.3.4Text組件

先定一個(gè)小目標(biāo)！掌握Text組件的使用方法，能夠?qū)崿F(xiàn)文本內(nèi)容的顯示4.3.4Text組件Text組件是文本組件，用于顯示文本內(nèi)容，其內(nèi)部可以包含Span組件和ImageSpan組件，Span組件用于顯示行內(nèi)文本，ImageSpan組件用于顯示行內(nèi)圖像。4.3.4Text組件Text組件的語法格式如下。content參數(shù)用于設(shè)置文本內(nèi)容，可以是string類型或Resource類型，具體介紹如下。①string類型用于直接寫入文本內(nèi)容。例如Text('圖像高度')。②Resource類型用于讀取本地資源文件，即通過$r()函數(shù)從entry/src/main/resources/zh_CN/element目錄下的string.json文件中讀取內(nèi)容。例如Text($r('app.string.資源名'))。Text(content)4.3.4Text組件當(dāng)不傳遞參數(shù)時(shí)，可以在Text組件中嵌套Span組件和ImageSpan組件。若嵌套Span組件，則顯示Span組件的內(nèi)容且Text組件的樣式不生效。Text組件嵌套Span組件的語法格式如下。在上述語法格式中，Text組件的小括號(hào)后面添加了大括號(hào)“{}”，在大括號(hào)中使用了Span組件。Text(){Span()}4.3.4Text組件Text組件除了設(shè)置文本內(nèi)容外，還可以通過設(shè)置各種屬性來自定義文本的外觀和行為。Text組件的常用屬性如下表所示。屬性說明textAlign用于設(shè)置文本段落在水平方向的對齊方式textOverflow用于設(shè)置文本超長時(shí)的顯示方式lineHeight用于設(shè)置文本的行高fontSize用于設(shè)置文本的字號(hào)fontColor用于設(shè)置文本的字體顏色fongWeight用于設(shè)置文本的字體粗細(xì)letterSpacing用于設(shè)置文本字符間距textCase用于設(shè)置文本大小寫decoration用于設(shè)置文本裝飾線樣式及其顏色4.3.4Text組件textAlign屬性的常用取值如下。①TextAlign.Start：默認(rèn)值，表示文本左對齊。②TextAlign.Center：表示文本居中對齊。③TextAlign.End：表示文本右對齊。textOverflow屬性的常用取值如下。①TextOverflow.Clip：默認(rèn)值，表示文本超長時(shí)進(jìn)行裁剪。②TextOverflow.Ellipsis：表示文本超長時(shí)顯示不下的文本用省略號(hào)代替。③TextOverflow.None：表示文本超長時(shí)不進(jìn)行裁剪。4.3.4Text組件textCase屬性的常用取值如下。①TextCase.Normal：默認(rèn)值，表示保持文本原有大小寫。②TextCase.LowerCase：表示文本采用全小寫。③TextCase.UpperCase：表示文本采用全大寫。decoration屬性的文本裝飾線樣式取值如下。①TextDecorationType.None：默認(rèn)值，表示不使用文本裝飾線。②TextDecorationType.Overline：表示在文本上方添加上劃線。③TextDecorationType.Underline：表示在文本下方添加下劃線。④TextDecorationType.LineThrough：表示為文本添加刪除線。文本裝飾線的默認(rèn)顏色為Color.Black，即黑色。4.3.4Text組件下面演示Text組件的使用方法。在entry/src/main/ets/pages目錄下創(chuàng)建TextPage.ets文件，在該文件中使用Image組件和Text組件實(shí)現(xiàn)圖文展示效果。4.3.4Text組件限定詞目錄指的是entry/src/main/resources/en_US目錄和entry/src/main/resources/zh_CN目錄。en_US目錄和zh_CN目錄都包含一個(gè)string.json文件，該文件用于保存限定詞。多學(xué)一招：限定詞目錄4.3.4Text組件當(dāng)使用$r()函數(shù)讀取本地資源文件時(shí)，系統(tǒng)會(huì)根據(jù)當(dāng)前設(shè)備的信息優(yōu)先選擇匹配的限定詞目錄，然后從該目錄下查找資源。系統(tǒng)首先會(huì)檢查設(shè)備的系統(tǒng)語言。若為中文，則會(huì)在zh_CN目錄的string.json文件中查找資源。若為英文，則會(huì)在en_US目錄的string.json文件中查找資源。多學(xué)一招：限定詞目錄4.3.4Text組件如果在限定詞目錄下找不到所需資源，則系統(tǒng)會(huì)到entry/src/main/resources/base目錄的string.json文件中查找資源。因此，當(dāng)在zh_CN目錄和en_US目錄的string.json文件中添加資源時(shí)，也需要在base目錄下的string.json文件中添加相同的資源，以避免DevEcoStudio報(bào)錯(cuò)。多學(xué)一招：限定詞目錄4.3.5TextInput組件

先定一個(gè)小目標(biāo)！掌握TextInput組件的使用方法，能夠?qū)崿F(xiàn)文本的輸入4.3.5TextInput組件TextInput組件是單行文本輸入框組件，其語法格式如下。value參數(shù)是一個(gè)TextInputOptions類型的對象，該對象包含以下屬性。placeholder屬性：用于設(shè)置單行文本輸入框無輸入時(shí)的提示文本。text屬性：用于設(shè)置單行文本輸入框當(dāng)前的文本內(nèi)容。TextInput(value)下面通過代碼演示如何設(shè)置單行文本輸入框當(dāng)前的文本內(nèi)容，示例代碼如下。TextInput({text:'請輸入賬號(hào)或手機(jī)號(hào)'})4.3.5TextInput組件TextInput組件的常用屬性如下表所示。屬性說明type用于設(shè)置單行文本輸入框的類型caretColor用于設(shè)置單行文本輸入框的光標(biāo)字體顏色placeholderColor用于設(shè)置placeholder屬性對應(yīng)的文本字體顏色placeholderFont用于設(shè)置placeholder屬性對應(yīng)的文本樣式，包括size屬性、weight屬性、family屬性和style屬性，分別用于設(shè)置文本字號(hào)、字體粗細(xì)、字體列表、字體樣式4.3.5TextInput組件type屬性的常用取值如下。①InputType.Normal：默認(rèn)值，表示基本輸入模式，支持輸入數(shù)字、字母、下劃線、空格和特殊字符。②InputType.Password：表示密碼輸入模式，支持輸入數(shù)字、字母、下劃線、空格和特殊字符。③InputType.Email：表示郵箱地址輸入模式，支持輸入數(shù)字、字母、下劃線和@字符，只能輸入一個(gè)@字符。④InputType.Number：表示純數(shù)字輸入模式，支持輸入數(shù)字。⑤InputType.PhoneNumber：表示電話號(hào)碼輸入模式，支持輸入數(shù)字、+、-、*、#，長度不限。4.3.5TextInput組件TextInput組件的常用事件如下表所示。事件說明onChange輸入內(nèi)容發(fā)生變化時(shí)觸發(fā)，例如鍵盤輸入、粘貼或剪切內(nèi)容時(shí)觸發(fā)onSubmit按下鍵盤中的“Enter”鍵時(shí)觸發(fā)onCopy當(dāng)長按單行文本輸入框內(nèi)部區(qū)域彈出剪貼板后，點(diǎn)擊剪切板“復(fù)制”按鈕時(shí)觸發(fā)onCut當(dāng)長按單行文本輸入框內(nèi)部區(qū)域彈出剪貼板后，點(diǎn)擊剪切板“剪切”按鈕時(shí)觸發(fā)onPaste當(dāng)長按單行文本輸入框內(nèi)部區(qū)域彈出剪貼板后，點(diǎn)擊剪切板“粘貼”按鈕時(shí)觸發(fā)4.3.5TextInput組件下面演示TextInput組件的使用方法。在entry/src/main/ets/pages目錄下創(chuàng)建TextInputPage.ets文件，在該文件中使用TextInput組件實(shí)現(xiàn)單行文本輸入框效果。4.3.6Button組件

先定一個(gè)小目標(biāo)！掌握Button組件的使用方法，能夠創(chuàng)建不同樣式的按鈕4.3.6Button組件Button組件是按鈕組件，可快速創(chuàng)建不同樣式的按鈕，其語法格式如下。label參數(shù)用于設(shè)置按鈕的文本內(nèi)容。options參數(shù)為一個(gè)對象，包含type屬性和stateEffect屬性，具體會(huì)在后面進(jìn)行講解。Button(label,options)當(dāng)不傳遞label參數(shù)時(shí)，可以在Button組件內(nèi)嵌套其他組件，語法格式如下。Button(){//其他組件}4.3.6Button組件Button組件的常用屬性如下表所示。type屬性的常用可選值如下。①ButtonType.Capsule：默認(rèn)值，表示為膠囊型按鈕，圓角半徑默認(rèn)為高度的一半。②ButtonType.Circle：表示為圓形按鈕。③ButtonType.Normal：表示為普通按鈕，不帶圓角。屬性說明type用于設(shè)置按鈕顯示樣式stateEffect用于設(shè)置按鈕按下時(shí)是否開啟按壓效果，默認(rèn)值為true，表示開啟按壓效果；當(dāng)設(shè)置為false時(shí)，表示關(guān)閉按壓效果4.3.6Button組件下面演示Button組件的使用方法。在entry/src/main/ets/pages目錄下創(chuàng)建ButtonPage.ets文件，在該文件中使用Button組件實(shí)現(xiàn)“登錄”按鈕。4.3.7Slider組件

先定一個(gè)小目標(biāo)！掌握Slider組件的使用方法，能夠?qū)崿F(xiàn)滑動(dòng)條效果4.3.7Slider組件Slider組件是滑動(dòng)條組件，通常用于快速調(diào)節(jié)設(shè)置值，常用在音量調(diào)節(jié)、亮度調(diào)節(jié)、進(jìn)度調(diào)節(jié)等場景。Slider組件的語法格式如下。options參數(shù)為一個(gè)對象，用于設(shè)置滑動(dòng)條的各種配置屬性，常用的配置屬性如下。①value：用于設(shè)置當(dāng)前進(jìn)度值。②min：用于設(shè)置最小值，默認(rèn)值為0。③max：用于設(shè)置最大值，默認(rèn)值為100。④step：用于設(shè)置滑動(dòng)條的滑動(dòng)步長，默認(rèn)值為1。當(dāng)值小于0時(shí)，按默認(rèn)值顯示。Slider(options)4.3.7Slider組件⑤style：用于設(shè)置滑動(dòng)條的滑塊與滑軌顯示樣式，具體取值如下。SliderStyle.OutSet：默認(rèn)值，表示滑塊在滑軌上。SliderStyle.InSet：表示滑塊在滑軌內(nèi)。⑥direction：用于設(shè)置滑動(dòng)條滑動(dòng)方向?yàn)樗椒较蜻€是豎直方向，具體取值如下。Axis.Horizontal：默認(rèn)值，表示滑動(dòng)方向?yàn)樗椒较?。Axis.Vertical：表示滑動(dòng)方向?yàn)樨Q直方向。⑦reverse：用于設(shè)置滑動(dòng)條取值范圍是否反向，橫向滑動(dòng)條默認(rèn)為從左往右滑動(dòng)，豎向滑動(dòng)條默認(rèn)為從上往下滑動(dòng)。默認(rèn)值為false，表示滑動(dòng)條的取值范圍是正向的。若值為true，表示滑動(dòng)條的取值范圍是反向的。4.3.7Slider組件下面通過代碼演示如何配置Slider組件參數(shù)，示例代碼如下。Slider({min:0,max:100,value:50step:10,style:SliderStyle.OutSet,direction:Axis.Horizontal,reverse:false})4.3.7Slider組件Slider組件的常用屬性如下表所示。屬性說明blockColor用于設(shè)置滑塊的顏色trackColor用于設(shè)置滑軌的背景顏色selectedColor用于設(shè)置滑軌的已滑動(dòng)部分顏色showSteps用于設(shè)置當(dāng)前是否顯示步長刻度值，默認(rèn)值為false，表示不顯示步長刻度值；若值為true，表示顯示步長刻度值showTips用于設(shè)置滑動(dòng)時(shí)是否顯示百分比氣泡提示，默認(rèn)值為false，表示不顯示百分比氣泡提示；若值為true，表示顯示百分比氣泡提示trackThickness用于設(shè)置滑軌的粗細(xì)。當(dāng)配置屬性style的值為SliderStyle.OutSet時(shí)，默認(rèn)值為4；為SliderStyle.InSet時(shí)，默認(rèn)值為204.3.7Slider組件下面演示Slider組件的使用方法。在entry/src/main/ets/pages目錄下創(chuàng)建SliderPage.ets文件，在該文件中使用Slider組件實(shí)現(xiàn)滑動(dòng)條效果。4.3.8Scroll組件

先定一個(gè)小目標(biāo)！掌握Scroll組件的使用方法，能夠?qū)崿F(xiàn)可滾動(dòng)的容器效果4.3.8Scroll組件Scroll組件是可滾動(dòng)的容器組件，當(dāng)子組件中的布局尺寸超出了父容器組件的尺寸時(shí)，內(nèi)容可以滾動(dòng)。在Scroll組件中，只能放置一個(gè)子組件。4.3.8Scroll組件Scroll組件的語法格式如下。在上述語法格式中，scroller參數(shù)用于控制Scroll組件的滾動(dòng)。如果需要對滾動(dòng)進(jìn)行控制，可以導(dǎo)入Scroller對象，示例代碼如下。上述代碼創(chuàng)建了一個(gè)Scroller對象，并將其賦值給scroller屬性，以便進(jìn)行滾動(dòng)控制。一個(gè)Scroller對象代表一個(gè)控制器，它可以綁定到Scroll、List、Grid等容器組件上，但同一個(gè)控制器不可以控制多個(gè)容器組件。Scroll(scroller)scroller:Scroller=newScroller()4.3.8Scroll組件Scroller對象的常用屬性如下表所示。scrollEdge屬性的可選值如下。①Edge.Top：表示垂直方向的頂部。②Edge.Bottom：表示垂直方向的底部。③Edge.Start：表示水平方向的起始位置。④Edge.End：表示水平方向的末尾位置。屬性說明scrollEdge用于設(shè)置滾動(dòng)到容器的哪個(gè)邊緣scrollPage用于設(shè)置滾動(dòng)到下一頁還是上一頁，接收一個(gè)對象作為參數(shù)，該對象中包含next屬性，表示是否向下翻頁。如果next值為true，則表示向下翻頁；如果next值為false，則表示向上翻頁4.3.8Scroll組件Scroll組件的常用屬性如下表所示。屬性說明scrollable用于設(shè)置滾動(dòng)方向scrollBar用于設(shè)置滾動(dòng)條狀態(tài)scrollBarColor用于設(shè)置滾動(dòng)條的顏色scrollBarWidth用于設(shè)置滾動(dòng)條的寬度，不支持百分比。默認(rèn)值為4edgeEffect用于設(shè)置邊緣滑動(dòng)效果4.3.8Scroll組件scrollable屬性的常用可選值如下。①ScrollDirection.Vertical：默認(rèn)值，表示在垂直方向上滾動(dòng)。②ScrollDirection.Horizontal：表示在水平方向上滾動(dòng)。③ScrollDirection.None：表示不可滾動(dòng)。scrollBar屬性的常用可選值如下。①BarState.Auto：默認(rèn)值，表示按需顯示，會(huì)在觸摸時(shí)顯示，2s后消失。②BarState.On：表示常駐顯示。③BarState.Off：表示不顯示。4.3.8Scroll組件edgeEffect屬性的常用可選值如下。①EdgeEffect.None：默認(rèn)值，表示滑動(dòng)到邊緣后無效果。②EdgeEffect.Spring：表示滑動(dòng)到邊緣后可以根據(jù)初始速度或通過觸摸事件繼續(xù)滑動(dòng)一段距離，松手后回彈。③EdgeEffect.Fade：表示滑動(dòng)到邊緣后會(huì)顯示圓弧狀的陰影。4.3.8Scroll組件當(dāng)用戶進(jìn)行滾動(dòng)操作時(shí)，會(huì)觸發(fā)組件區(qū)域變化事件onAreaChange，其事件處理程序接收2個(gè)參數(shù)：

oldValue和newValue。oldValue表示目標(biāo)組件變化之前的寬度、高度以及目標(biāo)組件相對父組件和頁面左上角的坐標(biāo)位置。newValue表示目標(biāo)組件變化之后的寬度、高度以及目標(biāo)組件相對父組件和頁面左上角的坐標(biāo)位置。4.3.8Scroll組件下面演示Scroll組件的使用方法。4.3.9List組件

先定一個(gè)小目標(biāo)！掌握List組件的使用方法，能夠?qū)崿F(xiàn)列表效果4.3.9List組件List組件是列表組件，用于展示一系列具有相同寬度的列表項(xiàng)。列表項(xiàng)既可以縱向排列，也可以橫向排列，適合呈現(xiàn)連續(xù)、多行的同類數(shù)據(jù)，例如圖像和文本。當(dāng)列表項(xiàng)數(shù)量過多，超出屏幕后，會(huì)自動(dòng)出現(xiàn)滾動(dòng)條，以便用戶瀏覽。4.3.9List組件List組件可以包含子組件ListItem和ListItemGroup。ListItem組件用于展示列表中的具體項(xiàng)。ListItemGroup組件用于實(shí)現(xiàn)列表項(xiàng)分組，其寬度默認(rèn)充滿List組件，必須配合List組件使用。4.3.9List組件List組件的語法格式如下。value參數(shù)為一個(gè)對象，該對象包含的屬性如下。①space：用于設(shè)置列表項(xiàng)的間距。②initialIndex：用于設(shè)置列表項(xiàng)的初始索引位置。③scroller：用于控制List組件的滾動(dòng)。List(value)4.3.9List組件List組件的常用屬性如下表所示。listDirection屬性的常用可選值如下。①Axis.Vertical：默認(rèn)值，表示縱向排列。②Axis.Horizontal：表示橫向排列。屬性說明listDirection用于設(shè)置列表項(xiàng)的排列方向divider用于設(shè)置列表項(xiàng)分割線的樣式，默認(rèn)無分割線edgeEffect用于設(shè)置列表的邊緣滑動(dòng)效果4.3.9List組件divider屬性的屬性值為一個(gè)對象，該對象的常用的屬性如下。①strokeWidth：用于設(shè)置分割線的寬度。②color：用于設(shè)置分割線的顏色。③startMargin：用于設(shè)置分割線與列表項(xiàng)側(cè)邊起始端的距離。④endMargin：用于設(shè)置分割線與列表項(xiàng)側(cè)邊結(jié)束端的距離。edgeEffect屬性的可選值與Scroll組件的edgeEffect屬性的可選值相同，但其默認(rèn)值為EdgeEffect.Spring。4.3.9List組件下面演示List組件的使用方法。在entry/src/main/ets/pages目錄下創(chuàng)建ListPage.ets文件，在該文件中使用List組件實(shí)現(xiàn)列表效果。4.3.10Flex組件

先定一個(gè)小目標(biāo)！掌握Flex組件的使用方法，能夠?qū)崿F(xiàn)彈性布局效果4.3.10Flex組件Flex組件是一個(gè)以彈性方式布局子組件的容器組件，使用Flex組件可以實(shí)現(xiàn)彈性布局，也稱為Flex布局。彈性布局主要由Flex容器（由Flex組件創(chuàng)建的容器）和子組件組成。4.3.10Flex組件Flex容器包含兩根軸：主軸和交叉軸。默認(rèn)情況下，主軸為水平方向，交叉軸為垂直方向。子組件默認(rèn)沿主軸排列，根據(jù)實(shí)際需要可以更改子組件的排列方式。4.3.10Flex組件主軸為水平方向的彈性布局結(jié)構(gòu)如下圖所示。4.3.10Flex組件Flex組件的語法格式如下。value參數(shù)為一個(gè)對象，用于設(shè)置彈性布局相關(guān)的配置屬性。①direction屬性用于設(shè)置Flex容器中子組件的排列方向，即主軸的方向，常用的可選值如下。FlexDirection.Row：默認(rèn)值，主軸為從左到右的水平方向。FlexDirection.RowReverse：主軸為從右到左的水平方向。FlexDirection.Column：主軸為從上到下的垂直方向。FlexDirection.ColumnReverse：主軸為從下到上的垂直方向。Flex(value)4.3.10Flex組件②wrap屬性用于設(shè)置Flex容器中子組件的換行方式，常用的可選值如下。FlexWrap.NoWrap：默認(rèn)值，表示不允許換行，F(xiàn)lex容器為單行或單列，該情況下子組件可能會(huì)溢出Flex容器。FlexWrap.Wrap：允許換行，如果Flex容器為多行或多列，子組件溢出的部分會(huì)被放置到新的一行，第一行顯示在上方。FlexWrap.WrapReverse：按照反方向換行，如果Flex容器為多行或多列，子組件溢出的部分會(huì)被放置到新的一行，第一行顯示在下方。4.3.10Flex組件③justifyContent屬性用于設(shè)置Flex容器中子組件在主軸方向上的對齊方式，常用的可選值如下。FlexAlign.Start：默認(rèn)值，表示子組件在主軸方向上首端對齊，第一個(gè)子組件與首端邊沿對齊，同時(shí)后續(xù)的子組件與前一個(gè)子組件對齊。FlexAlign.Center：表示子組件在主軸方向上中心對齊，第一個(gè)子組件與首端邊沿的距離與最后一個(gè)子組件與尾部邊沿的距離相同。FlexAlign.End：表示子組件在主軸方向上尾部對齊，最后一個(gè)子組件與尾部邊沿對齊，其他子組件與后一個(gè)子組件對齊。4.3.10Flex組件FlexAlign.SpaceBetween：表示在主軸方向上均勻分布子組件，相鄰子組件之間距離相同。第一個(gè)子組件與首端邊沿對齊，最后一個(gè)子組件與尾部邊沿對齊。FlexAlign.SpaceAround：表示在主軸方向上均勻分布子組件，相鄰子組件之間距離相同。第一個(gè)子組件到首端邊沿的距離和最后一個(gè)子組件到尾部邊沿的距離是相鄰子組件之間距離的一半。FlexAlign.SpaceEvenly：表示在主軸方向上均勻分布子組件，相鄰子組件之間距離、第一個(gè)子組件與首端邊沿的距離、最后一個(gè)子組件與尾部邊沿的距離相同。4.3.10Flex組件④alignItems屬性用于設(shè)置Flex容器中子組件在交叉軸方向上的對齊方式，常用的可選值如下。ItemAlign.Stretch：表示子組件在Flex容器中，在交叉軸方向拉伸填充。ItemAlign.Start：默認(rèn)值，表示子組件在Flex容器中，在交叉軸方向首部對齊。ItemAlign.Center：表示子組件在Flex容器中，在交叉軸方向居中對齊。ItemAlign.End：表示子組件在Flex容器中，在交叉軸方向底部對齊。ItemAlign.Auto：表示使用Flex容器中默認(rèn)配置。ItemAlign.Baseline：表示子組件在Flex容器中，在交叉軸方向文本基線對齊。⑤alignContent屬性用于設(shè)置多軸線的對齊方式，適用于多行排列的情況，默認(rèn)值為FlexAlign.Start，屬性值參考justifyContent屬性的說明。4.3.10Flex組件下面演示Flex組件的使用方法。在entry/src/main/ets/pages目錄下創(chuàng)建FlexPage.ets文件，在該文件中使用Flex組件實(shí)現(xiàn)彈性布局。4.3.11Grid組件

先定一個(gè)小目標(biāo)！掌握Grid組件的使用方法，能夠?qū)崿F(xiàn)網(wǎng)格布局效果4.3.11Grid組件Grid組件是網(wǎng)格容器組件，由行和列的單元格組成。在Grid組件中，只能放置GridItem子組件。GridItem子組件用于創(chuàng)建網(wǎng)格容器中單項(xiàng)內(nèi)容容器。4.3.11Grid組件如果在GridItem子組件中使用Row組件或Column組件，Row組件中的組件將默認(rèn)垂直居中排列，而Column組件中的組件將默認(rèn)水平居中排列。4.3.11Grid組件Grid組件的語法格式如下。在上述語法格式中，scroller參數(shù)用于控制Grid組件的滾動(dòng)。Grid(scroller)4.3.11Grid組件Grid組件的常用屬性如下表所示。屬性說明columnsTemplate用于設(shè)置當(dāng)前網(wǎng)格布局列的數(shù)量，不設(shè)置時(shí)默認(rèn)為1列。例如，'1fr1fr2fr'表示將父組件分為3列，將父組件的寬度分為4等份，第1列占1份，第2列占1份，第3列占2份rowsTemplate用于設(shè)置當(dāng)前網(wǎng)格布局行的數(shù)量，不設(shè)置時(shí)默認(rèn)為1行。例如，'1fr1fr2fr'表示將父組件分為3行，將父組件的高度分為4