HarmonyOS Next快速入门：样式装饰器：@Styles和@Extend
原创
HarmonyOS Next快速入门：样式装饰器：@Styles和@Extend
原创
中雨
发布于 2025-06-24 15:02:06
发布于 2025-06-24 15:02:06
##HarmonyOS Next快速入门##HarmonyOS应用开发##教育##
如果每个组件的样式都需要单独设置，在开发过程中会出现大量代码在进行重复样式设置，虽然可以复制粘贴，但为了代码简洁性和后续方便维护，推出了可以提炼公共样式进行复用的装饰器@Styles。
@Styles装饰器可以将多条样式设置提炼成一个方法，直接在组件声明的位置调用。通过@Styles装饰器可以快速定义并复用自定义样式。
@Styles装饰器：定义组件重用样式
@Styles装饰器可以将多条样式设置提炼成一个方法，直接在组件声明的位置调用。通过@Styles装饰器可以快速定义并复用自定义样式。
@Styles装饰器缺点：
- @Styles仅支持通用属性和通用事件。
- @Styles方法不支持参数
@Styles装饰器限制条件：
- @Styles方法不能有参数，编译期会报错，提醒开发者@Styles方法不支持参数。
- @Styles方法内不支持使用逻辑组件，在逻辑组件内的属性不生效。
@Extend用于扩展原生组件样式
@Extend(UIComponentName) function functionName { ... }- @Extend仅支持在全局定义，不支持在组件内部定义
- @Extend装饰的方法支持参数
@Extend使用规则
- @Extend支持封装指定组件的私有属性、私有事件和自身定义的全局方法。
- @Extend装饰的方法支持参数，开发者可以在调用时传递参数，调用遵循TS方法传值调用。
- @Extend装饰的方法的参数可以为function，作为Event事件的句柄。
- @Extend的参数可以为状态变量，当状态变量改变时，UI可以正常的被刷新渲染。
@Extend限制条件
@Extend仅支持在全局定义，不支持在组件内部定义。
代码实例
@Entry
@Component
struct StylesPage {
@State message: string = '@Styles And @Extend';
@Styles
reuseStyle(){
.backgroundColor(Color.Orange)
.width(200)
.margin(10)
// .fontSize(20)
}
build() {
Column() {
Text(this.message)
.fontSize(20)
.fontWeight(FontWeight.Bold)
Text('1').reuseStyle()
Text('2').reuseStyle()
Text('3').reuseStyle()
Text('a').textStyle(100)
Text('b').textStyle(150)
Text('c').textStyle(200)
}
.height('100%')
.width('100%')
}
}
@Extend(Text)
function textStyle(w:number){
.width(w)
.backgroundColor(Color.Green)
.margin(10)
.fontSize(20)
}@Styles和stateStyles联合使用
@Styles仅仅应用于静态页面的样式复用，stateStyles可以依据组件的内部状态的不同，快速设置不同样式。
代码实例
@Entry
@Component
struct MyComponent {
@Styles normalStyle() {
.backgroundColor(Color.Gray)
}
@Styles pressedStyle() {
.backgroundColor(Color.Red)
}
build() {
Column() {
Text('Text1')
.fontSize(50)
.fontColor(Color.White)
.stateStyles({
normal: this.normalStyle,
pressed: this.pressedStyle,
})
}
}
}stateStyles可以通过this绑定组件内的常规变量和状态变量
@Entry
@Component
struct CompWithInlineStateStyles {
@State focusedColor: Color = Color.Red;
normalColor: Color = Color.Green
build() {
Column() {
Button('clickMe').height(100).width(100)
.stateStyles({
normal: {
.backgroundColor(this.normalColor)
},
focused: {
.backgroundColor(this.focusedColor)
}
})
.onClick(() => {
this.focusedColor = Color.Pink
})
.margin('30%')
}
}
}原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
评论
登录后参与评论
推荐阅读
腾讯云开发者
