【HarmonyOS】鸿蒙开发中所使用的装饰器

1. 总结

关键字描述@Builder轻量级的UI元素复用机制@BuilderParam引用@Builder函数，类似于solt插槽wrapBuilder封装@Builder函数为对象，可以组件内举行通报@Styles定义组件的重用样式 ｜@Extend扩展组件的样式stateStyles多态样式，类似CSS伪类@AnimatableExtend定义可动画属性@Require校验组件构造传参 2. @Builder装饰器

之前了解过自定义组件，自定义组件内部的UI布局固定，仅与使用方举行数据通报，如果我们有一个简朴的样式需要复用，但弄成一个自定义组件就会比较重。以是ArkUI提供了一种更轻量的UI元素复用机制：@Builder。
@Builder所装饰的函数依照build()函数语法规则，可以将重复使用的UI元素抽象成一个方法，在build()方法里举行调用。
被@Builder装饰的函数称为：自定义构建函数。
   build()方法里只能调用 @Builder装饰的自定义构建函数。
  2.1 自定义组件内自定义构建函数

根本使用：

1. // 定义语法
2. @Builder MyBuilderFunction(){ ... }
4. // 使用方法
5. this.MyBuilderFunction()

复制代码

• 只能在组件内部使用该自定义构建函数；
  
• 自定义构建函数写法和build()相同，this指向当前组件，可以直接使用组件的状态变量，不需要通过状态通报；
  

2.2 全局自定义构建函数

根本使用：

1. // 定义语法
2. @Builder function MyGlobalBuilderFunction(){ ... }
4. // 使用方法
5. MyGlobalBuilderFunction()

复制代码

• 全局定义的构建函数可以被整个应用获取，不允许使用this和bind方法；
  
• 如果不涉及组件状态变革，建议使用全局的自定义构建方法；
  

2.3 参数通报规则

自定义构建函数的参数通报分为按值通报和按引用通报，服从以下规则：

• 参数的类型必须与参数声明的类型一致，不允许undefined null和返回 undefined null的表达式；
  
• 自定义构造函数内部，不允许改变参数值。如果要改变参数值，且同步回调用点，使用@Link；
  
• @Builder内UI语法依照UI语法规则；
  
• 只有传入一个参数，且参数需要直接传入对象字面量才会按引用通报该参数，其余方式均按值通报；
  

按引用通报参数： 按引用通报参数时，通报的参数可为状态变量，状态变量的改变会引起@Builder方法内的UI刷新:

1. class Tmp {
2.   paramA1: string = ''
3.   paramB1: string = ''
4. }
6. @Builder function overBuilder(params : Tmp) {...}

复制代码

示例：

1. class Tmp {
2.   paramA1: string = ''
3. }
5. @Builder function overBuilder(params: Tmp) {
6.   Row() {
7.     Text(`UseStateVarByReference: ${params.paramA1} `)
8.   }
9. }
10. @Entry
11. @Component
12. struct Parent {
13.   @State label: string = 'Hello';
14.   build() {
15.     Column() {
16.       // Pass the this.label reference to the overBuilder component when the overBuilder component is called in the Parent component.
17.       // 传递的是状态变量
18.       overBuilder({ paramA1: this.label })
19.       Button('Click me').onClick(() => {
20.         // After Click me is clicked, the UI text changes from Hello to ArkUI.
21.         this.label = 'ArkUI';
22.       })
23.     }
24.   }
25. }

复制代码

按引用通报参数时，如果在@Builder方法内调用自定义组件，ArkUI提供$$作为按引用通报参数的范式:

1. class Tmp {
2.   paramA1: string = ''
3.   paramB1: string = ''
4. }
6. @Builder function overBuilder($$ : Tmp) {...}

复制代码

示例：

1. class Tmp {
2.   paramA1: string = ''
3. }
5. @Builder function overBuilder($$: Tmp) {
6.   Row() {
7.     Column() {
8.       Text(`overBuilder===${$$.paramA1}`)
9.       // @Builder中又调用自定义组件，这里使用$$传递引用
10.       HelloComponent({message: $$.paramA1})
11.     }
12.   }
13. }
15. @Component
16. struct HelloComponent {
17.   @Link message: string; // 还会建立双向绑定
19.   build() {
20.     Row() {
21.       Text(`HelloComponent===${this.message}`)
22.       Button("change")
23.         .onClick(()=>{
24.           // 点击这里的时候会改变两个Text的文本
25.           this.message = "Change in the HelloComponent"
26.         })
27.     }
28.   }
29. }
31. @Entry
32. @Component
33. struct Index {
34.   @State label: string = 'Hello';
35.   build() {
36.     Column() {
37.       // Pass the this.label reference to the overBuilder component when the overBuilder component is called in the Parent component.
38.       overBuilder({paramA1: this.label})
39.       Button('Click me').onClick(() => {
40.         // After Click me is clicked, the UI text changes from Hello to ArkUI.
41.         this.label = 'ArkUI';
42.       })
43.     }
44.   }
45. }

复制代码

按值通报参数： 调用@Builder装饰的函数默认按值通报。当通报的参数为状态变量时，状态变量的改变不回引起@Builder方法内的UI刷新，以是如果使用状态变量时，保举使用引用通报：

1. @Builder function overBuilder(paramA1: string) {
2.   Row() {
3.     Text(`UseStateVarByValue: ${paramA1} `)
4.   }
5. }
6. @Entry
7. @Component
8. struct Parent {
9.   @State label: string = 'Hello';
10.   build() {
11.     Column() {
12.       overBuilder(this.label)
13.     }
14.   }
15. }

复制代码

2. @BuilderParam装饰器：引用@Builder函数

当开发者创建了自定义组件，并想对该组件添加特定功能时，例如在自定义组件中添加一个点击跳转操作，若直接在组件内嵌入变乱方法，将会导致全部引入该自定义组件的地方均增加了该功能。
为了办理这个问题，ArkUI引入了@BuilderParam装饰器，@BuilderParam用来装饰指向@Builder方法的变量，开发者可以在初始化自定义组件时对此属性赋值，为自定义组件增加特定的功能。该装饰器用于声明恣意UI描述的一个元素，类似slot占位符。
   上面是来自官方文档的先容，其实就是类似于Vue框架的插槽slot。比如我们封装一个列表CellItem组件时，右边大概是箭头、Switch开关、文字等等，对于右边这部分内容，就可以使用@BuilderParam，让父组件定义CellItem组件右边的显示内容，把这部分内容“传”进去。
  2.1 @BuilderParam的使用

@BuilderParam装饰的方法只能被自定义构建函数(@Builder装饰的方法)初始化，如果在API 11中和@Require结合使用，则必须父组件构造传参。
下面看一个简朴的使用示例：

1. @Component
2. struct Child {
3.   // 这个自定义构建函数只是为了本地初始化customBuilderParam
4.   @Builder customBuilder() {}
5.   
6.   // 会使用父组件@Builder装饰的方法初始化子组件的@BuilderParam，会覆盖这里的本地初始化
7.   @BuilderParam customBuilderParam: () => void = this.customBuilder;
9.   build() {
10.     Column() {
11.       // 展示父组件@Builder中的内容
12.       this.customBuilderParam()
13.     }
14.   }
15. }
17. @Entry
18. @Component
19. struct Parent {
20.   // 父组件中定义的自定义构建函数
21.   @Builder componentBuilder() {
22.     Text(`Parent builder `)
23.   }
25.   build() {
26.     Column() {
27.       // 将自定义构建函数传递给子组件
28.       Child({ customBuilderParam: this.componentBuilder })
29.     }
30.   }
31. }

复制代码

示例效果图：

2.2 @BuilderParam和自定义构建函数参数要统一

@BuilderParam装饰的方法可以是有参数和无参数的两种形式，需与指向的@Builder方法类型匹配。@BuilderParam装饰的方法类型需要和@Builder方法类型一致。

1. class Tmp{
2.   label:string = ''
3. }
5. // 全局的自定义构建函数
6. @Builder function overBuilder($$ : Tmp) {
7.   Text($$.label)
8.     .width(400)
9.     .height(50)
10.     .backgroundColor(Color.Green)
11. }
13. @Component
14. struct Child {
15.   label: string = 'Child'
16.   @Builder customBuilder() {}
17.   // 无参数类型，指向的componentBuilder也是无参数类型
18.   @BuilderParam customBuilderParam: () => void = this.customBuilder;
19.   
20.   // 有参数类型，指向的overBuilder也是有参数类型的方法
21.   @BuilderParam customOverBuilderParam: ($$ : Tmp) => void = overBuilder;
23.   build() {
24.     Column() {
25.       this.customBuilderParam()
26.       // 调用时传递了参数
27.       this.customOverBuilderParam({label: 'global Builder label' } )
28.     }
29.   }
30. }
32. @Entry
33. @Component
34. struct Parent {
35.   label: string = 'Parent'
37.   @Builder componentBuilder() {
38.     Text(`${this.label}`)
39.   }
41.   build() {
42.     Column() {
43.       this.componentBuilder()
44.       Child({ customBuilderParam: this.componentBuilder, customOverBuilderParam: overBuilder })
45.     }
46.   }
47. }

复制代码

示例效果图：

2.3 this指向问题

1. @Component
2. struct Child {
3.   label: string = `Child`
4.   @Builder customBuilder() {}
5.   @Builder customChangeThisBuilder() {}
6.   
7.   @BuilderParam customBuilderParam: () => void = this.customBuilder;
8.   @BuilderParam customChangeThisBuilderParam: () => void = this.customChangeThisBuilder;
10.   build() {
11.     Column() {
12.       this.customBuilderParam()
13.       this.customChangeThisBuilderParam()
14.     }
15.   }
16. }
18. @Entry
19. @Component
20. struct Parent {
21.   label: string = `Parent`
23.   @Builder componentBuilder() {
24.     // 需要注意这里的this指向
25.     Text(`${this.label}`)
26.   }
28.   build() {
29.     Column() {
30.       // 直接调用组件内的自定义构建函数，this指向Parent组件；
31.       this.componentBuilder()
32.       // customBuilderParam，this指向child组件；
33.       // customChangeThisBuilderParam：箭头函数的this指向的是宿主对象，这里也是Parent组件；
34.       Child({ customBuilderParam: this.componentBuilder, customChangeThisBuilderParam: ():void=>{this.componentBuilder()} })
35.     }
36.   }
37. }

复制代码

效果图：

2.4 尾随闭包

我们在使用Column Row等容器类组件时，会在 { } 中写子组件，这就是尾随闭包。可以将尾随闭包内的内容看做@Builder装饰的函数传给@BuilderParam：

1. @Component
2. struct CustomContainer {
3.   @Prop header: string = '';
4.   @Builder closerBuilder(){}
5.   
6.   // 使用父组件的尾随闭包{}(@Builder装饰的方法)初始化子组件@BuilderParam
7.   @BuilderParam closer: () => void = this.closerBuilder
9.   build() {
10.     Column() {
11.       Text(this.header)
12.         .fontSize(30)
13.       this.closer()
14.     }
15.   }
16. }
18. @Builder function specificParam(label1: string, label2: string) {
19.   Column() {
20.     Text(label1)
21.       .fontSize(30)
22.     Text(label2)
23.       .fontSize(30)
24.   }
25. }
27. @Entry
28. @Component
29. struct CustomContainerUser {
30.   @State text: string = 'header';
32.   build() {
33.     Column() {
34.       // 创建CustomContainer，在创建CustomContainer时，通过其后紧跟一个大括号“{}”形成尾随闭包
35.       // 作为传递给子组件CustomContainer @BuilderParam closer: () => void的参数
36.       CustomContainer({ header: this.text }) {
37.         Column() {
38.           specificParam('testA', 'testB')
39.         }.backgroundColor(Color.Yellow)
40.         .onClick(() => {
41.           this.text = 'changeHeader';
42.         })
43.       }
44.     }
45.   }
46. }

复制代码

效果图：

需要注意：

• 使用尾随闭包的自定义组件内部有且仅有一个使用@BuilderParam装饰的属性；
  
• 此场景下自定义组件不支持通用属性；
  

3. wrapBuilder: 封装全局@Builder

全局@Builder作为wrapBuilder的参数返回WrappedBuilder对象，实现全局@Builder可以举行赋值和通报。
   上面是官方的解释，简朴理解就是可以通过wrapBuilder函数将全局的@Builder函数封装成WrappedBuilder对象，通过这个对象的builder可以调用到全局@Builder函数，如许就可以将全局@Builder函数以包装对象的形式在组件间举行赋值和通报了。
  3.1 接口阐明

wrapBuilder是一个模板函数，返回一个WrappedBuilder对象。

1. // declare关键字主要用于声明变量、模块、函数或类的类型，不需要立即实现它们
2. declare function wrapBuilder< Args extends Object[]>(builder: (...args: Args) => void): WrappedBuilder;

复制代码

同时WrappedBuilder对象也是一个模板类：

1. // 模板参数Args extends Object[] 是需要包装的builder函数的参数列表
2. declare class WrappedBuilder< Args extends Object[]> {
3.   builder: (...args: Args) => void;
5.   constructor(builder: (...args: Args) => void);
6. }

复制代码

使用方法如下：

1. let builderVar: WrappedBuilder<[string, number]> = wrapBuilder(MyBuilder)
2. let builderArr: WrappedBuilder<[string, number]>[] = [wrapBuilder(MyBuilder)] //可以放入数组

复制代码

需要注意⚠️：

• wrapBuilder方法只能传入全局@Builder方法；
  
• wrapBuilder方法返回的WrappedBuilder对象的builder属性方法只能在struct（组件内部）内部使用；
  

3.2 使用场景1

将wrapBuilder赋值给globalBuilder，且把MyBuilder作为wrapBuilder参数，用来替换MyBuilder不能直接赋值给globalBuilder:

1. // 这是一个全局的@Builder修饰的函数（自定义构建函数），需要两个参数，类型为string number
2. @Builder
3. function MyBuilder(value: string, size: number) {
4.   Text(value)
5.     .fontSize(size)
6. }
8. // 这里的[string, number]对应上面自定义构建函数的参数类型，是一个数组哦
9. let globalBuilder: WrappedBuilder<[string, number]> = wrapBuilder(MyBuilder);
11. @Entry
12. @Component
13. struct Index {
14.   @State message: string = 'Hello World';
16.   build() {
17.     Row() {
18.       Column() {
19.         // 这里可以直接调用builder，其实就是调用最上面的那个全局的@Builder自定义构建函数
20.         globalBuilder.builder(this.message, 50)
21.       }
22.       .width('100%')
23.     }
24.     .height('100%')
25.   }
26. }

复制代码

3.3 使用场景2

自定义组件Index使用ForEach来举行差别@Builder函数的渲染，可以使用builderArr声明的wrapBuilder数组举行差别@Builder函数效果体现，团体代码会更加整洁：

1. // 全局的自定义构建函数
2. @Builder
3. function MyBuilder(value: string, size: number) {
4.   Text(value)
5.     .fontSize(size)
6. }
8. // 全局的自定义构建函数
9. @Builder
10. function YourBuilder(value: string, size: number) {
11.   Text(value)
12.     .fontSize(size)
13.     .fontColor(Color.Pink)
14. }
16. // 这里使用一个数组存储这些WrappedBuilder:builderArr，需要全局的自定义构建函数的参数类型是一致的，如果不一致，那就封装成对象吧！
17. const builderArr: WrappedBuilder<[string, number]>[] = [wrapBuilder(MyBuilder), wrapBuilder(YourBuilder)];
19. @Entry
20. @Component
21. struct Index {
23.   // 组件内的自定义构建函数
24.   @Builder testBuilder() {
25.     // 循环渲染，调用item.builder进行渲染，这里会调用到顶部的全局自定义函数
26.     ForEach(builderArr, (item: WrappedBuilder<[string, number]>) => {
27.       item.builder('Hello World', 30)
28.     }
29.     )
30.   }
32.   build() {
33.     Row() {
34.       Column() {
35.         this.testBuilder()
36.       }
37.       .width('100%')
38.     }
39.     .height('100%')
40.   }
41. }

复制代码

4. @Styles装饰器：定义组件重用样式

如果每个组件的样式都需要单独设置，在开发过程中会出现大量代码在举行重复样式设置，虽然可以复制粘贴，但是为了代码简便性和后续方便维护，鸿蒙提供了可以提炼公共样式举行复用的装饰器@Styles。
@Styles装饰器可以将多条样式设置提炼成一个方法，直接在组件声明的位置调用，通过@Styles装饰器可以快速定义并复用自定义样式。
   上面是官方的阐明，简朴的来说就是把多个组件通用的属性和方法封装成一个方法，在创建组件的时候可以直接使用，避免重复写样式代码；嗯。。。类似前端CSS中按class分类吧。
  4.1 装饰器使用阐明

• 当前@Styles仅支持通用属性和通用变乱；
  
• @Styles方法不支持参数；
  

1. // 错误❌： @Styles不支持参数
2. @Styles function globalFancy (value: number) {
3.   .width(value)
4. }

复制代码

• @Styles可以定义在组件内或全局，在全局定义时需要在方法名前面添加function关键字，组件内定义时则不需要添加function关键字；
  
• 只能在当前文件内使用，不支持export；
  

1. // 全局
2. @Styles function functionName() { ... }
4. // 在组件内
5. @Component
6. struct FancyUse {
8.   @Styles fancy() {
9.     .height(100)
10.   }
11. }

复制代码

• 定义在组件内的@Styles可以通过this访问组件的常量和状态变量，并可以在@Styles里通过变乱来改变状态变量的值，示例如下：
  

1. @Component
2. struct FancyUse {
4.   @State heightValue: number = 100
5.   
6.   @Styles fancy() {
7.     .height(this.heightValue)
8.     .backgroundColor(Color.Yellow)
9.     .onClick(() => {
10.       this.heightValue = 200
11.     })
12.   }
13. }

复制代码

• 组件内@Styles的优先级高于全局的@Styles，框架会优先查找当前组件内的@Styles，如果找不到，就会全局查找；
  

4.2 使用场景

1. // 定义在全局的@Styles封装的样式
2. @Styles function globalFancy  () {
3.   .width(150)
4.   .height(100)
5.   .backgroundColor(Color.Pink)
6. }
8. @Entry
9. @Component
10. struct FancyUse {
12.   @State heightValue: number = 100
13.   
14.   // 定义在组件内的@Styles封装的样式
15.   @Styles fancy() {
16.     .width(200)
17.     .height(this.heightValue)
18.     .backgroundColor(Color.Yellow)
19.     .onClick(() => {
20.       this.heightValue = 200
21.     })
22.   }
24.   build() {
25.     Column({ space: 10 }) {
26.       // 使用全局的@Styles封装的样式
27.       Text('FancyA')
28.         .globalFancy()
29.         .fontSize(30)
30.       // 使用组件内的@Styles封装的样式
31.       Text('FancyB')
32.         .fancy()
33.         .fontSize(30)
34.     }
35.   }
36. }

复制代码

5. @Extend装饰器：定义扩展组件样式

上面的@Styles用于样式的扩展，在@Styles的底子上，鸿蒙又提供了@Extend，用于扩展原生组件样式。相比于@Styles提供了更多的扩展的能力。
5.1 使用阐明

语法：

1. @Extend(UIComponentName) function functionName { ... }

复制代码

使用规则：

• 和@Styles差别，@Extend仅支持在全局定义。并且也只能在当前文件中使用；
  
• 和@Styles差别，@Extend支持封装指定的组件的私有属性和私有变乱，以及预定义相同组件的@Extend的方法；
  

1. // @Extend(Text)可以支持Text的私有属性fontColor
2. @Extend(Text) function fancy () {
3.   .fontColor(Color.Red)
4. }
6. // superFancyText可以调用预定义的fancy
7. @Extend(Text) function superFancyText(size:number) {
8.     .fontSize(size)
9.     .fancy()
10. }

复制代码

• 和@Styles差别，@Extend装饰的方法支持参数，开发者可以在调用时通报参数，调用依照TS方法传值和调用；
  

1. // xxx.ets
2. @Extend(Text) function fancy (fontSize: number) {
3.   .fontColor(Color.Red)
4.   .fontSize(fontSize)
5. }
7. @Entry
8. @Component
9. struct FancyUse {
10.   build() {
11.     Row({ space: 10 }) {
12.       Text('Fancy')
13.         .fancy(16)
14.       Text('Fancy')
15.         .fancy(24)
16.     }
17.   }
18. }

复制代码

• @Extend装饰的方法的参数可以为function，作为Event变乱的句柄：
  

1. @Extend(Text) function makeMeClick(onClick: () => void) {
2.   .backgroundColor(Color.Blue)
3.   .onClick(onClick)
4. }
6. @Entry
7. @Component
8. struct FancyUse {
9.   @State label: string = 'Hello World';
11.   onClickHandler() {
12.     this.label = 'Hello ArkUI';
13.   }
15.   build() {
16.     Row({ space: 10 }) {
17.       Text(`${this.label}`)
18.         .makeMeClick(() => {this.onClickHandler()})
19.     }
20.   }
21. }

复制代码

• @Extend的参数可以为状态变量，当状态变量改变时，UI可以正常的被刷新渲染
  

1. @Extend(Text) function fancy (fontSize: number) {
2.   .fontColor(Color.Red)
3.   .fontSize(fontSize)
4. }
6. @Entry
7. @Component
8. struct FancyUse {
9.   
10.   @State fontSizeValue: number = 20
11.   
12.   build() {
13.     Row({ space: 10 }) {
14.       Text('Fancy')
15.         .fancy(this.fontSizeValue)
16.         .onClick(() => {
17.           this.fontSizeValue = 30
18.         })
19.     }
20.   }
21. }

复制代码

5.2 使用场景

以下示例声明了3个Text组件，每个Text组件均设置了fontStyle、fontWeight和backgroundColor样式：

1. @Entry
2. @Component
3. struct FancyUse {
4.   @State label: string = 'Hello World'
6.   build() {
7.     Row({ space: 10 }) {
8.       Text(`${this.label}`)
9.         .fontStyle(FontStyle.Italic)
10.         .fontWeight(100)
11.         .backgroundColor(Color.Blue)
12.       Text(`${this.label}`)
13.         .fontStyle(FontStyle.Italic)
14.         .fontWeight(200)
15.         .backgroundColor(Color.Pink)
16.       Text(`${this.label}`)
17.         .fontStyle(FontStyle.Italic)
18.         .fontWeight(300)
19.         .backgroundColor(Color.Orange)
20.     }.margin('20%')
21.   }
22. }

复制代码

可以使用@Extend将样式组合复用，示例如下：

1. // 组合
2. @Extend(Text) function fancyText(weightValue: number, color: Color) {
3.   .fontStyle(FontStyle.Italic)
4.   .fontWeight(weightValue)
5.   .backgroundColor(color)
6. }
8. @Entry
9. @Component
10. struct FancyUse {
11.   @State label: string = 'Hello World'
13.   build() {
14.     Row({ space: 10 }) {
15.       Text(`${this.label}`)
16.         .fancyText(100, Color.Blue)
17.       Text(`${this.label}`)
18.         .fancyText(200, Color.Pink)
19.       Text(`${this.label}`)
20.         .fancyText(300, Color.Orange)
21.     }.margin('20%')
22.   }
23. }

复制代码

6. stateStyles：多态样式

@Styles和@Extend仅仅应用于静态页面的样式复用，stateStyles可以依据组件的内部状态的差别，快速设置差别的样式，可以称为多态样式。
   就是类似CSS的伪类，针对于按钮点击、按压、获取焦点等，分别设置差别的样式；
  6.1 概述

stateStyles是属性方法，可以根据UI内部状态来设置样式，类似css伪类，但是语法差别。ArkUI提供以下5种状态：

• focused
  
• normal
  
• pressed
  
• disabled
  
• selected
  

6.2 底子使用场景

下面的示例展示了stateStyles最根本的使用场景。Button1处于第一个组件，Button2处于第二个组件。按压时显示为pressed态指定的玄色。使用Tab键走焦，先是Button1获焦并显示为focus态指定的粉色。当Button2获焦的时候，Button2显示为focus态指定的粉色，Button1失焦显示normal态指定的红色。

1. @Entry
2. @Component
3. struct StateStylesSample {
4.   build() {
5.     Column() {
6.       Button('Button1')
7.         .stateStyles({
8.           focused: {
9.             .backgroundColor(Color.Pink)
10.           },
11.           pressed: {
12.             .backgroundColor(Color.Black)
13.           },
14.           normal: {
15.             .backgroundColor(Color.Red)
16.           }
17.         })
18.         .margin(20)
19.       Button('Button2')
20.         .stateStyles({
21.           focused: {
22.             .backgroundColor(Color.Pink)
23.           },
24.           pressed: {
25.             .backgroundColor(Color.Black)
26.           },
27.           normal: {
28.             .backgroundColor(Color.Red)
29.           }
30.         })
31.     }.margin('30%')
32.   }
33. }

复制代码

6.3 @Styles和stateStyles联合使用

以下示例通过@Styles指定stateStyles的差别状态:

1. @Entry
2. @Component
3. struct MyComponent {
4.   @Styles normalStyle() {
5.     .backgroundColor(Color.Gray)
6.   }
8.   @Styles pressedStyle() {
9.     .backgroundColor(Color.Red)
10.   }
12.   build() {
13.     Column() {
14.       Text('Text1')
15.         .fontSize(50)
16.         .fontColor(Color.White)
17.         .stateStyles({
18.           normal: this.normalStyle,
19.           pressed: this.pressedStyle,
20.         })
21.     }
22.   }
23. }

复制代码

7. @AnimatableExtend装饰器：定义可动画属性

@AnimatableExtend装饰器用于自定义可动画的属性方法，在这个属性方法中修改组件不可动画的属性。在动画执行过程时，通过逐帧回调函数修改不可动画属性值，让不可动画属性也能实现动画效果。

• 可动画属性：如果一个属性在animation属性前调用，改变这个属性的值可以见效animation属性的动画效果，这个属性称为可动画属性，比如height、width、backgroundColor、translate属性，Text组件的fontSize属性等；
  
• 不可动画属性：如果一个属性方法在animation属性前调用，改变这个属性的值不能见效animation属性的动画效果，这个属性称为不可动画属性，比如Polyline组件的points属性等；
  

7.1 使用阐明

1. // 1. @AnimatableExtend仅支持在全局定义；
2. // 2. 函数参数类型必须为number类型或者实现AnimtableArithmetic<T>接口的自定义类型；
3. // 3. 函数体内只能调用@AnimatableExtend括号组件的属性方法；
4. @AnimatableExtend(UIComponentName) function functionName(value: typeName) {
5.   .propertyName(value)
6. }

复制代码

7.2 使用场景

实现字体大小的动画效果：

1. @AnimatableExtend(Text) function animatableFontSize(size: number) {
2.   .fontSize(size)
3. }
5. @Entry
6. @Component
7. struct AnimatablePropertyExample {
8.   @State fontSize: number = 20
9.   build() {
10.     Column() {
11.       Text("AnimatableProperty")
12.         .animatableFontSize(this.fontSize)
13.         .animation({duration: 1000, curve: "ease"})
14.       Button("Play")
15.         .onClick(() => {
16.           this.fontSize = this.fontSize == 20 ? 36 : 20
17.         })
18.     }.width("100%")
19.     .padding(10)
20.   }
21. }

复制代码

8. @Require装饰器：校验构造传参

@Require装饰器不能单独使用，和@Prop和@BuilderParam配合使用。在构造自定义组件时，用@Require修饰的@Prop和@BuilderParam变量，必须在构造时传参。
   @Require装饰器仅用于装饰struct内的@Prop和@BuilderParam成员状态变量。
  8.1 使用场景

当Child组件内使用@Require装饰器和@Prop或者@BuilderParam结合使用时，父组件Index在构造Child时必须传参，否则编译不通过。

1. @Entry
2. @Component
3. struct Index {
4.   @State message: string = 'Hello World';
6.   @Builder buildTest() {
7.     Row() {
8.       Text('Hello, world')
9.         .fontSize(30)
10.     }
11.   }
13.   build() {
14.     Row() {
15.       Child({ initMessage: this.message, message: this.message,
16.         buildTest: this.buildTest, initbuildTest: this.buildTest })
17.     }
18.   }
19. }
21. @Component
22. struct Child {
23.   @Builder buildFuction() {
24.     Column() {
25.       Text('initBuilderParam')
26.         .fontSize(30)
27.     }
28.   }
30.   // 使用@Require标识父组件在构造Child组件时，必须使用构造传参；
31.   @Require @BuilderParam buildTest: () => void;
32.   @Require @BuilderParam initbuildTest: () => void = this.buildFuction;
33.   @Require @Prop initMessage: string = 'Hello';
34.   @Require @Prop message: string;
36.   build() {
37.     Column() {
38.       Text(this.initMessage)
39.         .fontSize(30)
40.       Text(this.message)
41.         .fontSize(30)
42.       this.initbuildTest();
43.       this.buildTest();
44.     }
45.     .width('100%')
46.     .height('100%')
47.   }
48. }

复制代码

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。