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

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

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

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

>應用框架

>ArkUI（方舟UI框架）

>ArkTS組件

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

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

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

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

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

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

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

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

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

先定一個小目標！掌握Slider組件的使用方法，能夠實現(xiàn)滑動條效果4.3.7Slider組件Slider組件是滑動條組件，通常用于快速調(diào)節(jié)設置值，常用在音量調(diào)節(jié)、亮度調(diào)節(jié)、進度調(diào)節(jié)等場景。Slider組件的語法格式如下。options參數(shù)為一個對象，用于設置滑動條的各種配置屬性，常用的配置屬性如下。①value：用于設置當前進度值。②min：用于設置最小值，默認值為0。③max：用于設置最大值，默認值為100。④step：用于設置滑動條的滑動步長，默認值為1。當值小于0時，按默認值顯示。Slider(options)4.3.7Slider組件⑤style：用于設置滑動條的滑塊與滑軌顯示樣式，具體取值如下。SliderStyle.OutSet：默認值，表示滑塊在滑軌上。SliderStyle.InSet：表示滑塊在滑軌內(nèi)。⑥direction：用于設置滑動條滑動方向為水平方向還是豎直方向，具體取值如下。Axis.Horizontal：默認值，表示滑動方向為水平方向。Axis.Vertical：表示滑動方向為豎直方向。⑦reverse：用于設置滑動條取值范圍是否反向，橫向滑動條默認為從左往右滑動，豎向滑動條默認為從上往下滑動。默認值為false，表示滑動條的取值范圍是正向的。若值為true，表示滑動條的取值范圍是反向的。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用于設置滑塊的顏色trackColor用于設置滑軌的背景顏色selectedColor用于設置滑軌的已滑動部分顏色showSteps用于設置當前是否顯示步長刻度值，默認值為false，表示不顯示步長刻度值；若值為true，表示顯示步長刻度值showTips用于設置滑動時是否顯示百分比氣泡提示，默認值為false，表示不顯示百分比氣泡提示；若值為true，表示顯示百分比氣泡提示trackThickness用于設置滑軌的粗細。當配置屬性style的值為SliderStyle.OutSet時，默認值為4；為SliderStyle.InSet時，默認值為204.3.7Slider組件下面演示Slider組件的使用方法。在entry/src/main/ets/pages目錄下創(chuàng)建SliderPage.ets文件，在該文件中使用Slider組件實現(xiàn)滑動條效果。4.3.8Scroll組件

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

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

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

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

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