@Component

About 2 min

@Component

@Component装饰的struct表示该结构体具有组件化能力,能够成为一个独立的组件,这种类型的组件也称为自定义组件。

该组件可以组合其他组件,它通过实现build方法来描述UI结构,其必须符合Builder的接口约束,该接口定义如下:

interface Builder {
    build: () => void
}
1
2
3

用户定义的组件具有以下特点:

  • **可组合:**允许开发人员组合使用内置组件和其他组件,以及公共属性和方法;
  • **可重用:**可以被其他组件重用,并作为不同的实例在不同的父组件或容器中使用;
  • **有生命周期:**生命周期的回调方法可以在组件中配置,用于业务逻辑处理;
  • **数据驱动更新:**可以由状态数据驱动,实现UI自动更新。

组件生命周期主要包括aboutToAppearaboutToDisappear回调函数,有关规范,请参见“组件生命周期回调函数”章节。

说明:

  • 组件必须遵循上述Builder接口约束,其他组件在内部的build方法中以声明式方式进行组合,在组件的第一次创建和更新场景中都会调用build方法。
  • 组件禁止自定义构造函数。

示例

如下代码定义了MyComponent组件**:**

@Component
struct MyComponent {
    build() {
        Column() {
            Text('my component')
                .fontColor(Color.Red)
        }.alignItems(HorizontalAlign.Center) // center align Text inside Column
    }
}
1
2
3
4
5
6
7
8
9

MyComponentbuild方法会在初始渲染时执行,此外,当组件中的状态发生变化时,build方法将再次执行。

以下代码使用了MyComponent组件:

@Component
struct ParentComponent {
    build() {
        Column() {
            MyComponent()
            Text('we use component')
                .fontSize(20)
        }
    }
}
1
2
3
4
5
6
7
8
9
10

可以多次嵌入MyComponent,并嵌入到不同的组件中进行重用:

@Component
struct ParentComponent {
    build() {
        Row() {
            Column() {
                MyComponent()
                Text('first column')
                    .fontSize(20)
            }
            Column() {
                MyComponent()
                Text('second column')
                    .fontSize(20)
            }
        }
    }

    private aboutToAppear() {
        console.log('ParentComponent: Just created, about to become rendered first time.')
    }

    private aboutToDisappear() {
        console.log('ParentComponent: About to be removed from the UI.')
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25