任務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()