《移动应用开发技术与实战（ArkTS）》课件 项目3-常用UI组件（上）

常用UI组件(上)01Image组件02Text组件03Button组件04Radio组件05Toggle组件06项目实训目

录Contents01Image组件1.1Image组件概述1.2创建Image组件1.3Image组件常用属性其核心作用是把不同来源的图片数据以可视化形式呈现给用户，增强应用的视觉效果和用户体验。核心作用Image组件用于在应用界面中展示各类图片，它允许开发者通过简单的代码将本地资源、网络链接或Base64编码的图片渲染到界面上。组件用法支持常见的图片格式，如png、jpg、jpeg、bmp、svg、webp、gif和heif等。不同格式的图片在质量、压缩率和动画支持等方面各有特点，开发者可以根据实际需求选择合适的图片格式。图片格式Text组件Button组件Radio组件Toggle组件项目实训Image组件1.1Image组件概述Text组件Button组件Radio组件Toggle组件项目实训Image组件1.2创建Image组件加载本地图片图3-2加载本地图片结果加载本地图片结果如图3-2所示。Text组件Button组件Radio组件Toggle组件项目实训Image组件1.2创建Image组件加载本地图片首先将图片资源(如HarmonyOSNEXT.jpg)放入项目resources/base/media下，如图3-1所示。图3-1图片资源HarmonyOSNEXT.jpg然后在ArkTS文件中引入并创建Image组件，如代码所示。Text组件Button组件Radio组件Toggle组件项目实训Image组件1.2创建Image组件加载本地图片@Entry@ComponentstructIndex{build(){Column(){Image($r('app.media.HarmonyOSNEXT')).width('100%')}}}其中$r('app.media.HarmonyOSNEXT')是鸿蒙的资源引用语法，用于引用项目中resources/base/media目录下名为HarmonyOSNEXT的图片资源。注意：图片资源的命名不可以为中文，否则报错无法运行。Text组件Button组件Radio组件Toggle组件项目实训Image组件1.2创建Image组件加载网络图片通过传入网络图片的URL地址来加载网络图片，如图3-3所示。图3-3加载网络图片加载网络图片结果如图3-4所示。图3-4加载网络图片结果Image组件有许多常用属性，可用于控制图片的显示效果、大小、裁剪方式等，常用属性如表3-1所示。Text组件Button组件Radio组件Toggle组件项目实训Image组件1.3Image组件常用属性表3-1Image组件常用属性及说明属性名称属性作用可选值width设置图片的宽度具体数值（像素、逻辑像素）或百分比height设置图片的高度具体数值（像素、逻辑像素）或百分比borderRadius设置图片的圆角半径。具体数值或字符串alt设置图片加载时显示的占位图支持本地图片（png、jpg、bmp、svg、gif和heif类型）,支持PixelMap类型图片，不支持网络图片。默认值：nullobjectFit设置图片的填充效果，控制图片在组件区域内的显示方式ImageFit.Fill：拉伸图片以填充整个组件区域，可能变形ImageFit.Contain：保持宽高比，完整显示图片，可能留空白ImageFit.Cover：保持宽高比，覆盖组件区域，可能裁剪部分图片。ImageFit.None：不缩放，按原始大小显示ImageFit.ScaleDown：图片尺寸大于组件时按Contain显示，否则按None显示默认值：ImageFit.CoverobjectRepeat设置图片的重复样式ImageRepeat.NoRepeat：不重复，只显示一次

ImageRepeat.XY：水平和垂直方向重复显示

ImageRepeat.X:只在水平方向重复显示

ImageRepeat.Y:只在垂直方向重复显示默认值：ImageRepeat.NoRepeatinterpolation设置图片的插值效果，减轻低清晰度图片放大时的锯齿问题ImageInterpolation.Low：低质量插值，性能高但可能有明显锯齿

ImageInterpolation.Medium：中等质量插值，平衡性能和效果

ImageInterpolation.High：高质量插值，效果好但性能开销大默认值：ImageInterpolation.LowfillColor设置填充颜色颜色值（如

Color.Red），仅对svg图片生效代码执行结果如图3-5所示。Text组件Button组件Radio组件Toggle组件项目实训Image组件1.3Image组件常用属性图3-5图片组件常用属性效果链式调用是指通过连续的点操作符（.）设置多个属性，允许连续配置。Image组件的属性设置完全支持链式调用。通过链式调用的方法，按水平方向重复显示红包样式的本地图片money.png,且在未加载成功前显示rays.svg作为占位图。如下代码所示。Text组件Button组件Radio组件Toggle组件项目实训Image组件1.3Image组件常用属性Image($r('app.media.money'))//加载本地图片money.png.width('100%')//设置图片组件的宽度

.height(80)//设置图片组件的高度

.border({width:7})//设置图片组件的边框样式，边框线宽度为7.borderRadius(20)//设置图片的圆角半径为20.alt($r('app.media.rays'))//设置图片加载时显示的占位图为rays.svg.objectFit(ImageFit.Contain)//设置图片的填充效果为Contain，可根据实际情况选择合适的填充效果

.objectRepeat(ImageRepeat.X)//设置图片的重复样式为只在水平方向重复

.interpolation(ImageInterpolation.High)//设置图片的插值效果为高质量插值

.fillColor(Color.Red)//设置填充颜色，仅对svg格式生效02Text组件2.1Text组件概述2.2创建Text组件2.3Text组件常用属性2.1Text组件概述目的一在鸿蒙NEXT系统中，Text组件是用于在界面上渲染和展示文本内容的基础组件，开发者可以通过该组件将各种文本内容（如标题、说明文字、提示信息等）添加到应用的用户界面中。研究思路与目的Text组件Image组件Button组件Radio组件Toggle组件项目实训2.2创建Text组件目的一研究思路与目的Text组件Image组件Button组件Radio组件Toggle组件项目实训一种为直接将字符串文本作为参数传递给content参数，Text('HelloHarmonyOSNEXT')另一种为引用Resource资源，Text($r('app.string.module_desc'))。Text组件用于在界面上显示文本内容，声明格式为：Text(content?:string|Resource,value?:TextOptions)，因此在创建组件时有两种方式：2.3Text组件常用属性目的一研究思路与目的Text组件Image组件Button组件Radio组件Toggle组件项目实训基于ArkUI框架的设计理念，Text组件支持丰富的样式、交互和动态效果。常用属性如表3-2所示。表3-2Text组件常用属性及说明属性名称属性说明fontSize设置字体大小，为number类型时，使用fp单位。字体默认大小16fp。不支持设置百分比字符串fontColor设置字体颜色fontWeight设置文本的字体粗细，number类型取值[100,900]，取值间隔为100，默认为400，取值越大，字体越粗。string类型仅支持number类型取值的字符串形式，例如"400"，以及"Bolder"、"Lighter"、"Regular"、"Medium"，分别对应FontWeight中相应的枚举值。默认值：FontWeight.NormalfontStyle设置字体样式，"Italic"、"Normal"

，分别对应FontStyle中相应的枚举值。textAlign设置文本段落在水平方向的对齐方式，默认值：TextAlign.StarttextOverflow设置文本超长时，显示不下的文本的显示方式为下划线、删除线等。当overflow设置为TextOverflow.None、TextOverflow.Clip、TextOverflow.Ellipsis时，需配合maxLines使用，单独设置不生效maxLines设置文本的最大行数。默认情况下，文本是自动折行的，如果指定此属性，则文本最多不会超过指定的行lineHeight设置文本的文本行高decoration设置文本装饰线样式及其颜色letterSpacing设置文本字符间距。设置该值为百分比时，按默认值显示。设置该值为0时，按默认值显示

2.3Text组件常用属性目的一研究思路与目的Text组件Image组件Button组件Radio组件Toggle组件项目实训使用Text组件常用属性，对多行文本的样式进行设置。如下代码所示。Text('HarmonyOSNEXT是华为公司自研操作系统，2023年8月4日发布，'+'该系统是鸿蒙抛弃Linux内核及安卓开放源代码项目等代码的首个大版本，'+'该系统仅支持鸿蒙内核和鸿蒙系统的应用，不再兼容安卓应用。')//多行文本显示

.fontColor(Color.Blue)//设置字体颜色为蓝色

.fontSize(25)//设置字体大小为25fp.fontWeight(FontWeight.Bolder)//设置字体为加粗

.fontStyle(FontStyle.Italic)//设置字体为斜体

.textAlign(TextAlign.Center)//文本对齐方式为居中.maxLines(5)//文本显示最大行数为5.lineHeight(50)//文本行高为50.letterSpacing(2)//字符间距设置为2.decoration({//设置文本的装饰线样式及其颜色

type:TextDecorationType.Underline,color:Color.Red,style:TextDecorationStyle.WAVY}).textOverflow({overflow:TextOverflow.Ellipsis//设置文本超长时显示不下的文本用省略号代替})2.3Text组件常用属性目的一研究思路与目的Text组件Image组件Button组件Radio组件Toggle组件项目实训上划线、下划线、穿过文本根据实际情况需求设置颜色实线、双实线、点线、虚线、波浪线装饰线类型type：装饰线颜色color：装饰线样式style：decoration属性textOverflow为文本超长时显示不下的文本的显示样式，Ellipsis表示用省略号代替，MARQUEE为跑马灯的方式，但是需配合maxLines使用，单独设置不生效。Button组件常用属性03Button组件3.1Button组件概述3.2创建Button组件3.3Button组件常用属性3.4Button组件常用事件3.1Button组件概述Button组件Radio组件Toggle组件项目实训Text组件Image组件Button组件为用户提供了一个可单击的界面元素，通常显示为一个带有文本或图标的矩形区域。用户单击按钮时，会触发与之关联的事件，从而执行相应的业务逻辑，比如提交表单、切换页面、执行计算等。3.2创建Button组件Button组件Radio组件Toggle组件项目实训Text组件Image组件按钮组件Button的声明格式为Button(label:ResourceStr,options?:ButtonOptions)。使用lable，创建不包含子组件的按钮，如Button('登录')。不使用lable，创建包含子组件的按钮，但是只支持包含一个子组件，可以是基础组件或者容器组件。如下代码所示。Button(){Image($r('app.media.add'))//引用图片资源

.width(50)}3.3Button组件常用属性Button组件Radio组件Toggle组件项目实训Text组件Image组件Button组件是用于触发用户交互的核心组件之一。它支持丰富的属性，用于定义按钮的样式、行为和内容。常用属性如表3-3所示。表3-3Button

组件常用属性及说明属性名称属性说明width

/

height设置按钮的宽度和高度backgroundColor设置按钮背景色borderRadius设置按钮圆角type设置按钮类型，ButtonType.Normal：默认按钮。ButtonType.Capsule：胶囊按钮（圆角较大）。ButtonType.Circle：圆形按钮。fontSize设置文本显示字号fontColor设置文本显示颜色fontWeight设置文本的字体粗细。stateEffect设置是否开启按压态显示效果。按钮按下时是否开启按压态显示效果，当设置为false时，按压效果关闭。默认值：true使用Button组件常用属性，对按钮的样式进行设置。如下代码所示。3.3Button组件常用属性Button组件Radio组件Toggle组件项目实训Text组件Image组件Button('登录')//创建用于登录的按钮

.width(200)//设置按钮宽度

.height(85)//设置按钮高度

.type(ButtonType.Capsule)//设置按钮的类型为胶囊型

.backgroundColor(Color.Pink)//设置按钮的背景色

.fontColor(Color.Black)//设置按钮上字体的颜色

.fontSize(30)//设置按钮上字体大小

.fontWeight(FontWeight.Medium)//设置按钮上字体为中等

.stateEffect(true)//设置开启按压态显示效果其中type属性为对按钮的样式的设置，根据需求可设置为胶囊型Capsule、圆形Circle或者默认形状Normal。stateEffect属性设置为true时展示出按压状态的显示效果。3.4Button组件常用事件Button组件Radio组件Toggle组件项目实训Text组件Image组件@Statecount:number=1;//定义状态变量count用于计数,当前初始值为1build(){Row({space:20}){Text(`当前值:${this.count}`).fontSize(35)Button(){Image($r('app.media.add'))//引用图片资源

.width(50)}.onClick(()=>{this.count++//单击按钮实现当前值加1})}}Button组件支持多种事件，用于响应用户交互行为。常用事件为onClick，用于监听按钮的单击操作，适用于大多数交互场景，如提交表单、打开页面等。每当用户单击Button的时候，就会回调执行onClick方法，调用里面的逻辑代码。以下代码可是实现单击按钮，当前值增加1的功能。04Radio组件4.1Radio组件概述4.2创建Radio组件4.3Radio组件常用属性4.1Radio组件概述Radio组件Text组件Image组件Button组件Toggle组件项目实训Radio组件为单选框，允许用户在多个可见的选项中进行选择，且一次只能选择一个选项。Radio组件在多个领域和场景中都有广泛的应用，包括但不限于：表单填写：在需要用户进行单选的表单中，可以使用Radio组件来收集用户的选择。例如，性别选择、学历选择等。问卷调查：在问卷调查中，可以使用Radio组件让用户对某个问题进行单选回答。4.2创建Radio组件Radio组件Text组件Image组件Button组件Toggle组件项目实训创建性别选择的单选框，如下代码所示。Row(){Text('性别：')Radio({value:'男',group:'sex'})//当前单选框的值为男，所属群组名称为sexText('男')Radio({value:'女',group:'sex'})//当前单选框的值为女

Text('女')}按钮组件Radio的声明格式为Radio({value:string,group:string})value表示当前单选框的值，group表示当前单选框的所属群组名称，相同group的Radio只能有一个被选中。4.3Radio组件常用属性Radio组件Text组件Image组件Button组件Toggle组件项目实训Radio组件通常具有以下常用属性及常用事件，如表3-4所示。表3-4Radio组件常用属性及常用事件在3.4.2小节实现基础上，使用indicatorType属性控制单选框的选中样式，如下代码所示两个选项分别配置了画勾和圆圈不同的样式。单选框选中状态改变时触发onChange，执行里面的逻辑代码，在文本组件中返回当前性别。属性名称属性说明value用于设置

Radio

组件的值，当

Radio

被选中时，这个值可以被获取，以便判断用户选择的是哪个选项checked布尔类型属性，用于设置

Radio

是否被选中。可以通过动态绑定数据来控制其选中状态indicatorType配置单选框的选中样式。未设置时按照RadioIndicatorType.TICK进行显示onChange单选框选中状态改变时触发4.3Radio组件常用属性Radio组件Text组件Image组件Button组件Toggle组件项目实训@Stategender:string='女'//定义初始被选中性别为女build(){Column({space:30}){Row(){Text('性别：')Radio({value:'男',group:'sex',indicatorType:RadioIndicatorType.TICK})//选中状态为勾

.onChange((isChecked:boolean)=>{//当选中状态改变时执行出发回调

if(isChecked){this.gender='男'}else{this.gender='女'}})Text('男')Radio({value:'女',group:'sex',indicatorType:RadioIndicatorType.DOT})//选中状态为圈

.checked(true)Text('女')}Text('当前性别为：'+this.gender)}}05Toggle组件5.1Toggle组件概述5.2创建Toggle组件5.3Toggle组件常用属性5.4Toggle组件常用事件5.1Toggle组件概述研究成果分析Toggle组件CheckboxButtonSwitch提供状态按钮样式。只能包含一个子组件，如果子组件有文本设置，则相应的文本内容会显示在按钮内部，用户可以通过单击来切换其状态。允许用户从多个选项中选择一个或多个选项，通常用于表示某选项的打开或关闭状态，用户可以通过单击来选中或取消选中。从APIversion11开始，Checkbox的默认样式由圆角方形变为圆形。提供开关样式。显示为一个滑动开关，用户可以通过滑动来切换其状态Toggle组件支持三种类型：Checkbox、Button和Switch，每种类型都有其特定的外观和行为。Text组件Image组件Button组件Radio组件项目实训5.2创建Toggle组件研究成果分析Toggle组件Text组件Image组件Button组件Radio组件项目实训Toggle({type:ToggleType.Checkbox,isOn:true})创建Toggle组件时，可以通过调用Toggle(options:{type:ToggleType,isOn?:boolean})接口来指定其类型和初始状态。此外，还可以通过自定义样式来改变Toggle组件的外观。创建Toggle组件如下代码所示。其中type参数用于设置开关的类型，默认值为ToggleType.Switch。isOn参数表示开关是否打开，true：打开，false：关闭，默认值为false。5.3Toggle组件常用属性研究成果分析Toggle组件Text组件Image组件Button组件Radio组件项目实训Toggle组件通常具有以下常用属性，如表3-5所示。表3-5Toggle组件常用属性属性名称属性说明selectedColor设置组件打开状态的背景颜色switchPointColor设置Switch类型的圆形滑块颜色。仅对type为ToggleType.Switch生效当Toggle组件类型为Switch时，通过常用属性selectedColor、switchPointColor设置打开状态及滑块的颜色。当Toggle组件类型为Button时，可包含一个文本组件，则相应的内容会显示在按钮内部，例如登录页面中的忘记密码选项可使用Toggle组件实现。如下代码所示。5.3Toggle组件常用属性研究成果分析Toggle组件Text组件Image组件Button组件Radio组件项目实训Toggle({type:ToggleType.Switch,isOn:true}).selectedColor(Color.Blue)//设置组件打开状态的颜色为蓝色

.switchPointColor(Color.White)//设置组件圆形滑块颜色为白色Toggle({type:ToggleType.Button,isOn:true}){Text('忘记密码')}.selectedColor(Color.White)5.4Toggle组件常用事件研究成果分析Toggle组件Text组件Image组件Button组件Radio组件项目实训onChange事件Toggle组件支持绑定onChange事件，该事件在组件状态改变时被触发。开发者可以在事件处理函数中根据Toggle组件的新状态（isOn参数）执行相应的自定义逻辑。如代码所示，当Toggle组件开关状态改变时触发onChange，执行里面的逻辑代码，在文本组件中返回当前状态。如代码所示。Toggle({type:ToggleType.Switch,isOn:true}).selectedColor(Color.Blue).switch