1?組件介紹

組件（Component）是界面搭建與顯示的最小單位，HarmonyOS ArkUI聲明式開發(fā)范式為開發(fā)者提供了豐富多樣的UI組件，我們可以使用這些組件輕松的編寫出更加豐富、漂亮的界面。

組件根據(jù)功能可以分為以下五大類：基礎(chǔ)組件、容器組件、媒體組件、繪制組件、畫布組件。其中基礎(chǔ)組件是視圖層的基本組成單元，包括Text、Image、TextInput、Button、LoadingProgress等，例如下面這個(gè)常用的登錄界面就是由這些基礎(chǔ)組件組合而成。

Text

Text組件用于在界面上展示一段文本信息，可以包含子組件Span。

文本樣式

針對包含文本元素的組件，例如Text、Span、Button、TextInput等，可使用fontColor、fontSize、fontStyle、 fontWeight、fontFamily這些[文本樣式，分別設(shè)置文本的顏色、大小、樣式、粗細(xì)以及字體，文本樣式的屬性如下表：

?語法格式

@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è)置文本對齊方式

使用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組件范圍的時(shí)候，您可以使用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)頁的時(shí)候經(jīng)常可以看到裝飾線，例如帶有下劃線超鏈接文本。decoration包含type和color兩個(gè)參數(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è)置縮放類型

為了使圖片在頁面中有更好的顯示效果，有時(shí)候需要對圖片進(jìn)行縮放處理。您可以使用objectFit屬性設(shè)置圖片的縮放類型，objectFit的參數(shù)類型為ImageFit。

原始圖片

將圖片加載到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ò)圖片

比如瀏覽新聞的時(shí)候，圖片一般從網(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)了'一個(gè)簡單的輸入框：

TextInput().fontColor(Color.Blue).fontSize(20).fontStyle(FontStyle.Italic).fontWeight(FontWeight.Bold).fontFamily('Arial')

效果圖如下：

設(shè)置輸入提示文本

當(dāng)我們平時(shí)使用輸入框的時(shí)候，往往會有一些提示文字。例如登錄賬號的時(shí)候會有“請輸入賬號”這樣的文本提示，當(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è)置輸入框類型。例如密碼輸入框，一般輸入密碼的時(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動(dòng)態(tài)設(shè)置光位置，下面的示例代碼使用TextInputController的caretPosition方法，將光標(biāo)移動(dòng)到了第二個(gè)字符后。

@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ā)生變化時(shí)觸發(fā)回調(diào)，下面示例代碼中的value為實(shí)時(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)了一個(gè)“登錄按鈕”：

Button('登錄', { type: ButtonType.Capsule, stateEffect: true }).width('90%').height(40).fontSize(16).fontWeight(FontWeight.Medium).backgroundColor('#007DFF')

效果圖如下：

設(shè)置按鈕樣式

type用于定義按鈕樣式，示例代碼中ButtonType.Capsule表示膠囊形按鈕；stateEffect用于設(shè)置按鈕按下時(shí)是否開啟切換效果，當(dāng)狀態(tài)置為false時(shí)，點(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的時(shí)候，就會回調(diào)執(zhí)行onClick方法，調(diào)用里面的邏輯代碼。

Button('登錄', { type: ButtonType.Capsule, stateEffect: true })....onClick(() => {// 處理點(diǎn)擊事件邏輯})

包含子組件

Button組件可以包含子組件，讓您可以開發(fā)出更豐富多樣的Button，下面的示例代碼中Button組件包含了一個(gè)Image組件：o

Button({ type: ButtonType.Circle, stateEffect: true }) {Image($r('app.media.icon_delete')).width(30).height(30) } .width(55) .height(55) .backgroundColor(0x317aff)

效果圖如下：

?LoadingProgress

LoadingProgress組件用于顯示加載進(jìn)展，比如應(yīng)用的登錄界面，當(dāng)我們點(diǎn)擊登錄的時(shí)候，顯示的“正在登錄”的進(jìn)度條狀態(tài)。LoadingProgress的使用非常簡單，只需要設(shè)置顏色和寬高就可以了。

LoadingProgress().color(Color.Blue).height(60).width(60)

效果圖如下：

使用資源引用類型

Resource是資源引用類型，用于設(shè)置組件屬性的值。推薦大家優(yōu)先使用Resource類型，將資源文件（字符串、圖片、音頻等）統(tǒng)一存放于resources目錄下，便于開發(fā)者統(tǒng)一維護(hù)。同時(shí)系統(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ā)者定義資源時(shí)確定。

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組件的使用

1?概述

一個(gè)豐富的頁面需要很多組件組成，那么，我們?nèi)绾尾拍茏屵@些組件有條不紊地在頁面上布局呢？這就需要借助容器組件來實(shí)現(xiàn)。

容器組件是一種比較特殊的組件，它可以包含其他的組件，而且按照一定的規(guī)律布局，幫助開發(fā)者生成精美的頁面。容器組件除了放置基礎(chǔ)組件外，也可以放置容器組件，通過多層布局的嵌套，可以布局出更豐富的頁面。

ArkTS為我們提供了豐富的容器組件來布局頁面，本文將以構(gòu)建登錄頁面為例，介紹Column和Row組件的屬性與使用。

2?組件介紹

布局容器概念

線性布局容器表示按照垂直方向或者水平方向排列子組件的容器，ArkTS提供了Column和Row容器來實(shí)現(xiàn)線性布局。

• Column表示沿垂直方向布局的容器。
• Row表示沿水平方向布局的容器。

主軸和交叉軸概念

在布局容器中，默認(rèn)存在兩根軸，分別是主軸和交叉軸，這兩個(gè)軸始終是相互垂直的。不同的容器中主軸的方向不一樣的。

• 主軸：在Column容器中的子組件是按照從上到下的垂直方向布局的，其主軸的方向是垂直方向；在Row容器中的組件是按照從左到右的水平方向布局的，其主軸的方向是水平方向。

圖2-1?Column容器&Row容器主軸

• 交叉軸：與主軸垂直相交的軸線，如果主軸是垂直方向，則交叉軸就是水平方向；如果主軸是水平方向，則交叉軸是垂直方向。

圖2-2?Column容器&Row容器交叉軸

屬性介紹

了解布局容器的主軸和交叉軸，主要是為了讓大家更好地理解子組件在主軸和交叉軸的排列方式。

接下來，我們將詳細(xì)講解Column和Row容器的兩個(gè)屬性justifyContent和alignItems。

屬性名稱

描述

justifyContent	設(shè)置子組件在主軸方向上的對齊格式。
alignItems	設(shè)置子組件在交叉軸方向上的對齊格式。

1. 主軸方向的對齊（justifyContent）

子組件在主軸方向上的對齊使用justifyContent屬性來設(shè)置，其參數(shù)類型是FlexAlign。FlexAlign定義了以下幾種類型：

• Start：元素在主軸方向首端對齊，第一個(gè)元素與行首對齊，同時(shí)后續(xù)的元素與前一個(gè)對齊。

• Center：元素在主軸方向中心對齊，第一個(gè)元素與行首的距離以及最后一個(gè)元素與行尾距離相同。

• End：元素在主軸方向尾部對齊，最后一個(gè)元素與行尾對齊，其他元素與后一個(gè)對齊。

• SpaceBetween：元素在主軸方向均勻分配彈性元素，相鄰元素之間距離相同。 第一個(gè)元素與行首對齊，最后一個(gè)元素與行尾對齊。

• SpaceAround：元素在主軸方向均勻分配彈性元素，相鄰元素之間距離相同。 第一個(gè)元素到行首的距離和最后一個(gè)元素到行尾的距離是相鄰元素之間距離的一半。

• 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	Column(value?:{space?: string | number})
Row	Row(value?:{space?: string | number})

Column和Row容器的接口都有一個(gè)可選參數(shù)space，表示子組件在主軸方向上的間距。

效果如下：

3?組件使用

我們來具體講解如何高效的使用Column和Row容器組件來構(gòu)建這個(gè)登錄頁面。

當(dāng)我們從設(shè)計(jì)同學(xué)那拿到一個(gè)頁面設(shè)計(jì)圖時(shí)，我們需要對頁面進(jìn)行拆解，先確定頁面的布局，再分析頁面上的內(nèi)容分別使用哪些組件來實(shí)現(xiàn)。

我們仔細(xì)分析這個(gè)登錄頁面。在靜態(tài)布局中，組件整體是從上到下布局的，因此構(gòu)建該頁面可以使用Column來構(gòu)建。在此基礎(chǔ)上，我們可以看到有部分內(nèi)容在水平方向上由幾個(gè)基礎(chǔ)組件構(gòu)成，例如頁面中間的短信驗(yàn)證碼登錄與忘記密碼以及頁面最下方的其他方式登錄，那么構(gòu)建這些內(nèi)容的時(shí)候，可以在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容器的兩組組件。

兩個(gè)文本組件展示的內(nèi)容是按水平方向布局的，使用兩端對齊的方式。這里我們使用Row容器組件，并且需要配置主軸上（水平方向）的對齊格式j(luò)ustifyContent為FlexAlign.SpaceBetween（兩端對齊）。

Row() {Text($r(…)) Text($r(…)) }.justifyContent(FlexAlign.SpaceBetween).width('100%')

其他登錄方式的三個(gè)按鈕也是按水平方向布局的，同樣使用Row容器組件。這里按鈕的間距是一致的，我們可以通過配置可選參數(shù)space來設(shè)置按鈕間距，使子組件間距一致。

Row({ space: CommonConstants.LOGIN_METHODS_SPACE }) {this.imageButton($r(…))this.imageButton($r(…))this.imageButton($r(…)) }

總結(jié)

以上是生活随笔為你收集整理的梅科尔工作室-梁嘉莹-鸿蒙笔记2的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。