开源鸿蒙 @Component
@Component
A struct decorated by @Component has the componentization capability and can serve as an independent component. This type of component is also called a custom component, and its UI structure is described in the build method. Custom components have the following features:
Composability: Custom components can be used with preset or other components, as well as common attributes and methods.
Reusable: Custom components can be reused by other components and used as different instances in different parent components or containers.
Lifecycle: Custom components provide callbacks for service logic processing throughout the lifecycle.
Data-driven update: The UI of custom components can be automatically updated based on the data of state variables.
For details about componentization, see About @Component.
NOTE
The build method must be defined for a custom component.
Custom constructors are prohibited for custom components.
The following code illustrates how to create a custom component named MyComponent:
@Component
struct MyComponent {
build() {
Column() {
Text('my component')
.fontColor(Color.Red)
}.alignItems(HorizontalAlign.Center) // center align Text inside Column
}
}
The build method of MyComponent is executed during initial rendering. When the component status changes, the build method will be executed again.
The following code illustrates how to use MyComponent:
@Component
struct ParentComponent {
build() {
Column() {
MyComponent()
Text('we use component')
.fontSize(20)
}
}
}
MyComponent can be applied multiple times and reused in different components, as shown in the code below:
@Component
struct ParentComponent {
build() {
Row() {
Column() {
MyComponent()
Text('first column')
.fontSize(20)
}
Column() {
MyComponent()
Text('second column')
.fontSize(20)
}
}
}
aboutToAppear() {
console.log('ParentComponent: Just created, about to become rendered first time.')
}
aboutToDisappear() {
console.log('ParentComponent: About to be removed from the UI.')
}
}
你可能感兴趣的文章
开源鸿蒙 Multi-Language Capability
- 所属分类: 后端技术
- 本文标签:
热门推荐
-
2、 - 优质文章
-
3、 gate.io
-
8、 golang
-
9、 openharmony
-
10、 Vue中input框自动聚焦