Component Style Reuse in HarmonyOS Development

This article is based on harmonyosapi14. 

In a project, it can be said that the number of pages is usually relatively large, and each page is usually composed of many components. Each component sometimes involves a lot of attribute settings, such as width, height, background style, etc. Whether it is a single page or between multiple pages, the same components and style attributes will inevitably appear. 

For these recurring components, we can implement component reuse by individual customization to improve development efficiency and reduce duplicate code. For those same style attributes, it is also necessary to reuse them in order to make the code more concise and easy to maintain. 

For example the following code:

 

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

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

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

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

as can be seen from the above code, four sub-Column components are nested inside the Column component, and the style attributes of these sub-Column components are exactly the same. At the same time, each sub-Column component contains the same Text component, and the styles of these Text components are also the same. 

It can be said that in actual development, such a large number of repeated style code is not uncommon, the result is that code redundancy not only makes the code structure becomes bloated, but also brings a lot of inconvenience to the subsequent code maintenance work, greatly increasing the maintenance cost. 

In order to solve the above problems, we can adopt the method of style Reuse. At present, there are mainly two extraction methods to choose from. One is component extraction. We can directly use ForEach loop to traverse and render repeated components, so as to avoid repeatedly writing the same component structure in the code. The other is style extraction, which is centralized management by extracting repeated style attributes, then make references where needed, which can effectively reduce the duplication of style definitions in the code, making the code more concise, clear, and easy to maintain. 

Generic Attribute Style Extraction

The so-called common attribute extraction is the common attributes of all components, such as the width and height of the components, the background, the inner and outer margins, etc. However, one thing needs to be known is that the components do not support their own attributes, such as the color size of the text component, the bitmap of the picture, etc. All their own component attributes and common Styles are not supported. Common attribute extraction can be done through @ Styles decorator. 

In the above case, we use the @ Styles decorator to extract it.

 

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

  build() {
    Column() {
      Column() {
        Text("test 1")
          .fontColor(Color.White)
          .fontSize(16)
          .fontWeight(FontWeight.Bold)
      }
      .columnStyle()
      .justifyContent(FlexAlign.Center)

      Column() {
        Text("test 2")
          .fontColor(Color.White)
          .fontSize(16)
          .fontWeight(FontWeight.Bold)
      }
      .columnStyle()
      .justifyContent(FlexAlign.Center)

      Column() {
        Text("test 3")
          .fontColor(Color.White)
          .fontSize(16)
          .fontWeight(FontWeight.Bold)
      }
      .columnStyle()
      .justifyContent(FlexAlign.Center)

      Column() {
        Text("test 4")
          .fontColor(Color.White)
          .fontSize(16)
          .fontWeight(FontWeight.Bold)
      }
      .columnStyle()
      .justifyContent(FlexAlign.Center)

    }
  }
}

It can be seen that the Column component is still very concise after extraction, but everyone has also seen the problem mentioned earlier, that is, the @ Styles decorator only supports common attributes. Since the justifyContent attribute is the attribute of the Column component itself, it cannot be set, and the attributes in the Text component also belong to the attribute of the Text component and cannot be used here. 

The above method is extracted within the component. Of course, the @ Styles decorator also supports global extraction. You can extract it into a page separately for reuse by all the same component Styles.

 

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

Component Style Extraction 

although the use of @ Styles decorator solves some code redundancy, it is still not thorough enough. After all, many of its own attributes are not supported. In order to solve the above problems, we can use @ Extend decorator. 

It's still the above case, let's take a look.

 

@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("test 1").textStyle()
      }.columnStyle()

      Column() {
        Text("test 2").textStyle()
      }.columnStyle()

      Column() {
        Text("test 3").textStyle()
      }.columnStyle()

      Column() {
        Text("test 4").textStyle()
      }.columnStyle()

    }
  }
}

Can you see that using the @ Extend decorator is obviously much simpler than the @ Styles decorator. 

Simple summary

The @ Styles decorator and the @ Extend decorator can both solve the problem of redundancy of our style attributes in actual development, but their uses are really different. For example, if the Styles of the same components are reused, we can use the @ Extend decorator, and if the Styles of different components are common, we can use the @ Styles decorator. 

Although the above two decorators can solve the problem of redundancy of our styles, I want to judge whether to set an attribute style according to a certain condition, that is, the setting of dynamic attributes, which is not supported. In order to solve the problem of dynamic setting of attributes, I have to mention another way in Hongmeng that can extract attribute styles and use AttributeModifier, which we will introduce in future articles. 

Article tags: HarmonyOS language, ArkUI