【HarmonyOS】HarmonyOS NEXT學(xué)習(xí)日記：六、渲染控制、樣式&結(jié)構(gòu)重用

渲染控制包含了條件渲染和循環(huán)渲染，所謂條件渲染，即更具狀態(tài)不同，選擇性的渲染不同的組件。
而循環(huán)渲染則是用于列表之內(nèi)的、多個重復(fù)元素組成的結(jié)構(gòu)中。

在聲明式描述語句中開發(fā)者除了使用系統(tǒng)組件外，還可以使用渲染控制語句來輔助UI的構(gòu)建，這些渲染控制語句包括控制組件是否顯示的條件渲染語句，基于數(shù)組數(shù)據(jù)快速生成組件的循環(huán)渲染語句，針對大數(shù)據(jù)量場景的數(shù)據(jù)懶加載語句，針對混合模式開發(fā)的組件渲染語句。

渲染控制

條件渲染（if/else）

ArkTS提供了渲染控制的能力。條件渲染可根據(jù)應(yīng)用的不同狀態(tài)，使用if、else和else if渲染對應(yīng)狀態(tài)下的UI內(nèi)容。

@Entry
@Component
struct Index {@State counter: number = 0;build() {Column({space: 10}){Text(`counter=${this.counter}`)Row(){if(this.counter===0){Text(`counter===0,不展示歸零按鈕`);}else{Button('歸零').onClick(()=>{this.counter=0})}}Row(){Button('counter++').onClick(()=>{this.counter++})}}}
}

上文我們實現(xiàn)了一個例子、初始化counter為0，提供一個counter++的按鈕，點擊時counter+1。
當(dāng)counter=0時，顯示文字：counter=0,不展示歸零按鈕

否則，展示一個歸零按鈕

點擊歸零按鈕后，counter賦值0，頁面回歸初始狀態(tài)

通過這個例子，就簡單掌握了條件渲染的用法。

循環(huán)渲染

ForEach接口基于數(shù)組類型數(shù)據(jù)來進行循環(huán)渲染，需要與容器組件配合使用，且接口返回的組件應(yīng)當(dāng)是允許包含在ForEach父容器組件中的子組件。例如，ListItem組件要求ForEach的父容器組件必須為List組件。

用法：

// Index.ets
import text from '@ohos.graphics.text';interface newItem{title: string,subTitle: string,time: string
}@Entry
@Component
struct Index {@State news: newItem[] = [{title: '新聞標(biāo)題1',subTitle: '這是一個副標(biāo)題1',time: '2024/7/22'},{title: '新聞標(biāo)題2',subTitle: '這是一個副標(biāo)題2',time: '2024/7/22'},{title: '新聞標(biāo)題3',subTitle: '這是一個副標(biāo)題3',time: '2024/7/22'}];build() {Scroll(){Column({space:1}){ForEach(this.news,(item:newItem)=>{Column(){Row(){Text(item.title).fontSize(22)}.width('100%')Row(){Text(item.subTitle).fontColor('#aaa')}.width('100%')Row(){Text(item.time).fontColor('#aaa')}.width('100%').justifyContent(FlexAlign.End)}.padding(10).border({width: {bottom: 1},color: '#ccc',style: BorderStyle.Dashed,}).backgroundColor('rgba(25, 159, 126, 0.1)')},(item:newItem,index:number)=>index+'')}.width('100%').backgroundColor('#eee')}}
}

樣式&結(jié)構(gòu)重用

@Extend：擴展組件（樣式、事件）

繼承一個組件并且為其添加擴展方法，通過自定義擴展方法就可以添加可復(fù)用的樣式和事件。

// Index.ets
import text from '@ohos.graphics.text';
@Extend(Text)
function textExtend(backgroundColor: ResourceColor,text: string){.textAlign(TextAlign.Center).backgroundColor(backgroundColor).fontColor(Color.Red).fontSize(22).width('100%').onClick(() => {AlertDialog.show({message: text})})
}
@Entry
@Component
struct Index {build() {Column(){Text('1111').textExtend(Color.Blue,'1111')Text('2222').textExtend(Color.Green,'2222')}}
}

可以看到我們布局時的代碼簡練了很多
![在這里插入圖片描述](https://i-blog.csdnimg.cn/direct/56c54cc368704ec7b19409557a6320da.png

！！！會影響整個頁面的該組件，需要注意！！！

@Styles: 抽取通用屬性、事件

// Index.ets
//'CommonAttribute' 類型
@Styles function textStyle() {.backgroundColor('#eee').width('100%').onClick(() => {AlertDialog.show({message: '點擊觸發(fā)'})})
}
@Entry
@Component
struct Index {build() {Column(){Text('1111').textStyle().textAlign(TextAlign.Center)Text('2222').textStyle().textAlign(TextAlign.Center)}}
}

特點：

• 只能設(shè)置CommonAttribute類型的屬性，也就是通用屬性
  像是，TextFont這種只能給Text組件設(shè)置的屬性無法通過這種方式提取。
• 無法接收參數(shù)
• 有組件作用域和全局作用域

@Builder：自定義構(gòu)建函數(shù)（結(jié)構(gòu)、樣式、事件）

通過@Builder我們可以自定義構(gòu)建函數(shù)，將需要復(fù)用的結(jié)構(gòu)、樣式、事件通通封裝起來。

// Index.ets
import text from '@ohos.graphics.text'@Builder function TextItem(text: string){Text(text).fontSize(18).fontColor(Color.Red).backgroundColor('#ccc').lineHeight(30).width('100%').textAlign(TextAlign.Center).onClick(()=>{AlertDialog.show({message: text})})
}
@Entry
@Component
struct Index {build() {Column(){TextItem('111')TextItem('222')TextItem('333')}}
}

點擊后可以觸發(fā)事件