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

基础组件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(Color.Red)?//分割线的颜色??.strokeWidth(1)???//分割线的线宽??.lineCap(LineCapStyle.Round)//分割线的样式