《HarmonyOS應(yīng)用開發(fā)基礎(chǔ)》 課件知識點2-3-2 基礎(chǔ)組件1

基礎(chǔ)組件1組件概述組件（Component）是界面搭建與顯示的最小單位,

HarmonyOSArkUI聲明式開發(fā)范式為開發(fā)者提供了豐富多樣的UI組件。組件根據(jù)功能可以分為以下五大類：基礎(chǔ)組件、容器組件、媒體組件、繪制組件、畫布組件。其中基礎(chǔ)組件是視圖層的基本組成單元，包括Text、Image、TextInput、Button、LoadingProgress等。010203文本組件Text圖片組件Image空白填充組件Blank04分割線組件Divider文本組件TextText組件用于顯示文本信息。常用的屬性有：fontSize：設(shè)置字體大小fontColor：設(shè)置字體顏色textAlign：設(shè)置文本對齊格式fontWeight：設(shè)置字體權(quán)重fontStyle：設(shè)置字體樣式decoration：設(shè)置文本裝飾線maxLines：設(shè)置文本最大行數(shù)textOverFlow：設(shè)置文本超長時的顯示方式文本組件TextText('Hello,

HarmonyOS;

Hi

ArkUI')

.fontSize(20)

//大小

.fontColor('#ff0000')

//顏色

.textAlign(TextAlign.Center)

//文本的對齊方式(Start/Center/End)

.fontWeight(FontWeight.Bold)

//字重

.fontStyle(FontStyle.Italic)

//樣式(正常：Normal

斜體：Italic)

//給文本添加裝飾線，Unerline為下劃線

.decoration({type:

TextDecorationType.Underline,

color:

Color.Black})

.maxLines(1)

//設(shè)置行數(shù)為1時可與下面的截斷方式配合使用

.textOverflow({overflow:

TextOverflow.Ellipsis})//截斷方式圖片組件ImageImage組件用來渲染展示圖片,只需要給Image組件設(shè)置圖片地址、寬和高，圖片就能顯示出來。示例代碼如下。Image($r("app.media.icon"))

.width(100)

.height(100)圖片地址可以是本地圖片也可以是網(wǎng)絡(luò)圖片。引用本地圖片資源時，建議使用$r方式來管理需全局使用的圖片資源。支持的圖片格式包括png、jpg、bmp、svg和gif。圖片組件Image圖片縮放處理使用objectFit屬性設(shè)置圖片的縮放類型，objectFit的參數(shù)類型為ImageFit。ImageFit.Cover（默認值）：保持寬高比進行縮小或者放大，使得圖片兩邊都大于或等于顯示邊界；ImageFit.Fill：不保持寬高比進行放大縮小，使得圖片充滿顯示邊界，可以看到圖片為了適應(yīng)屏幕，改變了寬高比；ImageFit.Contain：保持寬高比進行縮小或者放大，使得圖片完全顯示在顯示邊界內(nèi)；ImageFit.None：保持原有尺寸顯示；ImageFit.ScaleDown：保持寬高比顯示，圖片縮小或者保持不變。圖片組件Image原圖ImageFit.CoverImageFit.FillImageFit.ContainImageFit.NoneImageFit.ScaleDown空白填充組件BlankBlank表示空白填充組件，在線性布局容器組件內(nèi)用來填充組件在主軸方向上的剩余尺寸。例如：在下圖中，Blank在Row方向上的使用，除了子組件的本身寬度尺寸外，剩余尺寸用Blank占滿，子組件可以很容易實現(xiàn)靠左或靠右擺放。分隔線組件Divider在UI開發(fā)中經(jīng)常用到的分割線，可以用組件Divider實現(xiàn)。使用的示例代碼如下。Divider()

//無參

.vertical(true)

//分割線的方向，默認是false水平，true代表垂直方向

.color(C