开贴纸网站要怎么做的,wordpress怎样发邮件,大兴专业网站建设价钱,wordpress一键关注ArkTS学习笔记_封装复用之Styles装饰器
背景#xff1a; 在开发中#xff0c;如果每个组件的样式都需要单独设置#xff0c;就会出现大量代码在进行重复样式设置#xff0c;虽然可以复制粘贴#xff0c;但为了代码简洁性和后续方便维护#xff0c;给出的思路是#xff…ArkTS学习笔记_封装复用之Styles装饰器
背景 在开发中如果每个组件的样式都需要单独设置就会出现大量代码在进行重复样式设置虽然可以复制粘贴但为了代码简洁性和后续方便维护给出的思路是提炼和封装相同的样式成方法方便复用调用装饰器Style孕育而生。作用: Styles装饰器可以将多条样式设置提炼成一个方法直接在组件使用的位置调用即可复用。通过Styles装饰器可以快速定义并复用自定义样式。用于快速定义并复用自定义样式。
一、Styles装饰器使用说明
当前Styles仅支持通用属性和通用事件。Styles方法不支持参数反例如下。
// 反例 Styles不支持参数
Styles function globalFancy (value: number) {.width(value)
}Styles可以定义在组件内或全局。 在全局定义时需在方法名前面添加function关键字组件内定义时则不需要添加function关键字。
// 全局前面添加function关键字
Styles function functionName() { ... }// 在组件内
Component
struct FancyUse {// 组件内部不需要添加function关键字 Styles fancy() {.height(100)}}定义在组件内的Styles可以通过this访问组件的常量和状态变量并可以在Styles里通过事件来改变状态变量的值。
Component
struct FancyUse {State heightValue: number 100Styles fancy() {.height(this.heightValue) // 可是使用this指向组件本身调用组件的状态 .backgroundColor(Color.Yellow).onClick(() {this.heightValue 200 // 可是使用this指向组件本身给组件的状态赋值 })}
}组件内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 }) {Text(FancyA).globalFancy() // 和方法一样调用使用全局的Styles封装的样式.fontSize(30)Text(FancyB).fancy() // 和方法一样使用组件内的Styles封装的样式.fontSize(30)}}
}
