组件 · PHP/Python/前端/Linux 等等学习笔记

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