[TOC] ## 創建自定義組件 ``` @Component struct MyComponent { private countDownFrom: number = 0; private color: Color = Color.Blue; build() { } } @Entry @Component struct ParentComponent { private someColor: Color = Color.Pink; build() { Column() { // 創建MyComponent實例，并將創建MyComponent成員變量countDownFrom初始化為10，將成員變量color初始化為this.someColor MyComponent({ countDownFrom: 10, color: this.someColor }) } } } ``` ## 頁面和自定義組件生命周期 頁面生命周期，即被@Entry裝飾的組件生命周期，提供以下生命周期接口： - onPageShow：頁面每次顯示時觸發。 - onPageHide：頁面每次隱藏時觸發一次。 - onBackPress：當用戶點擊返回按鈕時觸發。 組件生命周期，即一般用@Component裝飾的自定義組件的生命周期，提供以下生命周期接口： - aboutToAppear：組件即將出現時回調該接口，具體時機為在創建自定義組件的新實例后，在執行其build()函數之前執行。 - aboutToDisappear：在自定義組件即將析構銷毀時執行。 <details> <summary>示例</summary> ``` // Index.ets import router from '@ohos.router'; @Entry @Component struct MyComponent { @State showChild: boolean = true; // 只有被@Entry裝飾的組件才可以調用頁面的生命周期 onPageShow() { console.info('Index onPageShow'); } // 只有被@Entry裝飾的組件才可以調用頁面的生命周期 onPageHide() { console.info('Index onPageHide'); } // 只有被@Entry裝飾的組件才可以調用頁面的生命周期 onBackPress() { console.info('Index onBackPress'); } // 組件生命周期 aboutToAppear() { console.info('MyComponent aboutToAppear'); } // 組件生命周期 aboutToDisappear() { console.info('MyComponent aboutToDisappear'); } build() { Column() { // this.showChild為true，創建Child子組件，執行Child aboutToAppear if (this.showChild) { Child() } // this.showChild為false，刪除Child子組件，執行Child aboutToDisappear Button('create or delete Child').onClick(() => { this.showChild = false; }) // push到Page2頁面，執行onPageHide Button('push to next page') .onClick(() => { router.pushUrl({ url: 'pages/Page2' }); }) } } } @Component struct Child { @State title: string = 'Hello World'; // 組件生命周期 aboutToDisappear() { console.info('[lifeCycle] Child aboutToDisappear') } // 組件生命周期 aboutToAppear() { console.info('[lifeCycle] Child aboutToAppear') } build() { Text(this.title).fontSize(50).onClick(() => { this.title = 'Hello ArkUI'; }) } } ``` </details> ## @Builder 裝飾器 ### 參數傳遞規則 自定義構建函數的參數傳遞有按值傳遞和按引用傳遞兩種 - 參數的類型必須與參數聲明的類型一致，不允許undefined、null和返回undefined、null的表達式。 - 在自定義構建函數內部，不允許改變參數值。如果需要改變參數值，且同步回調用點，建議使用@Link。 - 按應用傳遞,本質就是以對象參數傳入 **按引用傳遞參數** - 按引用傳遞參數時，傳遞的參數可為狀態變量，且狀態變量的改變會引起@Builder方法內的UI刷新。ArkUI提供`$$`作為按引用傳遞參數的范式。 語法 ``` ABuilder( $$ : { paramA1: string, paramB1 : string } ); ``` 示例 ``` @Builder function ABuilder($$: { paramA1: string }) { Row() { Text(`UseStateVarByReference: ${$$.paramA1} `) } } @Entry @Component struct Parent { @State label: string = 'Hello'; build() { Column() { // 在Parent組件中調用ABuilder的時候，將this.label引用傳遞給ABuilder ABuilder({ paramA1: this.label }) Button('Click me').onClick(() => { // 點擊“Click me”后，UI從“Hello”刷新為“ArkUI” this.label = 'ArkUI'; }) } } } ``` **按值傳遞參數** ``` @Builder function ABuilder(paramA1: string) { Row() { Text(`UseStateVarByValue: ${paramA1} `) } } @Entry @Component struct Parent { label: string = 'Hello'; build() { Column() { ABuilder(this.label) } } } ``` ## @BuilderParam裝飾器 todo ## @Styles裝飾器 本質就是css 中類下復用 示例 ``` // 定義在全局的@Styles封裝的樣式 @Styles function globalFancy () { .width(150) .height(100) .backgroundColor(Color.Pink) } @Entry @Component struct FancyUse { @State heightValue: number = 100 // 定義在組件內的@Styles封裝的樣式 @Styles fancy() { .width(200) .height(this.heightValue) .backgroundColor(Color.Yellow) .onClick(() => { this.heightValue = 200 }) } build() { Column({ space: 10 }) { // 使用全局的@Styles封裝的樣式 Text('FancyA') .globalFancy () .fontSize(30) // 使用組件內的@Styles封裝的樣式 Text('FancyB') .fancy() .fontSize(30) } } } ``` ## @Extend裝飾器 - 對某個組件進行擴展可預設屬性或綁定事件 示例 ``` // @Extend(Text)可以支持Text的私有屬性fontColor @Extend(Text) function fancy () { .fontColor(Color.Red) } // superFancyText可以調用預定義的fancy @Extend(Text) function superFancyText(size:number) { .fontSize(size) .fancy() } // 也可綁定事件 @Extend(Text) function makeMeClick(onClick: () => void) { .backgroundColor(Color.Blue) .onClick(onClick) } // 使用 @Entry @Component struct FancyUse { build() { Row({ space: 10 }) { Text('Fancy') .fancy(16) Text('Fancy') .fancy(24) } } } ```