#我的鸿蒙开发手记# HarmonyOS开发之复用组件样式原创

北京大神

发布于 2025-5-19 11:22

浏览

0收藏

本文基于HarmonyOSApi14。

一个项目，难免会有很多的页面，而每个页面又会有很多的组件组成，而每个组件又会有很多的属性设置，比如宽高，比如背景等等，而无论是在单一的页面还是多个页面之中，总会有相同的组件，当然也会有相同的样式属性，针对相同的组件，我们可以单独的自定义实现组件的复用，而对于相同的样式属性呢？为了代码的简洁，也是需要进行复用的。

比如下面的代码：

Column() {
      Column() {
        Text("我是组件一")
          .fontColor(Color.White)
          .fontSize(16)
          .fontWeight(FontWeight.Bold)
      }
      .width("100%")
      .height(100)
      .backgroundColor(Color.Pink)
      .justifyContent(FlexAlign.Center)
      .margin({ top: 10 })

      Column() {
        Text("我是组件二")
          .fontColor(Color.White)
          .fontSize(16)
          .fontWeight(FontWeight.Bold)
      }
      .width("100%")
      .height(100)
      .backgroundColor(Color.Pink)
      .justifyContent(FlexAlign.Center)
      .margin({ top: 10 })

      Column() {
        Text("我是组件三")
          .fontColor(Color.White)
          .fontSize(16)
          .fontWeight(FontWeight.Bold)
      }
      .width("100%")
      .height(100)
      .backgroundColor(Color.Pink)
      .justifyContent(FlexAlign.Center)
      .margin({ top: 10 })

      Column() {
        Text("我是组件四")
          .fontColor(Color.White)
          .fontSize(16)
          .fontWeight(FontWeight.Bold)
      }
      .width("100%")
      .height(100)
      .backgroundColor(Color.Pink)
      .justifyContent(FlexAlign.Center)
      .margin({ top: 10 })
    }
  }

以上的代码，可以看到，Column组件里有四个Column组件，所有的样式属性都是一样的，而每个Column组件里也有着同样的Text组件，其中的样式也是一样的，像这样大量的重复样式代码，在实际的开发中，可以说层出不穷，不仅代码冗余，还增加了日后的代码维护，解决这一问题，那就是进行抽取，目前呢，有两种的抽取方式，一种是组件的抽取，直接使用ForEach进行遍历即可，还有一种，那就是样式的抽取。

通用属性样式抽取

所谓的通用属性抽取，那就是所有组件的通用属性，比如组件的宽高，背景，内外边距等等，但是，有一点需要知道，那就是组件的自身属性不支持的，比如文本组件的颜色大小，图片的占位图等等，凡是自身组件的属性，通用样式都是不支持的；通用属性抽取，可以通过@Styles装饰器。

还是以上的案例，我们使用@Styles装饰器来抽取一下。

@Entry
@Component
struct Index {
  @Styles
  columnStyle() {
    .width("100%")
    .height(100)
    .backgroundColor(Color.Pink)
    .margin({ top: 10 })
  }

  build() {
    Column() {
      Column() {
        Text("我是组件一")
          .fontColor(Color.White)
          .fontSize(16)
          .fontWeight(FontWeight.Bold)
      }
      .columnStyle()
      .justifyContent(FlexAlign.Center)

      Column() {
        Text("我是组件二")
          .fontColor(Color.White)
          .fontSize(16)
          .fontWeight(FontWeight.Bold)
      }
      .columnStyle()
      .justifyContent(FlexAlign.Center)

      Column() {
        Text("我是组件三")
          .fontColor(Color.White)
          .fontSize(16)
          .fontWeight(FontWeight.Bold)
      }
      .columnStyle()
      .justifyContent(FlexAlign.Center)

      Column() {
        Text("我是组件四")
          .fontColor(Color.White)
          .fontSize(16)
          .fontWeight(FontWeight.Bold)
      }
      .columnStyle()
      .justifyContent(FlexAlign.Center)

    }
  }
}

可以看到Column组件经过抽取之后，还是十分简洁的，但是大家也看到了前边说的问题，那就是@Styles装饰器只支持通用的属性，由于justifyContent属性是Column组件自身的属性，所以不能进行设置，而Text组件里的属性也属于Text组件的自身属性，这里也无法进行使用。

以上的方式是在组件内抽取的，当然，@Styles装饰器也支持全局抽取的，你可以把它单独的抽取到一个页面之中，供所有的一样的组件样式进行复用。

@Styles
function columnStyle() {
  .width("100%")
    .height(100)
    .backgroundColor(Color.Pink)
    .margin({ top: 10 })
}

组件样式抽取

使用@Styles装饰器虽然解决了一定的代码冗余，但是还是不够彻底，毕竟很多的自身属性它是不支持的，为了解决以上的问题，我们可以使用@Extend装饰器。

还是以上的案例，我们进行抽取一下。

@Extend(Column)
function columnStyle() {
  .width("100%")
  .height(100)
  .backgroundColor(Color.Pink)
  .margin({ top: 10 })
  .justifyContent(FlexAlign.Center)
}

@Extend(Text)
function textStyle() {
  .fontColor(Color.White)
  .fontSize(16)
  .fontWeight(FontWeight.Bold)
}

@Entry
@Component
struct Index {
  build() {
    Column() {
      Column() {
        Text("我是组件一").textStyle()
      }.columnStyle()

      Column() {
        Text("我是组件二").textStyle()
      }.columnStyle()

      Column() {
        Text("我是组件三").textStyle()
      }.columnStyle()

      Column() {
        Text("我是组件四").textStyle()
      }.columnStyle()

    }
  }
}

是不是可以看到，使用@Extend装饰器，明显比@Styles装饰器简洁多的。