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

任务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数组返回。importDataModel

from'../model/DataModel';exportdefaultfunctioninitData():Array<DataModel>{

letdatas:Array<DataModel>=[

newDataModel($r("app.media.msg"),'消息中心'),

newDataModel($r("blem"),'意见反馈'),

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()。//导入数据实体类importDataModel

from'../model/DataModel';//导入数据源import

initData

from'../viewmodel/MyDataViewModel';05用循环渲染组件修改Index组件的代码，定义变量datas并使用数据源进行初始化，在Column组件中使用循环渲染组件，循环中的item就是数据源中的每一个DataModel对象，通过“item.变量名”进行引用对应的值。

ForEach(this.datas,(item)=>{

MyItem({image:item.imageSrc,text:item.textVal})

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

this.datas=initData()//初始化数据}onPageShow(){

//this.datas=initData()//初始化数据}06在生命周期函数中初始化数据-2aboutToAppear()生命周期函数是在build()函数之前执行；opPageShow()函数是在build()函数之后执行。在实际开发时，opPageShow()