harmony 鸿蒙\@Styles Decorator: Definition of Resusable Styles

2023-06-24
浏览 (695)

\@Styles Decorator: Definition of Resusable Styles

If the style of each component needs to be set separately, this will result in a large amount of repeated code during development. Though copy and paste is available, it is inefficient and error-prone. To maximize code efficiency and maintainability, the \@Styles decorator is introduced.

\@Styles helps avoid repeated style setting, by extracting multiple style settings into one method. When declaring a component, you can invoke this method and use the \@Styles decorator to quickly define and reuse the custom styles of a component.

NOTE

Since API version 9, this decorator is supported in ArkTS widgets.

Rules of Use

\@Styles supports only universal attributes and universal events.
An \@Styles decorated method does not support parameters. The following example is invalid:

  // Invalid: @Styles does not support parameters.
  @Styles function globalFancy (value: number) {
    .width(value)
  }

\@Styles can be defined inside or outside a component declaration. When it is defined outside a component declaration, the component name must be preceded by the keyword function.

  // Global (outside a component declaration)
  @Styles function functionName() { ... }

  // Inside a component declaration
  @Component
  struct FancyUse {
    @Styles fancy() {
      .height(100)
    }
  }

\@Styles defined inside a component declaration can access constants and state variables of the component through this, and mutate the values of state variables through events in \@Styles. The following is an example:

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

The priority of \@Styles defined inside a component declaration is higher than that of \@Styles defined outside a component declaration. The framework preferentially searches for \@Styles within the current component.

Application Scenarios

The following example demonstrates the usage of \@Styles inside and outside a component declaration.

// Define a \@Styles decorated method outside a component declaration.
@Styles function globalFancy  () {
  .width(150)
  .height(100)
  .backgroundColor(Color.Pink)
}

@Entry
@Component
struct FancyUse {
  @State heightValue: number = 100
  // Define a \@Styles decorated method inside a component declaration.
  @Styles fancy() {
    .width(200)
    .height(this.heightValue)
    .backgroundColor(Color.Yellow)
    .onClick(() => {
      this.heightValue = 200
    })
  }

  build() {
    Column({ space: 10 }) {
      // Use the \@Styles decorated method defined outside a component declaration.
      Text('FancyA')
        .globalFancy ()
        .fontSize(30)
      // Use the \@Styles decorated method defined outside a component declaration.
      Text('FancyB')
        .fancy()
        .fontSize(30)
    }
  }
}