HarmonyOS Learning Road Ark Development Framework - Learning ArkTS Language (Basic Grammar 5)

@Styles decorator: define component reuse styles

If the style of each component needs to be set separately, a lot of code will be repeated during the development process. Although it can be copied and pasted, for the sake of code simplicity and subsequent maintenance, we have launched a decorator @Styles that can extract common styles for reuse.

The @Styles decorator can extract multiple style settings into one method, which can be called directly at the position where the component is declared. Custom styles can be quickly defined and reused through the @Styles decorator. Used to quickly define and reuse custom styles.

Decorator Instructions

• Currently @Styles only supports generic properties and generic events.
• The @Styles method does not support parameters, as shown below.

// 反例： @Styles不支持参数
@Styles function globalFancy (value: number) {
  .width(value)
}

• @Styles can be defined in the component or globally. The function keyword needs to be added before the method name when it is defined globally, and the function keyword does not need to be added when it is defined in the component.

// 全局
@Styles function functionName() { ... }

// 在组件内
@Component
struct FancyUse {
  @Styles fancy() {
    .height(100)
  }
}

• @Styles defined in the component can access the constants and state variables of the component through this, and can change the value of the state variable through events in @Styles, examples are as follows:

@Component
struct FancyUse {
  @State heightVlaue: number = 100
  @Styles fancy() {
    .height(this.heightVlaue)
    .backgroundColor(Color.Yellow)
    .onClick(() => {
      this.heightVlaue = 200
    })
  }
}

• In-component @Styles have higher priority than global @Styles.

  The framework first looks for @Styles in the current component, if not found, it will search globally.

scenes to be used

The usage of @Styles within components and global @Styles is demonstrated in the following example.

// 定义在全局的@Styles封装的样式
@Styles function globalFancy  () {
  .width(150)
  .height(100)
  .backgroundColor(Color.Pink)
}

@Entry
@Component
struct FancyUse {
  @State heightVlaue: number = 100
  // 定义在组件内的@Styles封装的样式
  @Styles fancy() {
    .width(200)
    .height(this.heightVlaue)
    .backgroundColor(Color.Yellow)
    .onClick(() => {
      this.heightVlaue = 200
    })
  }

  build() {
    Column({ space: 10 }) {
      // 使用全局的@Styles封装的样式
      Text('FancyA')
        .globalFancy ()
        .fontSize(30)
      // 使用组件内的@Styles封装的样式
      Text('FancyB')
        .fancy()
        .fontSize(30)
    }
  }
}

@Extend decorator: defines the extended component style

In the previous example, you can use @Styles for style extensions. On the basis of @Styles, we provide @Extend for extending native component styles.

grammar

@Extend(UIComponentName) function functionName { ... }

use rules

• Unlike @Styles, @Extend only supports global definitions, not internal definitions within components.
• Unlike @Styles, @Extend supports encapsulating the private properties and private events of the specified component and pre-defining the @Extend method of the same component.

// @Extend(Text)可以支持Text的私有属性fontColor
@Extend(Text) function fancy () {
  .fontColor(Color.Red)
}
// superFancyText可以调用预定义的fancy
@Extend(Text) function superFancyText(size:number) {
    .fontSize(size)
    .fancy()
}

• Different from @Styles, the method decorated with @Extend supports parameters. Developers can pass parameters when calling, and the calling follows the TS method call by value.

// xxx.ets
@Extend(Text) function fancy (fontSize: number) {
  .fontColor(Color.Red)
  .fontSize(fontSize)
}

@Entry
@Component
struct FancyUse {
  build() {
    Row({ space: 10 }) {
      Text('Fancy')
        .fancy(16)
      Text('Fancy')
        .fancy(24)
    }
  }
}

• The parameter of the @Extend decorated method can be function, which is used as the handle of the Event event.

@Extend(Text) function makeMeClick(onClick: () => void) {
  .backgroundColor(Color.Blue)
  .onClick(onClick)
}

@Entry
@Component
struct FancyUse {
  @State label: string = 'Hello World';

  onClickHandler() {
    this.label = 'Hello ArkUI';
  }

  build() {
    Row({ space: 10 }) {
      Text(`${this.label}`)
        .makeMeClick(this.onClickHandler.bind(this))
    }
  }
}

• The parameter of @Extend can be a state variable. When the state variable changes, the UI can be refreshed and rendered normally.

@Extend(Text) function fancy (fontSize: number) {
  .fontColor(Color.Red)
  .fontSize(fontSize)
}

@Entry
@Component
struct FancyUse {
  @State fontSizeValue: number = 20
  build() {
    Row({ space: 10 }) {
      Text('Fancy')
        .fancy(this.fontSizeValue)
        .onClick(() => {
          this.fontSizeValue = 30
        })
    }
  }
}

scenes to be used

The following example declares 3 Text components, and each Text component sets fontStyle, fontWeight and backgroundColor styles.

@Entry
@Component
struct FancyUse {
  @State label: string = 'Hello World'

  build() {
    Row({ space: 10 }) {
      Text(`${this.label}`)
        .fontStyle(FontStyle.Italic)
        .fontWeight(100)
        .backgroundColor(Color.Blue)
      Text(`${this.label}`)
        .fontStyle(FontStyle.Italic)
        .fontWeight(200)
        .backgroundColor(Color.Pink)
      Text(`${this.label}`)
        .fontStyle(FontStyle.Italic)
        .fontWeight(300)
        .backgroundColor(Color.Orange)
    }.margin('20%')
  }
}

@Extend reuses style combinations, examples are as follows.

@Extend(Text) function fancyText(weightValue: number, color: Color) {
  .fontStyle(FontStyle.Italic)
  .fontWeight(weightValue)
  .backgroundColor(color)
}

After combining styles through @Extend, the code is more concise and readable.

@Entry
@Component
struct FancyUse {
  @State label: string = 'Hello World'

  build() {
    Row({ space: 10 }) {
      Text(`${this.label}`)
        .fancyText(100, Color.Blue)
      Text(`${this.label}`)
        .fancyText(200, Color.Pink)
      Text(`${this.label}`)
        .fancyText(300, Color.Orange)
    }.margin('20%')
  }
}

stateStyles: polymorphic style

@Styles and @Extend are only applied to the style reuse of static pages, and stateStyles can quickly set different styles according to the internal state of the component. This is what we are going to introduce in this chapter stateStyles (also known as: polymorphic style).

overview

stateStyles is an attribute method, which can set the style according to the internal state of the UI. It is similar to the css pseudo-class, but the syntax is different. ArkUI provides the following four states:

• focused: Focused state.
• normal: normal state.
• pressed: pressed state.
• disabled: Unavailable state.

scenes to be used

base scene

The following example shows the most basic usage scenario of stateStyles. Button is the first component, it is focused by default, and the pink style specified by focused takes effect. Displays the black color specified for the pressed state when pressed. If another component is placed in front of the Button so that it is not in the focused state, the normal yellow color will take effect.

@Entry
@Component
struct StateStylesSample {
  build() {
    Column() {
      Button('Click me')
        .stateStyles({
          focused: {
            .backgroundColor(Color.Pink)
          },
          pressed: {
            .backgroundColor(Color.Black)
          },
          normal: {
            .backgroundColor(Color.Yellow)
          }
        })
    }.margin('30%')
  }
}

Figure 1  Focused state and pressed state

 

Combined use of @Styles and stateStyles

The following example specifies different states of stateStyles via @Styles.

@Entry
@Component
struct MyComponent {
  @Styles normalStyle() {
    .backgroundColor(Color.Gray)
  }

  @Styles pressedStyle() {
    .backgroundColor(Color.Red)
  }

  build() {
    Column() {
      Text('Text1')
        .fontSize(50)
        .fontColor(Color.White)
        .stateStyles({
          normal: this.normalStyle,
          pressed: this.pressedStyle,
        })
    }
  }
}

Figure 2  normal state and pressed state

 

Using regular variables and state variables in stateStyles

stateStyles can bind regular variables and state variables in the component through this.

@Entry
@Component
struct CompWithInlineStateStyles {
  @State focusedColor: Color = Color.Red;
  normalColor: Color = Color.Green

  build() {
    Button('clickMe').height(100).width(100)
      .stateStyles({
        normal: {
          .backgroundColor(this.normalColor)
        },
        focused: {
          .backgroundColor(this.focusedColor)
        }
      })
      .onClick(() => {
        this.focusedColor = Color.Pink
      })
      .margin('30%')
  }
}

By default, the button is focused and displayed in red, and when the click event is triggered, the focused state turns pink.

Figure 3  Click to change the focused state style

​​​​​​​