[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) } } } ```