鸿蒙开发：组件样式的复用

前言

我们先看一段简单的代码，可以看看发现有什么问题。

@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。