我要评论
openharmony定义组件重用样式：@styles装饰器
如果每个组件的样式都需要单独设置，在开发过程中会出现大量代码在进行重复样式设置，虽然可以复制粘贴，但为了代码简洁性和后续方便维护，我们推出了可以提炼公共样式进行复用的装饰器@styles。
@styles装饰器可以将多条样式设置提炼成一个方法，直接在组件声明的位置调用。通过@styles装饰器可以快速定义并复用自定义样式。用于快速定义并复用自定义样式。
说明：
从api version 9开始，该装饰器支持在arkts卡片中使用。
装饰器使用说明
● @styles方法不支持参数，反例如下。
// 反例： @styles不支持参数
@styles function globalfancy (value: number) {
.width(value)
}
● @styles可以定义在组件内或全局，在全局定义时需在方法名前面添加function关键字，组件内定义时则不需要添加function关键字。
// 全局
@styles function functionname() { ... }
// 在组件内
@component
struct fancyuse {
@styles fancy() {
.height(100)
}
}
● 定义在组件内的@styles可以通过this访问组件的常量和状态变量，并可以在@styles里通过事件来改变状态变量的值，示例如下：
@component
struct fancyuse {
@state heightvalue: number = 100
@styles fancy() {
.height(this.heightvalue)
.backgroundcolor(color.yellow)
.onclick(() => {
this.heightvalue = 200
})
}
}
● 组件内@styles的优先级高于全局@styles。 框架优先找当前组件内的@styles，如果找不到，则会全局查找。
使用场景
以下示例中演示了组件内@styles和全局@styles的用法。
// 定义在全局的@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)
}
}
}
发表评论