了解更多开源请访问：开源基础软件社区https://ost.51cto.com前言最近刚接触应用基于openHarmony开源框架的开发，尤其是基于TS扩展的声明式开发。本文主要结合Harmony官网的ETS相关组件和API，实现日常开发中常见的故障循环广播效果，熟悉ETS下一些基础组件的应用。UI开发模式效果演示实现步骤1.新建项目2.页面布局创建弹性flex布局，使用Swiper容器组件，Text，Image基础组件。build(){Flex(){//弹性布局Swiper(){//滑动容器，提供切换子组件显示的能力Flex(){Image($r('app.media.ic_warn'))//图像组件，用于渲染和显示图像。Text()//文本，用来呈现一段信息。Image($r('app.media.ic_arrow'))//图片资源放在资源文件夹下的media文件夹中}}}}3.以“.”的方式配置UI结构及其属性。链式调用、事件等build(){Flex({direction:FlexDirection.Row,alignItems:ItemAlign.Center}){//弹性布局Swiper(){//滑动容器，提供切换子组件显示的能力Flex({direction:FlexDirection.Row,alignItems:ItemAlign.Center}){//图像组件，用于渲染和显示图像Image($r('app.media.ic_warn')).width(24).height(24).margin({top:12,left:12,bottom:12}).objectFit(ImageFit.Fill)//Text，用来呈现一条信息Text('电池电量低，请及时充电!').width('75%').textOverflow({overflow:TextOverflow.None}).fontSize(16).fontColor(0xd94838).fontWeight(FontWeight.Medium).margin({top:14,left:16,}).padding({bottom:15})//图片资源放在资源文件夹下的media文件夹中Image($r('app.media.ic_arrow')).width(12).height(24).margin({top:12,right:12,bottom:12}).objectFit(ImageFit.Fill)}}.margin({top:30,right:12,left:12,}).height(48).borderRadius(16).backgroundColor(0xfce3df).index(1).autoPlay(true).interval(1000).indicator(false).loop(true).duration(1500).vertical(true).disableSwipe(true)}}swiper相关属性名称参数类型默认值说明indexnumber0设置当前显示在容器中的子组件的索引值。autoPlaybooleanfalsesubcomponent是否自动播放，自动播放状态下不能操作导航点。intervalnumber3000自动播放时播放的时间间隔，单位毫秒。indicatorbooleantrue是否开启导航点指示器。loopbooleantrue是否启用循环。durationnumber400子组件切换的动画时长，单位毫秒。verticalbooleanfalse是否垂直滑动。itemSpaceLength0设置子组件之间的间隙。cachedCountnumber1设置预加载子组件的数量。disableSwipebooleanboolean禁用组件的滑动开关功能。curveCurveCurve.Ease设置Swiper的动画曲线，默认为淡入淡出曲线。indicatorStyle设置指标样式图像的参数和属性。参数名称参数类型必填默认值参数说明srcstring|PixelMap|Resource为图片的数据源，支持本地图片和网络图片，建议使用$r方式管理图片需要全局使用资源。altstring否-加载时显示的占位符图像。支持本地图片和网络路径。objectFitImageFitNo封面图像的缩放类型。objectRepeatImageRepeatNoNoRepeat图片的重复样式，SVG类型图片源不支持该属性。interpolationImageInterpolationNoNone设置图像的插值效果，仅用于图像放大插值。SVG图像源和PixelMap资源不支持此属性。renderModeImageRenderMode否原始图像渲染模式，SVG类型图像源不支持该属性。sourceSize{width:number,height:number}否-图片解码尺寸，将原图片解码成指定尺寸的图片，number类型单位为px。PixelMap资源不支持此属性。syncLoadbooleanfalse是否同步加载图片，默认为异步加载。同步加载时UI线程被阻塞，占位图片不会显示。4.赋初值，完善逻辑，实现循环播放。使用ForEach循环遍历所有故障数据，并结合if和弹窗组件实现对某些故障对应解决方案提示框的需求。@Entry@ComponentstructSwiperExample{@Statearr:any[]=[{id:0,tipText:"设备缺水，请检查设备",showMoreIcon:true,},{id:1,tipText:"设备电流过大，请检查设备",showMoreIcon:true,},{id:2,tipText:"电池电量低，请及时充电！",showMoreIcon:false,}]@StatesolutionArray:any[]=["请检查进出水接头是否有松动，如果排查确认接头没有松动，请咨询官方售后服务电话："400-6008878"。","如果是第一次出现此故障提示，请重新插拔电池组；如果故障依旧，请联系经销商售后。"]build(){Flex({direction:FlexDirection.Row,alignItems:ItemAlign.Center}){Swiper(){ForEach(this.arr,(item)=>{Flex({direction:FlexDirection.Row,alignItems:ItemAlign.Center}){Image($r('app.media.ic_warn')).width(24).height(24).margin({top:12,left:12,bottom:12}).objectFit(ImageFit.Fill)Text(item.tipText).width('75%').textOverflow({overflow:TextOverflow.None}).fontSize(16).fontColor(0xd94838).fontWeight(FontWeight.Medium).margin({顶部：14，左侧：16，}).padding({底部：15})if(item.showMoreIcon){Image($r('app.media.ic_arrow')).width(12).height(24).margin({top:12,right:12,bottom:12}).objectFit(ImageFit.Fill).onClick(()=>{//弹出AlertDialog.show({title:'Solution',message:this.solutionArray[item.id],confirm:{value:'Gotit',action:()=>{console.info('Button-clickingcallback')}},cancel:()=>{console.info('Closedcallbacks')}})})}}})}.margin({top:30,右：12，左：12，}).height(48).borderRadius(16).backgroundColor(0xfce3df).index(1).autoPlay(true).interval(1000).indicator(false).loop(true).duration(1500).vertical(true).disableSwipe(true)}}}总结本例基于ETS组件的基本使用，旨在熟悉ETS规范与组件初体验了解更多开源信息，请访问：开源基础软件社区https://ost.51cto.com。
