前言
我们先看一段简单的代码，可以看看发现有什么问题。
@Entry @Component struct Index { build() { Column() { Text("1") .width(50) .height(50) .backgroundColor(Color.Red) .margin({ top: 10 }) Text("2") .width(50) .height(50) .backgroundColor(Color.Red) .margin({ top: 10 }) Text("3") .width(50) .height(50) .backgroundColor(Color.Red) .margin({ top: 10 }) Text("4") .width(50) .height(50) .backgroundColor(Color.Red) .margin({ top: 10 }) } } }
从以上的代码中，很明显的就能看出来，每个Text组件除了内容不一样之外，其它的样式属性都是重复存在的，此等案例，在实际的开发中，肯定会多次出现，虽然说，并不影响功能，但是，大量重复的样式代码，已经失去了代码的简洁性，也极大的增加了后续的代码维护，为了解决这一问题，还是建议大家能够把重复出现的样式，可以抽取出公共的样式。
@Styles装饰器
通过@Styles装饰器，我们可以把重复的样式，抽取成一个方法，供组件进行调用，还是以上的代码，我能使用@Styles装饰器进行抽取一下。
@Entry @Component struct Index { build() { Column() { Text("1").textStyle() Text("2").textStyle() Text("3").textStyle() Text("4").textStyle() } } @Styles textStyle() { .width(50) .height(50) .backgroundColor(Color.Red) .margin({ top: 10 }) } }
当然了，除了在页面或者组件内使用，你也可以放到全局，其效果是一样的。
@Styles function textStyle() { .width(50) .height(50) .backgroundColor(Color.Red) .margin({ top: 10 }) } @Entry @Component struct Index { build() { Column() { Text("1").textStyle() Text("2").textStyle() Text("3").textStyle() Text("4").textStyle() } } }
和前言中的代码，我们对比一下，同样的功能，哪一个代码更清晰简洁，相信我们一目了然。
@Styles装饰器有一个阻碍性问题，我们需要知道，那就是只能在当前文件内使用，不支持export，而且只只支持通用属性和通用事件，比如，同样是Text组件，宽高等通用属性，我们可以使用@Styles装饰器，但是其它的，比如颜色，文字大小等自身属性，却使用不了，如何解决这个问题，可以使用@Extend装饰器。
@Extend装饰器
我们把上面的案例，简单修改一下，都设置成当前组件的自有属性，显然这种情况下，是无法使用@Styles装饰器的。
@Entry @Component struct Index { build() { Column() { Text("1") .fontColor(Color.Red) .fontSize(18) .fontWeight(FontWeight.Bold) Text("2") .fontColor(Color.Red) .fontSize(18) .fontWeight(FontWeight.Bold) Text("3") .fontColor(Color.Red) .fontSize(18) .fontWeight(FontWeight.Bold) Text("4").fontColor(Color.Red) .fontSize(18) .fontWeight(FontWeight.Bold) } } }
我们使用@Extend装饰器改造一下：
@Extend(Text) function textStyle() { .fontColor(Color.Red) .fontSize(18) .fontWeight(FontWeight.Bold) } @Entry @Component struct Index { build() { Column() { Text("1").textStyle() Text("2").textStyle() Text("3").textStyle() Text("4").textStyle() } } }
@Extend装饰器，还可以复用已有的样式。
@Extend(Text) function textStyle() { .fontColor(Color.Red) .fontSize(18) .fontWeight(FontWeight.Bold) } @Extend(Text) function textChildStyle() { .textStyle()//复用之前定义的 .fontStyle(FontStyle.Italic) }
我们写项目，肯定有很多个页面，也肯定会有多个页面共用组件的场景，这种情况下，显然无论是@Styles装饰器，还是@Extend装饰器，都是无法满足的，如何做到整个项目之间的复用呢？这个问题，官方也给我们提供了AttributeModifier对象来解决。
AttributeModifier
@Styles和@Extend，虽然可以解决组件样式重复的问题，单也仅仅是页面或者组件之内，无法满足多个页面或多个组件共用的场景，而且两者内部也无法进行业务逻辑编写，无法动态的设置某一个属性，基于这个问题，AttributeModifier便应运而生。与@Styles和@Extend相比，AttributeModifier提供了更强的能力和灵活性，且在持续完善全量的属性和事件设置能力，因此推荐优先使用AttributeModifier。
目前方法有多个，可以满足不同的业务场景：
applyNormalAttribute(instance: T) : void//组件普通状态时的样式。 applyPressedAttribute(instance: T) : void//组件按压状态的样式。 applyFocusedAttribute(instance: T) : void//组件获焦状态的样式。 applyDisabledAttribute(instance: T) : void//组件禁用状态的样式。 applySelectedAttribute(instance: T) : void//组件选中状态的样式
自定义一个类实现AttributeModifier接口，你要实现那个组件的属性复用，泛型就设置对应的组件属性即可，目前，基本上大部分组件属性都有。
class MyTextModifier implements AttributeModifier<TextAttribute> { textHeight?: Length //组件普通状态时的样式。 applyNormalAttribute(instance: TextAttribute): void { instance.fontColor(Color.Red) .fontSize(18) .fontWeight(FontWeight.Bold) if (this.textHeight != undefined) { //不为空，设置height属性 instance.height(this.textHeight) } } }
定义好了之后，你就可以在各个页面或自定义组件内进行使用，真正做到了，样式的复用，和属性的动态设置。
//定义变量 @State modifier: MyTextModifier = new MyTextModifier() //组件使用 Text("文本描述") .attributeModifier(this.modifier)
相关总结
如果要实现多页面之间的组件属性样式复用，建议使用AttributeModifier，如果是单页面，通用属性可以使用@Styles，组件自有属性可以使用@Extend。
