ArkTS custom components

How to extract and reuse repeated code in ArkTS can be achieved through the idea of ​​componentization.

Header component (custom component)

In the development of the project, the content of the header navigation bar is generally reused, and we can achieve this through component encapsulation.

We add a button component on the right side instead of the function component. 

Here we use the Blank component. This component can fill in the middle content by default, making it easier to achieve the effect of aligning both ends.

      Row(){
        Text('商品列表')
          .fontSize(30)
          .fontWeight(FontWeight.Bold)
        Blank()
        Button('按钮')
          .width(60)
          .height(35)
      }
      .width('100%')
      .height(30)
      .margin({bottom: 20})

 There are two ways to encapsulate components in ArkTS. One is to directly define the encapsulation in the current ets file, and the second is to create a component file.

current file definition

We implement the reuse of a component by defining a struct body. But please note that our Text component should be dynamically changed to ensure reusability, and the margins can be set separately when using the component.

@Component
struct Header{
  private title: ResourceStr
  build(){
    Row(){
      Text(this.title)
        .fontSize(30)
        .fontWeight(FontWeight.Bold)
      Blank()
      Button('按钮')
        .width(60)
        .height(35)
    }
    .width('100%')
    .height(30)
  }
}

For methods defined in the page, just use the name of the component directly in the page. It was found that the effect was the same as before.

Of course, you can also use the component's general style for components, such as width, height, margins, etc.

defined as separate file

1. Create directories and files

We create a component directory under the ets directory, and create a Header file below

2. Cut and paste the code

We cut and paste the code of the component, but we must pay attention to the idea of ​​componentization. We need to import and export components, so we need to export this component. Export using export syntax

3. Import component usage

When you import the header file, you will find that the effect is exactly the same as the one used in the previous file.

 Encapsulation within the card (custom constructor)

When we write code, in order to implement functions, the reusability of the code is very poor, and we write a lot of repeated code. We can optimize it to make the code more intuitive.

Here we can do it through custom components. Of course there are other ways, such as using a custom constructor. It is more convenient to encapsulate a unique page.

1. Global custom build function

The components we define outside the page components are called global custom build functions.

Then we put the duplicate code in it.

We found that he reported an error because in the original code loop structure, there was an item that was not substituted, so we need to substitute the item. 

We can just use it directly in the original place and find that the effect is the same as before.

The code structure is much clearer.

2. Local custom build function

We can also define the build function internally, called a local custom build function

We put it at the end of the component, but note that when using local custom build functions, there is no need to write functions. 

At this time, we found that an error was reported when calling the component above, because we did not use this and used the method inside the component, which needs to be called using this. The final result is the same as what we had before.

Custom public style function

There are too many repeated common styles in our code, such as width, height, etc. We can encapsulate the common styles, which can reduce the amount of code and make the code clearer.

// 公共样式封装
@Styles function fillScreen(){
  .width('100%')
  .height('100%')
  .backgroundColor('#efefef')
  .padding(20)
}

 When we use the .function directly, we find that it is the same as before.

Our public style components can also be written inside the page, just remove the function.

Custom private style components

 When we were developing, we found that some private styles also produced a lot of duplicate code.

When we used global style extraction, we found that the style reported an error. The error message is not a public style. Therefore, our global style encapsulation can only write public styles of all components, but cannot write private styles. We can achieve this through the extend syntax.

Note that using extends to encapsulate private styles can only be written globally, not locally. 

// 全局私有样式封装
@Extend(Text) function priceText(){
  .fontSize(18)
  .fontColor('#ff0000')
}

Finally, we found that it is the same as our style. We can directly modify the encapsulated component style to achieve the effect of collective modification, which also facilitates our operation.