5.4鴻蒙ArkUI開發(fā)進(jìn)階本章主要講述鴻蒙ArkUI開發(fā)進(jìn)階技術(shù)

。通過學(xué)習(xí)本節(jié)將能夠了解鴻蒙ArkUI開發(fā)進(jìn)階技術(shù)。通過本節(jié)學(xué)習(xí)可以熟悉：List列表組件Tabs分頁組件自定義樣式自定義組件List列表組件Tabs分頁組件自定義樣式自定義組件List列表組件List列表作為容器組件，通過子組件ListItem為每個數(shù)據(jù)項提供單獨(dú)的視圖。List結(jié)合ForEach接口，可從數(shù)組類型的數(shù)據(jù)中更加高效地構(gòu)建一個列表。List(){ListItem(){//數(shù)據(jù)項1Row(){Image($r('app.media.smoke')).width(50).height(50)Text('煙霧傳感器').fontSize(18)}.width('80%').margin(20)//設(shè)置外邊距.padding(10)//設(shè)置內(nèi)邊距.borderWidth(1).borderRadius(10)//邊框線條寬度為1，邊框圓角半徑為10}//數(shù)據(jù)項2//數(shù)據(jù)項3

List列表組件Tabs分頁組件自定義樣式自定義組件Tabs分頁組件Tabs作為容器組件，通過子組件TabContent為每個分頁提供單獨(dú)區(qū)域的UI視圖。Tabs(){TabContent(){//第一頁Column(){Image($r('app.media.smoke')).width(200).height(200)Text('煙霧傳感器').fontSize(20)}}.tabBar('煙霧')//分頁標(biāo)題//第二頁//第三頁List列表組件Tabs分頁組件自定義樣式自定義組件自定義樣式

將相同的屬性設(shè)置通過@Style修飾符封裝成一個樣式設(shè)置函數(shù)，然后在組件屬性描述時調(diào)用此樣式函數(shù)@StylesfunctionmyColumnStyle(){

.borderWidth(1).borderRadius(10)

.width('90%').height('90%')

.borderColor('#ffe9dede')

.backgroundColor('#ffdcf6db')

.padding(20)}

Tabs(){

TabContent(){//第一頁

Column(){...

}.myColumnStyle()//調(diào)用樣式函數(shù)

}.tabBar(this.myTabBuilder(0,"煙霧"))List列表組件Tabs分頁組件自定義樣式自定義組件自定義組件

ArkUI允許我們基于多個現(xiàn)有組件創(chuàng)建一個自定義組件，從而使新組件具備多個組件的UI視圖特性。@Component//此修飾符表示自定義組件structMySensorDevice{privateimgSrc:ResourceStr="";//描述mySensor組件時通過imgSrc指定資源圖像privatesName:string="";//描述mySensor組件時通過sName指定顯示文字build(){Column(){Image(this.imgSrc).width(200).height(200)Text(this.sName).fontSize(20)}.myColumnStyle()}}自定義組件

使用自定義組件：Tabs(){TabContent(){//第一頁MySensorDevice({imgSrc:$r('app.media.smoke'),sName:'煙霧傳感器'})}.tabBar(this.myTabBuilder(0,"煙霧"))TabContent(){//第二頁MySensorDevice({imgSrc:$r('app.media.temperature'),sName:'溫度傳感器'})}.tabBar(this.myTabBuilder(1,"溫度"))TabContent(){//第三頁MySensorDevice({imgSrc:$r('app.media.humidity'),sName:'濕度傳感器'})