了解更多开源请访问：开源基础软件社区https://ost.51cto.com前言我参加了《鸿蒙OS》后ArkUI入门训练营—健康生活实战》，了解并学习了声明式UI开发框架和组件使用。本文是作者收官之作的一个小分享。在笔者上一篇和之前的文章中，已经介绍了这个demo的一些组件，剩下的这篇文章会介绍和分享~Overview本文主要介绍搜索栏跳转到搜索结果界面，以及之前介绍的组件文章应用程序。效果图如下：正文1、项目文件结构2、完善主界面及数据传输1、数据传输实现运动记录的增删改查。由于运动记录的增删改查都是对应弹窗组件的点击事件，一开始我打算用@Link传数据，但是在自定义弹窗组件的builder中，报错对于$修饰的变量会报错，所以我改用了全局变量。要响应可变状态变化，请使用@State进行修饰。或许用数据库会更方便，待会再优化吧！varRDArray:Array=[]varRSports:Array=[]Record在弹出窗口中定义变量。@StateRecordDataArray:Array=RDArray@StateRecordSports:Array=RSports定义上篇文章中提到的弹窗组件中的点击事件。在“修改记录”模式下，“删除记录”按钮的“确定”响应码如下：secondaryButton:{value:'OK',action:()=>{RDArray.splice(this.item_index,1)RSports.splice(this.item_index,1)this.controller.close()}主弹窗右上角“确定”按钮响应代码如下：if(this.mode==0){RDArray.push({'name':this.sportsItem.name,'image':this.sportsItem.image,'time':this.time,'sum':this.sum})RSports.push(this.sportsItem)}elseif(this.mode==1){RDArray[this.item_index]={'name':this.sportsItem.name,'image':this.sportsItem.image,'time':this.time,'sum':this.sum}RSports。推（this.sportsItem）}2。改进主页。主页底部是一个带有两个选项卡的导航栏。第一个选项卡显示目录界面。界面顶部有一个搜索栏，与下面的目录垂直排列，第二个选项卡显示录制界面。录制界面的组件用法与上篇文章中提到的List组件相同，只是渲染的数据不同。代码大同小异，本文不再介绍。另外，对于录音界面，如果没有录音，会显示“Norecord”。为了让界面更加美观，作者在背景中添加了一张图片。当点击“Search”按钮时，会跳转到带有参数的搜索结果页面'pages/search_result'，代码如下：@Entry@ComponentstructSportsCategoryList{@StateRDArray:Array=RDArray@StateRSports:Array=RSports@StatecurrentIndex:number=0;@Statesearch_item:string='运动名称';privatesportsItem:SportsData[]=initializeOnStartup()@BuilderbottomBarBuilder(name:string,image_active:Resource,image_inactive:Resource,index:number){Column(){Image(this.currentIndex===index?image_active:image_inactive).width(32).aspectRatio(1).fillColor(this.currentIndex===index?'#3ECF69':'#bfbfbf')Text(name).fontColor(this.currentIndex===index?'#3ECF69':'#bfbfbf').fontSize(18).margin({bottom:3})}.alignItems(Horizo??ntalAlign.Center).width('100%')}build(){Tabs({barPosition:BarPosition.End}){TabContent(){Column(){Row(){Image($r('app.media.search')).width(26).height(26).objectFit(ImageFit.Cover).margin({left:10})TextInput({placeholder:'请输入运动名称'}).width('60%').height(30).backgroundColor(Color.White).onChange((value:string)=>{this.search_item=value})Blank()Button('搜索').backgroundColor('#3ECF69').borderRadius(30).fontSize(15)。fontColor(Color.White).height(30).width('20%').margin({left:8,right:3,top:3,bottom:3}).onClick(()=>{router.push({url:'pages/search_result',params:{sports:this.search_item}})})}//搜索.borderColor('#3ECF69').borderWidth(2).borderRadius(50).backgroundColor(Color.White).width('90%').height(40).margin({top:5,bottom:5,left:5,right:5})S??portsCategory({sportsItems:this.sportsItem,RecordSports:$RSports,RecordDataArray:$RDArray})}.backgroundImage($r('app.media.background')).backgroundImageSize({width:'100%',height:'100%'})}.tabBar(this.bottomBarBuilder('主页',$r('app.media.index'),$r('app.media.indexgray'),0))TabContent(){Column(){if(this.RDArray.length!=0){RecordGrid({RecordDataArray:$RDArray,RecordSports:$RSports})}else{Text('暂无运动记录').fontSize(19).width('100%').height(20).margin({top:12,left:20})}}.width('100%').height('100%').backgroundImage($r('app.media.background2'))。backgroundImageSize({width:'100%',height:'100%'})}.tabBar(this.bottomBarBuilder('Records',$r('app.media.statistics'),$r('app.media.statisticsgray'),1))}.onChange((index:number)=>{this.currentIndex=index;})}}三、搜索结果接口1、接收页面路由参数，初始化项目中的运动项目数据，方便遍历搜索importrouterfrom'@ohos.router';import{initializeOnStartup}from'../model/SportsDataModels'import{SportsData,RecordData}from'../model/SportsData'import{SportsGrid,RDArray,RSports}from'./SportsCategoryList'@Entry@ComponentstructSearch_result{@Statename:string=router.getParams()['sports']privatesportsItem:SportsData[]=initializeOnStartup()privateResultDataArray:Array=[]...}由于有些运动项目名称相同但步速不同，在设置字符串匹配判断时取一个子串要匹配的字符串。aboutToAppear(){让项目;对于（this.sportsItem的项目）{如果（item.name.length>=this.name.length）{如果（this.name==item.name.substring（0，this.name.length））{这。ResultDataArray.push(item);}}else{if(this.name==item.name){this.ResultDataArray.push(item);}}}}在SportsCategoryList导出修改中使用SportsGrid组件，可以在搜索结果界面使用，将搜索结果存储在数组中，然后将参数传入SportsGrid进行列表渲染。build(){Column(){PageTitle({title:'搜索结果'})Row(){Image($r('app.media.search')).width(26).height(26).objectFit(ImageFit.Cover).margin({left:10})TextInput({placeholder:'请输入运动名称'}).width('60%').height(30).backgroundColor(Color.White)Blank()Button('搜索').backgroundColor('#3ECF69').borderRadius(30).fontSize(15).fontColor(Color.White).height(30).width('20%').margin({left:8,右:3,上:3,下:3}).onClick(()=>{router.push({url:'pages/search_result',params:{sports:this.sportsItem}})})}//search.borderColor('#3ECF69').borderWidth(2).borderRadius(50).backgroundColor(Color.White).width('90%').height(40).margin(5)Scroll(){Column(){if(this.ResultDataArray.length!=0){SportsGrid({sportsItems:this.ResultDataArray})}else{Text('没有找到与此相关的结果').fontSize(19).width('100%').height(20).margin({top:12,left:20})}}.scrollBar(BarState.Off)}.height('100%').width('100%').backgroundImage($r('app.media.background')).backgroundImageSize({width:'100%',height:'100%'})}}@ComponentstructPageTitle{私有标题:stringbuild(){Flex({alignItems:ItemAlign.Start}){Image($r('app.media.Back')).width(21.8).height(19.6)Text(this.title).fontSize(21.8).margin({left:17.4})}.height(61).padding({top:15,bottom:10,left:28.3}).onClick(()=>{router.back()})}结语以上就是本次的小分享啦！文章相关附件可点击下方链接下载原文：https://ost.51cto.com/resource/2339了解更多开源知识，请访问：开源基础软件社区https://ost.51cto.com。
