梅克尔工作室-赵一帆-鸿蒙笔记2
常用基礎(chǔ)組件
組件介紹
組件（Component）是界面搭建與顯示的最小單位，HarmonyOS ArkUI聲明式開發(fā)范式為開發(fā)者提供了豐富多樣的UI組件，我們可以使用這些組件輕松的編寫出更加豐富、漂亮的界面。
組件根據(jù)功能可以分為以下五大類：
1.基礎(chǔ)組件
2.容器組件
3.媒體組件
4.繪制組件
5.畫布組件
其中基礎(chǔ)組件是視圖層的基本組成單元，包括Text、Image、TextInput、Button、LoadingProgress等，例如下面這個常用的登錄界面就是由這些基礎(chǔ)組件組合而成。
下面我們將分別介紹這些常用基礎(chǔ)組件的使用。
Text
Text組件用于在界面上展示一段文本信息，可以包含子組件Span。
文本樣式
針對包含文本元素的組件，例如Text、Span、Button、TextInput等，可使用fontColor、fontSize、fontStyle、 fontWeight、fontFamily這些文本樣式，分別設(shè)置文本的顏色、大小、樣式、粗細(xì)以及字體，文本樣式的屬性如下表
下面示例代碼中包含兩個Text組件，第一個使用的是默認(rèn)樣式，第二個給文本設(shè)置了一些文本樣式。
@Entry @Component struct TextDemo {build() {Row() {Column() {Text('HarmonyOS')Text('HarmonyOS').fontColor(Color.Blue).fontSize(20).fontStyle(FontStyle.Italic).fontWeight(FontWeight.Bold).fontFamily('Arial')}.width('100%')}.backgroundColor(0xF1F3F5).height('100%')} }效果圖如下：
除了通用屬性和文本樣式設(shè)置，下面列舉了一些Text組件的常用屬性的使用。
設(shè)置文本對齊方式
使用textAlign屬性可以設(shè)置文本的對齊方式，示例代碼如下：
Text('HarmonyOS').width(200).textAlign(TextAlign.Start).backgroundColor(0xE6F2FD)textAlign參數(shù)類型為TextAlign，定義了以下幾種類型：
👉Start（默認(rèn)值）：水平對齊首部。
👉Center：水平居中對齊。
👉End：水平對齊尾部。
設(shè)置文本超長顯示
當(dāng)文本內(nèi)容較多超出了Text組件范圍的時候，您可以使用textOverflow設(shè)置文本截取方式，需配合maxLines使用，單獨(dú)設(shè)置不生效，maxLines用于設(shè)置文本顯示最大行數(shù)。下面的示例代碼將textOverflow設(shè)置為Ellipsis ，它將顯示不下的文本用 “...” 表示：
Text('This is the text content of Text Component This is the text content of Text Component').fontSize(16).maxLines(1).textOverflow({overflow:TextOverflow.Ellipsis}).backgroundColor(0xE6F2FD)效果圖如下：
設(shè)置文本裝飾線
使用decoration設(shè)置文本裝飾線樣式及其顏色，大家在瀏覽網(wǎng)頁的時候經(jīng)常可以看到裝飾線，例如帶有下劃線超鏈接文本。decoration包含type和color兩個參數(shù)，其中type用于設(shè)置裝飾線樣式，參數(shù)類型為TextDecorationTyp，color為可選參數(shù)。
下面的示例代碼給文本設(shè)置了下劃線，下劃線顏色為黑色：
Text('HarmonyOS').fontSize(20).decoration({ type: TextDecorationType.Underline, color: Color.Black }).backgroundColor(0xE6F2FD)效果圖如下：
TextDecorationTyp包含以下幾種類型：
👉None：不使用文本裝飾線。
👉Overline：文字上劃線修飾。
👉LineThrough：穿過文本的修飾線。
👉Underline：文字下劃線修飾。
Image
Image組件用來渲染展示圖片，它可以讓界面變得更加豐富多彩。只需要給Image組件設(shè)置圖片地址、寬和高，圖片就能加載出來，示例如下：
Image($r("app.media.icon")).width(100).height(100)效果圖如下：
設(shè)置縮放類型
為了使圖片在頁面中有更好的顯示效果，有時候需要對圖片進(jìn)行縮放處理。您可以使用objectFit屬性設(shè)置圖片的縮放類型，objectFit的參數(shù)類型為ImageFit。
現(xiàn)有原始圖片如下：
將圖片加載到Image組件，設(shè)置寬高各100，設(shè)置objectFit為Cover（默認(rèn)值），設(shè)置圖片背景色為灰色0xCCCCCC。示例代碼如下：
Image($r("app.media.image2")).objectFit(ImageFit.Cover).backgroundColor(0xCCCCCC).width(100).height(100)效果圖如下：
ImageFit包含以下幾種類型：
👉Contain：保持寬高比進(jìn)行縮小或者放大，使得圖片完全顯示在顯示邊界內(nèi)。
👉Cover（默認(rèn)值）：保持寬高比進(jìn)行縮小或者放大，使得圖片兩邊都大于或等于顯示邊界。
👉Auto：自適應(yīng)顯示。
👉Fill：不保持寬高比進(jìn)行放大縮小，使得圖片充滿顯示邊界。
👉ScaleDown：保持寬高比顯示，圖片縮小或者保持不變。
👉None：保持原有尺寸顯示。
加載網(wǎng)絡(luò)圖片
比如瀏覽新聞的時候，圖片一般從網(wǎng)絡(luò)加載而來，Image組件支持加載網(wǎng)絡(luò)圖片，將圖片地址換成網(wǎng)絡(luò)圖片地址進(jìn)行加載。
Image('https://www.example.com/xxx.png')為了成功加載網(wǎng)絡(luò)圖片，您需要在module.json5文件中申明網(wǎng)絡(luò)訪問權(quán)限。
{"module" : {"requestPermissions":[{"name": "ohos.permission.INTERNET"}]} } 說明：應(yīng)用訪問網(wǎng)絡(luò)需要申請ohos.permission.INTERNET權(quán)限，因?yàn)镠armonyOS提供了一種訪問控制機(jī)制即應(yīng)用權(quán)限，用來保證這些數(shù)據(jù)或功能不會被不當(dāng)或惡意使用。關(guān)于應(yīng)用權(quán)限的的詳細(xì)信息開發(fā)者可以參考：訪問控制。
TextInput
TextInput組件用于輸入單行文本，響應(yīng)輸入事件。TextInput的使用也非常廣泛，例如應(yīng)用登錄賬號密碼、發(fā)送消息等。和Text組件一樣，TextInput組件也支持文本樣式設(shè)置，下面的示例代碼實(shí)現(xiàn)了一個簡單的輸入框：
TextInput().fontColor(Color.Blue).fontSize(20).fontStyle(FontStyle.Italic).fontWeight(FontWeight.Bold).fontFamily('Arial')效果圖如下：
設(shè)置輸入提示文本
當(dāng)我們平時使用輸入框的時候，往往會有一些提示文字。例如登錄賬號的時候會有“請輸入賬號”這樣的文本提示，當(dāng)用戶輸入內(nèi)容之后，提示文本就會消失，這種提示功能使用placeholder屬性就可以輕松的實(shí)現(xiàn)。您還可以使用placeholderColor和placeholderFont分別設(shè)置提示文本的顏色和樣式，示例代碼如下：
TextInput({ placeholder: '請輸入帳號' }).placeholderColor(0x999999).placeholderFont({ size: 20, weight: FontWeight.Medium, family: 'cursive', style: FontStyle.Italic })效果圖如下：
設(shè)置輸入類型
可以使用type屬性來設(shè)置輸入框類型。例如密碼輸入框，一般輸入密碼的時候，為了用戶密碼安全，內(nèi)容會顯示為“......”，針對這種場景，將type屬性設(shè)置為InputType.Password就可以實(shí)現(xiàn)。示例代碼如下：
TextInput({ placeholder: '請輸入密碼' }).type(InputType.Password)效果圖如下：
type的參數(shù)類型為InputType，包含以下幾種輸入類型：
👉Normal：基本輸入模式。支持輸入數(shù)字、字母、下劃線、空格、特殊字符。
👉Password：密碼輸入模式。
👉Email：e-mail地址輸入模式。
👉Number：純數(shù)字輸入模式。
設(shè)置光標(biāo)位置
可以使用TextInputController動態(tài)設(shè)置光位置，下面的示例代碼使用TextInputController的caretPosition方法，將光標(biāo)移動到了第二個字符后。
@Entry @Component struct TextInputDemo {controller: TextInputController = new TextInputController()build() {Column() {TextInput({ controller: this.controller })Button('設(shè)置光標(biāo)位置').onClick(() => {this.controller.caretPosition(2)})}.height('100%').backgroundColor(0xE6F2FD)} }效果圖如下：
獲取輸入文本
我們可以給TextInput設(shè)置onChange事件，輸入文本發(fā)生變化時觸發(fā)回調(diào)，下面示例代碼中的value為實(shí)時獲取用戶輸入的文本信息。
@Entry @Component struct TextInputDemo {@State text: string = ''build() {Column() {TextInput({ placeholder: '請輸入賬號' }).caretColor(Color.Blue).onChange((value: string) => {this.text = value})Text(this.text)}.alignItems(HorizontalAlign.Center).padding(12).backgroundColor(0xE6F2FD)} }效果圖如下：
Button
Button組件主要用來響應(yīng)點(diǎn)擊操作，可以包含子組件。下面的示例代碼實(shí)現(xiàn)了一個“登錄按鈕”：
Button('登錄', { type: ButtonType.Capsule, stateEffect: true }).width('90%').height(40).fontSize(16).fontWeight(FontWeight.Medium).backgroundColor('#007DFF')效果圖如下：
設(shè)置按鈕樣式
type用于定義按鈕樣式，示例代碼中ButtonType.Capsule表示膠囊形按鈕；stateEffect用于設(shè)置按鈕按下時是否開啟切換效果，當(dāng)狀態(tài)置為false時，點(diǎn)擊效果關(guān)閉，默認(rèn)值為true。
我們可以設(shè)置多種樣式的Button，除了Capsule可以以設(shè)置Normal和Circle：
👉Capsule：膠囊型按鈕（圓角默認(rèn)為高度的一半）。
👉Circle：圓形按鈕。
👉Normal：普通按鈕（默認(rèn)不帶圓角）。
設(shè)置按鈕點(diǎn)擊事件
可以給Button綁定onClick事件，每當(dāng)用戶點(diǎn)擊Button的時候，就會回調(diào)執(zhí)行onClick方法，調(diào)用里面的邏輯代碼。
Button('登錄', { type: ButtonType.Capsule, stateEffect: true })....onClick(() => {// 處理點(diǎn)擊事件邏輯})包含子組件
Button組件可以包含子組件，讓您可以開發(fā)出更豐富多樣的Button，下面的示例代碼中Button組件包含了一個Image組件：
效果圖如下：
6 LoadingProgress
LoadingProgress組件用于顯示加載進(jìn)展，比如應(yīng)用的登錄界面，當(dāng)我們點(diǎn)擊登錄的時候，顯示的“正在登錄”的進(jìn)度條狀態(tài)。LoadingProgress的使用非常簡單，只需要設(shè)置顏色和寬高就可以了。
LoadingProgress().color(Color.Blue).height(60).width(60)效果圖如下：
7 使用資源引用類型
Resource是資源引用類型，用于設(shè)置組件屬性的值。推薦大家優(yōu)先使用Resource類型，將資源文件（字符串、圖片、音頻等）統(tǒng)一存放于resources目錄下，便于開發(fā)者統(tǒng)一維護(hù)。同時系統(tǒng)可以根據(jù)當(dāng)前配置加載合適的資源，例如，開發(fā)者可以根據(jù)屏幕尺寸呈現(xiàn)不同的布局效果，或根據(jù)語言設(shè)置提供不同的字符串。
例如下面的這段代碼，直接在代碼中寫入了字符串和數(shù)字這樣的硬編碼。
Button('登錄', { type: ButtonType.Capsule, stateEffect: true }).width(300).height(40).fontSize(16).fontWeight(FontWeight.Medium).backgroundColor('#007DFF')我們可以將這些硬編碼寫到entry/src/main/resources下的資源文件中。
在string.json中定義Button顯示的文本。
{"string": [{"name": "login_text","value": "登錄"}] }在float.json中定義Button的寬高和字體大小。
{"float": [{"name": "button_width","value": "300vp"},{"name": "button_height","value": "40vp"},{"name": "login_fontSize","value": "18fp"}] }在color.json中定義Button的背景顏色。
{"color": [{"name": "button_color","value": "#1890ff"}] }然后在Button組件通過“$r('app.type.name')”的形式引用應(yīng)用資源。app代表應(yīng)用內(nèi)resources目錄中定義的資源；type代表資源類型（或資源的存放位置），可以取“color”、“float”、“string”、“plural”、“media”；name代表資源命名，由開發(fā)者定義資源時確定。
Button($r('app.string.login_text'), { type: ButtonType.Capsule }).width($r('app.float.button_width')).height($r('app.float.button_height')).fontSize($r('app.float.login_fontSize')).backgroundColor($r('app.color.button_color'))Column&Row組件的使用
概述
一個豐富的頁面需要很多組件組成，那么，我們?nèi)绾尾拍茏屵@些組件有條不紊地在頁面上布局呢？這就需要借助容器組件來實(shí)現(xiàn)。
容器組件是一種比較特殊的組件，它可以包含其他的組件，而且按照一定的規(guī)律布局，幫助開發(fā)者生成精美的頁面。容器組件除了放置基礎(chǔ)組件外，也可以放置容器組件，通過多層布局的嵌套，可以布局出更豐富的頁面。
ArkTS為我們提供了豐富的容器組件來布局頁面，本文將以構(gòu)建登錄頁面為例，介紹Column和Row組件的屬性與使用。
組件介紹
布局容器概念
線性布局容器表示按照垂直方向或者水平方向排列子組件的容器，ArkTS提供了Column和Row容器來實(shí)現(xiàn)線性布局。
Column表示沿垂直方向布局的容器。
Row表示沿水平方向布局的容器。
主軸和交叉軸概念
在布局容器中，默認(rèn)存在兩根軸，分別是主軸和交叉軸，這兩個軸始終是相互垂直的。不同的容器中主軸的方向不一樣的。
👉主軸：在Column容器中的子組件是按照從上到下的垂直方向布局的，其主軸的方向是垂直方向；在Row容器中的組件是按照從左到右的水平方向布局的，其主軸的方向是水平方向。
圖2-1 Column容器&Row容器主軸
👉交叉軸：與主軸垂直相交的軸線，如果主軸是垂直方向，則交叉軸就是水平方向；如果主軸是水平方向，則交叉軸是垂直方向。
圖2-2 Column容器&Row容器交叉軸
屬性介紹
了解布局容器的主軸和交叉軸，主要是為了讓大家更好地理解子組件在主軸和交叉軸的排列方式。
接下來，我們將詳細(xì)講解Column和Row容器的兩個屬性justifyContent和alignItems。
1. 主軸方向的對齊（justifyContent）
子組件在主軸方向上的對齊使用justifyContent屬性來設(shè)置，其參數(shù)類型是FlexAlign。FlexAlign定義了以下幾種類型：
👉Start：元素在主軸方向首端對齊，第一個元素與行首對齊，同時后續(xù)的元素與前一個對齊。
👉Center：元素在主軸方向中心對齊，第一個元素與行首的距離以及最后一個元素與行尾距離相同。
👉End：元素在主軸方向尾部對齊，最后一個元素與行尾對齊，其他元素與后一個對齊。
👉SpaceBetween：元素在主軸方向均勻分配彈性元素，相鄰元素之間距離相同。 第一個元素與行首對齊，最后一個元素與行尾對齊。
👉SpaceAround：元素在主軸方向均勻分配彈性元素，相鄰元素之間距離相同。 第一個元素到行首的距離和最后一個元素到行尾的距離是相鄰元素之間距離的一半。
👉SpaceEvenly：元素在主軸方向等間距布局，無論是相鄰元素還是邊界元素到容器的間距都一樣。
2. 交叉軸方向的對齊（alignItems）
子組件在交叉軸方向上的對齊方式使用alignItems屬性來設(shè)置。
Column容器的主軸是垂直方向，交叉軸是水平方向，其參數(shù)類型為HorizontalAlign（水平對齊），HorizontalAlign定義了以下幾種類型：
👉Start：設(shè)置子組件在水平方向上按照起始端對齊。
👉Center（默認(rèn)值）：設(shè)置子組件在水平方向上居中對齊。
👉End：設(shè)置子組件在水平方向上按照末端對齊。
Row容器的主軸是水平方向，交叉軸是垂直方向，其參數(shù)類型為VerticalAlign（垂直對齊），VerticalAlign定義了以下幾種類型：
👉Top：設(shè)置子組件在垂直方向上居頂部對齊。
👉Center（默認(rèn)值）：設(shè)置子組件在豎直方向上居中對齊。
👉Bottom：設(shè)置子組件在豎直方向上居底部對齊。
接口介紹
接下來，我們介紹Column和Row容器的接口。
Column和Row容器的接口都有一個可選參數(shù)space，表示子組件在主軸方向上的間距。
效果如下：
組件使用
我們來具體講解如何高效的使用Column和Row容器組件來構(gòu)建這個登錄頁面。
當(dāng)我們從設(shè)計同學(xué)那拿到一個頁面設(shè)計圖時，我們需要對頁面進(jìn)行拆解，先確定頁面的布局，再分析頁面上的內(nèi)容分別使用哪些組件來實(shí)現(xiàn)。
我們仔細(xì)分析這個登錄頁面。在靜態(tài)布局中，組件整體是從上到下布局的，因此構(gòu)建該頁面可以使用Column來構(gòu)建。在此基礎(chǔ)上，我們可以看到有部分內(nèi)容在水平方向上由幾個基礎(chǔ)組件構(gòu)成，例如頁面中間的短信驗(yàn)證碼登錄與忘記密碼以及頁面最下方的其他方式登錄，那么構(gòu)建這些內(nèi)容的時候，可以在Column組件中嵌套Row組件，繼而在Row組件中實(shí)現(xiàn)水平方向的布局。
根據(jù)上述頁面拆解，在Column容器里，依次是Image、Text、TextInput、Button等基礎(chǔ)組件，還有兩組組件是使用Row容器組件來實(shí)現(xiàn)的，主要代碼如下：
@Entry @Component export struct LoginPage {build() {Column() {Image($r('app.media.logo'))...Text($r('app.string.login_page'))...Text($r('app.string.login_more'))...TextInput({ placeholder: $r('app.string.account') })...TextInput({ placeholder: $r('app.string.password') })...Row() {Text($r(…)) Text($r(…)) }Button($r('app.string.login'), { type: ButtonType.Capsule, stateEffect: true })...Row() {this.imageButton($r(…))this.imageButton($r(…))this.imageButton($r(…))}...}...} }我們詳細(xì)看一下使用Row容器的兩組組件。
兩個文本組件展示的內(nèi)容是按水平方向布局的，使用兩端對齊的方式。這里我們使用Row容器組件，并且需要配置主軸上（水平方向）的對齊格式j(luò)ustifyContent為FlexAlign.SpaceBetween（兩端對齊）。
Row() {Text($r(…)) Text($r(…)) }.justifyContent(FlexAlign.SpaceBetween).width('100%')其他登錄方式的三個按鈕也是按水平方向布局的，同樣使用Row容器組件。這里按鈕的間距是一致的，我們可以通過配置可選參數(shù)space來設(shè)置按鈕間距，使子組件間距一致。
Row({ space: CommonConstants.LOGIN_METHODS_SPACE }) {this.imageButton($r(…))this.imageButton($r(…))this.imageButton($r(…)) }至此，你已經(jīng)完成這個登錄頁面的簡單布局實(shí)現(xiàn)了。你可以參考《常用組件與布局》這個Codelab驗(yàn)證一下頁面效果。
另外，你也可以通過《常用布局容器對齊方式》這個Codelab來深入學(xué)習(xí)Column、Row、Flex、Stack容器組件的對齊方式，掌握更多布局容器的使用方法。
參考資料
常用基礎(chǔ)的組件的更多使用方法可以參考：
Text
Image
TextInput
Button
LoadingProgress
引用資源類型的使用可以參考：
資源訪問
Column組件的相關(guān)API參考：Column組件。
Row組件的相關(guān)API參考：Row組件。
鏈接
總結(jié)
以上是生活随笔為你收集整理的梅克尔工作室-赵一帆-鸿蒙笔记2的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
