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

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

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

數(shù)據(jù)需要封裝在對應(yīng)的實體類中。在ets目錄下新建model目錄，在model目錄中新建DataModel.ets文件，用于封裝對應(yīng)的實體類；在ets目錄下新建viewmodel目錄，在viewmodel目錄中新建MyDataViewModel.ets文件，用于模擬數(shù)據(jù)來源。在DataModel.ets文件中編寫DataModel類，并用exportdefault導(dǎo)出類，類內(nèi)提供構(gòu)造方法用于封裝對象。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進行導(dǎo)出；將需要的數(shù)據(jù)用DataModel類的對象進行封裝，再放到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"),'賬號切換'),

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

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

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

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

initData

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

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

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

})06在生命周期函數(shù)中初始化數(shù)據(jù)-1修改Index的代碼，在組件和頁面的生命周期函數(shù)中分別進行驗證數(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í)行。在實際開發(fā)時，opPageShow()