在前文的示例中,可以使用@Styles用于样式的扩展,在@Styles的基础上,我们提供了@Extend,用于扩展原生组件样式。
说明: 从API version 9开始,该装饰器支持在ArkTS卡片中使用。
装饰器使用说明
语法
1 | @Extend(UIComponentName) function functionName { ... } |
使用规则
● 和@Styles不同,@Extend仅支持定义在全局,不支持在组件内部定义。
● 和@Styles不同,@Extend支持封装指定的组件的私有属性和私有事件,以及预定义相同组件的@Extend的方法。
1 2 3 4 5 6 7 8 9 | // @Extend(Text)可以支持Text的私有属性fontColor @Extend(Text) function fancy () { .fontColor(Color.Red) } // superFancyText可以调用预定义的fancy @Extend(Text) function superFancyText(size:number) { .fontSize(size) .fancy() } |
● 和@Styles不同,@Extend装饰的方法支持参数,开发者可以在调用时传递参数,调用遵循TS方法传值调用。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | // xxx.ets @Extend(Text) function fancy (fontSize: number) { .fontColor(Color.Red) .fontSize(fontSize) } @Entry @Component struct FancyUse { build() { Row({ space: 10 }) { Text( 'Fancy' ) .fancy(16) Text( 'Fancy' ) .fancy(24) } } } |
● @Extend装饰的方法的参数可以为function,作为Event事件的句柄。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | @Extend(Text) function makeMeClick(onClick: () => void ) { .backgroundColor(Color.Blue) .onClick(onClick) } @Entry @Component struct FancyUse { @State label: string = 'Hello World' ; onClickHandler() { this .label = 'Hello ArkUI' ; } build() { Row({ space: 10 }) { Text(`${ this .label}`) .makeMeClick( this .onClickHandler) } } } |
● @Extend的参数可以为状态变量,当状态变量改变时,UI可以正常的被刷新渲染。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | @Extend(Text) function fancy (fontSize: number) { .fontColor(Color.Red) .fontSize(fontSize) } @Entry @Component struct FancyUse { @State fontSizeValue: number = 20 build() { Row({ space: 10 }) { Text( 'Fancy' ) .fancy( this .fontSizeValue) .onClick(() => { this .fontSizeValue = 30 }) } } } |
使用场景
以下示例声明了3个Text组件,每个Text组件均设置了fontStyle、fontWeight和backgroundColor样式。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | @Entry @Component struct FancyUse { @State label: string = 'Hello World' build() { Row({ space: 10 }) { Text(`${ this .label}`) .fontStyle(FontStyle.Italic) .fontWeight(100) .backgroundColor(Color.Blue) Text(`${ this .label}`) .fontStyle(FontStyle.Italic) .fontWeight(200) .backgroundColor(Color.Pink) Text(`${ this .label}`) .fontStyle(FontStyle.Italic) .fontWeight(300) .backgroundColor(Color.Orange) }.margin( '20%' ) } } |
@Extend将样式组合复用,示例如下。
1 2 3 4 5 | @Extend(Text) function fancyText(weightValue: number, color: Color) { .fontStyle(FontStyle.Italic) .fontWeight(weightValue) .backgroundColor(color) } |
通过@Extend组合样式后,使得代码更加简洁,增强可读性。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | @Entry @Component struct FancyUse { @State label: string = 'Hello World' build() { Row({ space: 10 }) { Text(`${ this .label}`) .fancyText(100, Color.Blue) Text(`${ this .label}`) .fancyText(200, Color.Pink) Text(`${ this .label}`) .fancyText(300, Color.Orange) }.margin( '20%' ) } } |
· [翻译] 为什么 Tracebit 用 C# 开发
· 腾讯ima接入deepseek-r1,借用别人脑子用用成真了~
· Deepseek官网太卡,教你白嫖阿里云的Deepseek-R1满血版
· DeepSeek崛起:程序员“饭碗”被抢,还是职业进化新起点?
· RFID实践——.NET IoT程序读取高频RFID卡/标签