鴻蒙應(yīng)用開發(fā) 基礎(chǔ)組件使用

鴻蒙應(yīng)用開發(fā)基礎(chǔ)組件使用1組件介紹組件（Component）是界面搭建與顯示的最小單位，HarmonyOSArkUI聲明式開發(fā)范式為開發(fā)者提供了豐富多樣的UI組件，我們可以使用這些組件輕松的編寫出更加豐富、漂亮的界面。組件根據(jù)功能可以分為以下五大類：基礎(chǔ)組件、容器組件、媒體組件、繪制組件、畫布組件。其中基礎(chǔ)組件是視圖層的基本組成單元，包括Text、Image、TextInput、Button、LoadingProgress等，例如下面這個常用的登錄界面就是由這些基礎(chǔ)組件組合而成。下面我們將分別介紹這些常用基礎(chǔ)組件的使用。2TextText組件用于在界面上展示一段文本信息，可以包含子組件Span。文本樣式針對包含文本元素的組件，例如Text、Span、Button、TextInput等，可使用fontColor、fontSize、fontStyle、fontWeight、fontFamily這些文本樣式，分別設(shè)置文本的顏色、大小、樣式、粗細(xì)以及字體，文本樣式的屬性如下表：名稱參數(shù)類型描述fontColorResourceColor設(shè)置文本顏色。fontSizeLength|Resource設(shè)置文本尺寸，Length為number類型時，使用fp單位。fontStyleFontStyle設(shè)置文本的字體樣式。默認(rèn)值：FontStyle.Normal。fontWeightnumber|FontWeight|string設(shè)置文本的字體粗細(xì)，number類型取值[100,900]，取值間隔為100，默認(rèn)為400，取值越大，字體越粗。string類型僅支持number類型取值的字符串形式，例如“400”，以及“bold”、“bolder”、“l(fā)ighter”、“regular”、“medium”，分別對應(yīng)FontWeight中相應(yīng)的枚舉值。默認(rèn)值：FontWeight.Normal。fontFamilystring|Resource設(shè)置文本的字體列表。使用多個字體，使用“，”進(jìn)行分割，優(yōu)先級按順序生效。例如：“Arial，sans-serif”。下面示例代碼中包含兩個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)?？梢钥吹窖b飾線，例如帶有下劃線超鏈接文本。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：文字下劃線修飾。3ImageImage組件用來渲染展示圖片，它可以讓界面變得更加豐富多彩。只需要給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('/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ā)者可以參考：訪問控制。4TextInputTextInput組件用于輸入單行文本，響應(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)

}

}效果圖如下：5ButtonButton組件主要用來響應(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組件：Button({

type:

ButtonType.Circle,

stateEffect:

true

})

{

Image($r('app.media.icon_delete'))

.width(30)

.height(30)

}

.width(55)

.height(55)

.backgroundColor(0x317aff)效果圖如下：6LoadingProgressLoadingProgress組件用于顯示加載進(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":

"登錄"

}

]