ArkUI提供了一種更輕量的UI元素進(jìn)制@Builder痊远，可用于自定義組件build()方法中哩簿，達(dá)到復(fù)用的效果后添。
裝飾器使用說明
自定義組件內(nèi)自定義構(gòu)建函數(shù)
定義：
@Builder MyBuilderFunction(){ ... }
使用
this.MyBuilderFunction()
- 允許在自定義組件內(nèi)定義一個(gè)或多個(gè)@Builder方法兽叮，該方法被認(rèn)為是該組件的私有累盗、特殊類型的成員函數(shù)。
- 自定義構(gòu)建函數(shù)可以在所屬組件的build方法和其他自定義構(gòu)建函數(shù)中調(diào)用蟆淀，但不允許在組件外調(diào)用。
- 在自定義函數(shù)體中澡匪，this指代當(dāng)前所屬組件熔任，組件的狀態(tài)變量可以在自定義構(gòu)建函數(shù)內(nèi)訪問。建議通過this訪問自定義組件的狀態(tài)變量而不是參數(shù)傳遞唁情。
全局自定義構(gòu)建函數(shù)
定義：
@Builder function MyGlobalBuilderFunction(){ ... }
使用：
MyGlobalBuilderFunction()
- 全局的自定義構(gòu)建函數(shù)可以被整個(gè)應(yīng)用獲取疑苔，不允許使用this和bind方法。
- 如果不涉及組件狀態(tài)變化甸鸟，建議使用全局的自定義構(gòu)建方法惦费。
參數(shù)傳遞規(guī)則
自定義構(gòu)建函數(shù)的參數(shù)傳遞有 按值傳遞 和 按引用傳遞 兩種，均需遵守以下規(guī)則：
- 參數(shù)的類型必須與參數(shù)聲明的類型一致抢韭，不允許undefined薪贫、null和返回undefined、null的表達(dá)式刻恭。
- 在自定義構(gòu)建函數(shù)內(nèi)部瞧省，不允許改變參數(shù)值。如果需要改變參數(shù)值鳍贾，且同步回調(diào)用點(diǎn)鞍匾，建議使用@Link。
- @Builder內(nèi)UI語法遵循UI語法規(guī)則骑科。
- 只有傳入一個(gè)參數(shù)橡淑，且參數(shù)需要直接傳入對(duì)象字面量才會(huì)按引用傳遞該參數(shù)，其余傳遞方式均為按值傳遞咆爽。
按引用傳遞參數(shù)
按引用傳遞參數(shù)時(shí)梁棠，傳遞的參數(shù)可為狀態(tài)變量，且狀態(tài)變量的改變會(huì)引起@Builder方法內(nèi)的UI刷新伍掀。ArkUI提供$$作為按引用傳遞參數(shù)的范式掰茶。
overBuilder( $$ : { paramA1: string, paramB1 : string } );
@Builder function overBuilder($$: { paramA1: string }) {
Row() {
Text(`UseStateVarByReference: ${$$.paramA1} `)
}
}
@Entry
@Component
struct Parent {
@State label: string = 'Hello';
build() {
Column() {
// 在Parent組件中調(diào)用ABuilder的時(shí)候，將this.label引用傳遞給ABuilder
overBuilder({ paramA1: this.label })
Button('Click me').onClick(() => {
// 點(diǎn)擊“Click me”后蜜笤，UI從“Hello”刷新為“ArkUI”
this.label = 'ArkUI';
})
}
}
}
按值傳遞參數(shù)
調(diào)用@Builder裝飾的函數(shù)默認(rèn)按值傳遞濒蒋。當(dāng)傳遞的參數(shù)為狀態(tài)變量時(shí)，狀態(tài)變量的改變不會(huì)引起@Builder方法內(nèi)的UI刷新。所以當(dāng)使用狀態(tài)變量的時(shí)候沪伙，推薦使用按引用傳遞瓮顽。
@Builder function overBuilder(paramA1: string) {
Row() {
Text(`UseStateVarByValue: ${paramA1} `)
}
}
@Entry
@Component
struct Parent {
@State label: string = 'Hello';
build() {
Column() {
overBuilder(this.label)
}
}
}
