《HarmonyOS应用开发基础》 课件知识点2-3-2 基础组件1

基础组件1组件概述组件（Component）是界面搭建与显示的最小单位,

HarmonyOSArkUI声明式开发范式为开发者提供了丰富多样的UI组件。组件根据功能可以分为以下五大类：基础组件、容器组件、媒体组件、绘制组件、画布组件。其中基础组件是视图层的基本组成单元，包括Text、Image、TextInput、Button、LoadingProgress等。010203文本组件Text图片组件Image空白填充组件Blank04分割线组件Divider文本组件TextText组件用于显示文本信息。常用的属性有：fontSize：设置字体大小fontColor：设置字体颜色textAlign：设置文本对齐格式fontWeight：设置字体权重fontStyle：设置字体样式decoration：设置文本装饰线maxLines：设置文本最大行数textOverFlow：设置文本超长时的显示方式文本组件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)

//设置行数为1时可与下面的截断方式配合使用

.textOverflow({overflow:

TextOverflow.Ellipsis})//截断方式图片组件ImageImage组件用来渲染展示图片,只需要给Image组件设置图片地址、宽和高，图片就能显示出来。示例代码如下。Image($r("app.media.icon"))

.width(100)

.height(100)图片地址可以是本地图片也可以是网络图片。引用本地图片资源时，建议使用$r方式来管理需全局使用的图片资源。支持的图片格式包括png、jpg、bmp、svg和gif。图片组件Image图片缩放处理使用objectFit属性设置图片的缩放类型，objectFit的参数类型为ImageFit。ImageFit.Cover（默认值）：保持宽高比进行缩小或者放大，使得图片两边都大于或等于显示边界；ImageFit.Fill：不保持宽高比进行放大缩小，使得图片充满显示边界，可以看到图片为了适应屏幕，改变了宽高比；ImageFit.Contain：保持宽高比进行缩小或者放大，使得图片完全显示在显示边界内；ImageFit.None：保持原有尺寸显示；ImageFit.ScaleDown：保持宽高比显示，图片缩小或者保持不变。图片组件Image原图ImageFit.CoverImageFit.FillImageFit.ContainImageFit.NoneImageFit.ScaleDown空白填充组件BlankBlank表示空白填充组件，在线性布局容器组件内用来填充组件在主轴方向上的剩余尺寸。例如：在下图中，Blank在Row方向上的使用，除了子组件的本身宽度尺寸外，剩余尺寸用Blank占满，子组件可以很容易实现靠左或靠右摆放。分隔线组件Divider在UI开发中经常用到的分割线，可以用组件Divider实现。使用的示例代码如下。Divider()

//无参

.vertical(true)

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

.color(C