了解更多开源内容请访问：开源基础软件社区https://ost.51cto.com。前言通过参加《HarmonyOSArkUI入门训练营-健康生活实战》，了解并学习了声明式UI开发框架和组件使用。这篇文章是笔者最后一部作品中对列表界面的一个小分享，涉及到List组件和Tabs组件的使用。概述这是一款运动记录应用，主要用于管理健康记录运动。您可以添加运动信息，包括运动名称、运动时长，并自动计算燃烧的卡路里。您可以在记录页面查看已添加的运动记录。界面效果图如下：正文1.新建一个运动数据类。在MainAbility目录下新建文件夹model，在model文件夹下新建两个ets文件，分别命名为SportsData和SportsDataModel，如图：在SportsData中添加代码：exportenumCategory{Walking='walking',Running='running',Swimming='游泳',Riding='骑自行车',Ball='打球',Other='other'}letNextId=0;exportclassSportsData{id:string;名称：字符串；图片：资源；值：数字；类别：类别；constructor(name:string,category:Category,image:Resource,value:number){this.id=`${NextId++}`;.name=名称；this.image=图片；this.category=类别；this.value=值；}}exportclassRecordData{名称：字符串；图片：资源；时间：字符串；总和：数字；构造函数（名称：字符串，图像：资源，时间：字符串，总和：数字）{this.name=name;this.image=图片；this.time=时间this.sum=sum;}}在SportsDataModel中添加代码：import{Category,SportsData}from'./SportsData'constSportsComposition:any[]=[{'name':'Walking','category':Category.Walking,'image':$r('app.media.walk_slow'),'value':81},{'name':'快走(5km/h)','category':Category.Walking,'image':$r('app.media.walk_fast'),'value':188},{'name':'running(slow)','category':Category.Running,'image':$r('app.media.run'),'value':344},{'name':'Running(fast)','category':Category.Running,'image':$r('app.media.run_fast'),'value':475},{'name':'遛狗','category':Category.Walking,'image':$r('app.media.walk_dog'),'value':125},{'name':'游泳','category':Category.Swimming,'image':$r('app.media.swim'),'value':344},{'name':'乒乓球','category':Category.Ball,'image':$r('app.media.pingpong'),'value':188},{'name':'baseball','category':Category.Ball,'image':$r('app.media.baseball'),'value':188},{'name':'HulaHoop','category':Category.Other,'image':$r('app.media.hula'),'value':156},{'name':'跳绳','category':Category.Other,'image':$r('app.media.skip_rope'),'value':363},{'name':'骑行(<16km/h)','category':Category.Riding,'image':$r('app.media.ride'),'value':188},{'name':'类别(16-19km/h)','category':Category.Riding,'image':$r('app.media.ride'),'value':363},]exportfunctioninitializeOnStartup():Array{让SportsDataArray:Array=[]SportsComposition.forEach(item=>{SportsDataArray.push(newSportsData(item.name,item.category,item.image,item.value));})returnSportsDataArray;}二、List的使用component1,定义子组件的布局。为了预览方便，可以使用@Preview修饰，然后打开预览器，点击图标位置即可显示。为了方便调试，可以先把数据替换成静态数据。代码如下。@Preview@ComponentexportstructSportsGridItem{privatesportsItem:SportsData={'id':'8','name':'棒球','image':$r('app.media.baseball'),'value':188,'category':Category.Ball}私有控制器：CustomDialogControlleraboutToAppear(){this.controller=newCustomDialogController({builder:Record({sportsItem:this.sportsItem}),alignment:DialogAlignment.Center})}@BuildersportsDetail(value:number){Row({space:10}){Text(value.toString()).fontColor('#E14843').fontSize(16)Text('千卡/60分钟').fontColor(Color.Gray).fontSize(16)}}build(){Row({space:10}){Image(this.sportsItem.image).objectFit(ImageFit.Contain).height(60).aspectRatio(1).borderRadius(12).margin(5).backgroundColor(Color.White)Column({space:6}){Text(this.sportsItem.name).fontSize(19).fontWeight(500)this.sportsDetail(this.sportsItem.value)}.alignItems(Horizo??ntalAlign.Start)}.margin({left:10,top:20}).onClick(()=>{this.controller.open()})}}2.列表组件Scroll的渲染是一个可滚动的容器组件，传入运动类数组，使用ForEach遍历渲染，给子组件传递参数SportsGridItem@ComponentexportstructSportsGrid{privatesportsItems:SportsData[]build(){Scroll(){List({space:20}){ForEach(this.sportsItems,(item:SportsData)=>{ListItem(){SportsGridItem({sportsItem:item})}},(item:SportsData)=>item.id.toString())}.height('100%')}.scrollBar(BarState.Off)}}到这一步，所有的子项都列在一个列表中，但是想要的效果是按类别显示子项，继续往下看~三、Tabs组件的使用为了让标签更好看，从文档中可以看到TabContent的TabBar属性可以选择CustomBuilder的类型，进一步查看自定义组件属性rty方法，需要用@Builder修饰。看完文档我们来使用吧~，代码如下：@BuildertabBuilder(index:number,name:string){Flex({justifyContent:FlexAlign.Center,direction:FlexDirection.Column,alignItems:ItemAlign.Center}){Text(name).fontSize(20).fontColor(Color.White)}.borderRadius(15).width(90).height(30).backgroundColor(this.currentIndex===index?'#3ECF69':'#bfbfbf')}为了实现按类别列表显示，需要对数据类的Category进行检索和分类进行渲染。通过学习直播课程，知道有一个filter的方法，可以用来遍历每一个子item。于是总体代码如下：@ComponentstructSportsCategory{privatesportsItems:SportsData[]@StatecurrentIndex:number=0@BuildertabBuilder(index:number,name:string){Flex({justifyContent:FlexAlign.Center,direction:FlexDirection.Column,alignItems:ItemAlign.Center}){Text(name).fontSize(20).fontColor(Color.White)}.borderRadius(15).width(90).height(30).backgroundColor(this.currentIndex===索引?'#3ECF69':'#bfbfbf')}build(){Stack(){Tabs({barPosition:BarPosition.Start}){TabContent(){SportsGrid({sportsItems:this.sportsItems.filter(item=>(item.category===Category.Walking))})}.tabBar(this.tabBuilder(0,'行走'))TabContent(){SportsGrid({sportsItems:this.sportsItems.filter(item=>(item.category===Category.Running))})}.tabBar(this.tabBuilder(1,'跑步'))TabContent(){SportsGrid({sportsItems:this.sportsItems.filter(item=>(item.category===Category.Swimming))})}.tabBar(this.tabBuilder(2,'Swimming'))TabContent(){SportsGrid({sportsItems:this.sportsItems.filter(item=>(item.category===Category.Riding))})}.tabBar(this.tabBuilder(3,'Riding'))TabContent(){SportsGrid({sportsItems:this.sportsItems.filter(item=>(item.category===Category.Ball))})}.tabBar(this.tabBuilder(4,'PlayBall'))TabContent(){SportsGrid({sportsItems:this.sportsItems.filter(item=>(item.category===Category.Other))})}.tabBar(this.tabBuilder(5,'Other'))}.vertical(true).barHeight('70%').barWidth(100).onChange((index:number))=>{this.currentIndex=index})}}}最后，在底部的tab组件中添加用法，运动类和记录类的数据使用，搜索接口的实现等，下一篇会公布.欢迎评论区交流~结语以上就是本次的小分享啦！了解更多开源知识，请访问：开源基础软件社区https://ost.51cto.com
