前言
我们先看一段简单的代码，可以看看发现有什么问题。
@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。
