荆州哪里做网站,旅游网站平台,网站seo平台,江宁区住房与城乡建设局网站前言
在前面我们介绍过Builder装饰器和BuilderParam装饰器。今天我们继续介绍另外一个装饰器——Styles装饰器#xff1a;定义组件重用样式。
如果每个组件的样式都需要单独设置#xff0c;在开发过程中会出现大量代码在进行重复样式设置#xff0c;虽然可以复制粘贴…前言
在前面我们介绍过Builder装饰器和BuilderParam装饰器。今天我们继续介绍另外一个装饰器——Styles装饰器定义组件重用样式。
如果每个组件的样式都需要单独设置在开发过程中会出现大量代码在进行重复样式设置虽然可以复制粘贴但为了代码简洁性和后续方便维护我们推出了可以提炼公共样式进行复用的装饰器Styles。
Styles装饰器可以将多条样式设置提炼成一个方法直接在组件声明的位置调用。通过Styles装饰器可以快速定义并复用自定义样式。用于快速定义并复用自定义样式。 注意⚠️从API version 9开始该装饰器支持在ArkTS卡片中使用。 Styles装饰器使用说明
当前Styles仅支持通用属性和通用事件。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 100Styles fancy() {.height(this.heightValue).backgroundColor(Color.Yellow).onClick(() {this.heightValue 200})}
}组件内Styles的优先级高于全局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)}}
}总结
Styles装饰器可以将多条样式设置提炼成一个方法直接在组件声明的位置调用。通过Styles装饰器可以快速定义并复用自定义样式。用于快速定义并复用自定义样式从而提升代码质量Styles方法不支持参数Styles可以定义在组件内或全局在全局定义时需在方法名前面添加function关键字组件内定义时则不需要添加function关键字。定义在组件内的Styles可以通过this访问组件的常量和状态变量并可以在Styles里通过事件来改变状态变量的值。组件内Styles的优先级高于全局Styles。 框架优先找当前组件内的Styles如果找不到则会全局查找。
