《HarmonyOS應(yīng)用開發(fā)基礎(chǔ)》 課件 實(shí)操 項(xiàng)目2-任務(wù)7 渲染組件

任務(wù)7渲染組件項(xiàng)目2走進(jìn)ArkTS聲明式開發(fā)任務(wù)7渲染組件本任務(wù)實(shí)現(xiàn)使用條件和循環(huán)渲染控制組件的顯示。任務(wù)描述任務(wù)效果圖預(yù)覽任務(wù)實(shí)施0102030504用條件渲染組件封裝數(shù)據(jù)實(shí)體類處理數(shù)據(jù)源用循環(huán)渲染組件導(dǎo)入數(shù)據(jù)源06在生命周期函數(shù)中初始化數(shù)據(jù)01用條件渲染組件

修改組件MyItem的代碼，在分割線組件上使用條件渲染，使用字符串的匹配函數(shù)match()，判斷傳入的文字不是“關(guān)于我們”時(shí)，組件中的分割線才渲染。02封裝數(shù)據(jù)實(shí)體類

數(shù)據(jù)需要封裝在對(duì)應(yīng)的實(shí)體類中。在ets目錄下新建model目錄，在model目錄中新建DataModel.ets文件，用于封裝對(duì)應(yīng)的實(shí)體類；在ets目錄下新建viewmodel目錄，在viewmodel目錄中新建MyDataViewModel.ets文件，用于模擬數(shù)據(jù)來(lái)源。在DataModel.ets文件中編寫DataModel類，并用exportdefault導(dǎo)出類，類內(nèi)提供構(gòu)造方法用于封裝對(duì)象。exportdefaultclassDataModel{

imageSrc:Resource;//圖片

textVal:string;//文字//構(gòu)造方法

constructor(imageSrc:Resource,textVal:string)

{

this.imageSrc=imageSrc;

this.textVal=textVal;

}}03處理數(shù)據(jù)源在MyDataViewModel.ets中，導(dǎo)入DataModel類，編寫函數(shù)initData()，并用exportdefault進(jìn)行導(dǎo)出；將需要的數(shù)據(jù)用DataModel類的對(duì)象進(jìn)行封裝，再放到datas數(shù)組中；在函數(shù)的最后一行將datas數(shù)組返回。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"),'隱藏設(shè)備'),

newDataModel($r("app.media.account"),'賬號(hào)切換'),

newDataModel($r("app.media.about"),'關(guān)于我們'),

]console.log("數(shù)據(jù)初始化完畢…")

returndatas;}04導(dǎo)入數(shù)據(jù)源在Index.ets的第一行，添加導(dǎo)入數(shù)據(jù)實(shí)體類DataModel和數(shù)據(jù)源MyDataViewModel中的初始數(shù)據(jù)的方法initData()。//導(dǎo)入數(shù)據(jù)實(shí)體類importDataModel

from'../model/DataModel';//導(dǎo)入數(shù)據(jù)源import

initData

from'../viewmodel/MyDataViewModel';05用循環(huán)渲染組件修改Index組件的代碼，定義變量datas并使用數(shù)據(jù)源進(jìn)行初始化，在Column組件中使用循環(huán)渲染組件，循環(huán)中的item就是數(shù)據(jù)源中的每一個(gè)DataModel對(duì)象，通過(guò)“item.變量名”進(jìn)行引用對(duì)應(yīng)的值。

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

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

})06在生命周期函數(shù)中初始化數(shù)據(jù)-1修改Index的代碼，在組件和頁(yè)面的生命周期函數(shù)中分別進(jìn)行驗(yàn)證數(shù)據(jù)的初始化。//datas:Array<DataModel>=initData()//初始化數(shù)據(jù)datas:Array<DataModel>;aboutToAppear(){

this.datas=initData()//初始化數(shù)據(jù)}onPageShow(){

//this.datas=initData()//初始化數(shù)據(jù)}06在生命周期函數(shù)中初始化數(shù)據(jù)-2aboutToAppear()生命周期函數(shù)是在build()函數(shù)之前執(zhí)行；opPageShow()函數(shù)是在build()函數(shù)之后執(zhí)行。在實(shí)際開發(fā)時(shí)，opPageShow()