harmony 鸿蒙\@Styles Decorator: Definition of Resusable Styles
\@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)
}
}
}
你可能感兴趣的鸿蒙文章
harmony 鸿蒙app.json5 Configuration File
harmony 鸿蒙Internal Structure of the app Tag
harmony 鸿蒙Application Configuration File Overview (FA Model)
harmony 鸿蒙Application Configuration File Overview (Stage Model)
harmony 鸿蒙Application Installation and Uninstallation Process
harmony 鸿蒙Application Package Overview
harmony 鸿蒙Application Package Structure in FA Model
- 所属分类: 后端技术
- 本文标签:
热门推荐
-
2、 - 优质文章
-
3、 gate.io
-
8、 golang
-
9、 openharmony
-
10、 Vue中input框自动聚焦