《HarmonyOS应用开发基础》 课件 实操 项目2-任务7 渲染组件.pptx

任务7渲染组件项目2走进ArkTS声明式开发

任务7渲染组件本任务实现使用条件和循环渲染控制组件的显示。任务描述

任务效果图预览

任务实施

0102030504用条件渲染组件封装数据实体类处理数据源用循环渲染组件导入数据源06在生命周期函数中初始化数据

01用条件渲染组件

修改组件MyItem的代码，在分割线组件上使用条件渲染，使用字符串的匹配函数match()，判断传入的文字不是“关于我们”时，组件中的分割线才渲染。

02封装数据实体类数据需要封装在对应的实体类中。在ets目录下新建model目录，在model目录中新建DataModel.ets文件，用于封装对应的实体类；在ets目录下新建viewmodel目录，在viewmodel目录中新建MyDataViewModel.ets文件，用于模拟数据来源。在DataModel.ets文件中编写DataModel类，并用exportdefault导出类，类内提供构造方法用于封装对象。exportdefaultclassDataModel{imageSrc:Resource;//图片textVal:string;//文字//构造方法constructor(imageSrc:Resource,textVal:string){this.imageSrc=imageSrc;this.textVal=textVal;}}

03处理数据源在MyDataViewModel.ets中，导入DataModel类，编写函数initData()，并用exportdefault进行导出；将需要的数据用DataModel类的对象进行封装，再放到datas数组中；在函数的最后一行将datas数组返回。importDataModelfrom../model/DataModel;exportdefaultfunctioninitData():ArrayDataModel{letdatas:ArrayDataModel=[newDataModel($r(app.media.msg),消息中心),newDataModel($r(app.media.problem),意见反馈),newDataModel($r(app.media.help),帮助中心),newDataModel($r(app.media.hide),隐藏设备),newDataModel($r(app.media.account),账号切换),newDataModel($r(app.media.about),关于我们),]console.log(数据初始化完毕…)returndatas;}

04导入数据源在Index.ets的第一行，添加导入数据实体类DataModel和数据源MyDataViewModel中的初始数据的方法initData()。//导入数据实体类importDataModelfrom../model/DataModel;//导入数据源importinitDatafrom../viewmodel/MyDataViewModel;

05用循环渲染组件修改Index组件的代码，定义变量datas并使用数据源进行初始化，在Column组件中使用循环渲染组件，循环中的item就是数据源中的每一个DataModel对象，通过“item.变量名”进行引用对应的值。ForEach(this.datas,(item)={MyItem({image:item.imageSrc,text:item.textVal})})

06在生命周期函数中初始化数据-1修改Index的代码，在组件和页面的生命周期函数中分别进行验证数据的初始化。//datas:ArrayDataModel=initData()//初始化数据datas:ArrayDataModel;aboutToAppear(){this.datas=initData()//初始化数据}onPageShow(){//this.datas=initData()//初始化数据}

06在生命周期函数中初始化数据-2aboutToAppear()生命周期函数是在build()函数之前执行；opPageShow()函数是在build()函数之后执行。在实际开发时，opPageShow()函数可以用来在build()构建完页面后，再对数据进行变化，从而改变页面的指定的数据。

任务7渲染组件本任务