1.@Component
@Component装饰器仅能装饰struct关键字声明的数据结构。struct被@Component装饰后具备组件化的能力,需要实现build方法描述UI,一个struct只能被一个@Component装饰
@Component
export struct SecondComp {
build() {
}
}
2.@Builder
将重复使用的UI元素抽象成一个方法,使用@Builder修饰,在build方法里调用。
按引用传递参数时,传递的参数可为状态变量,且状态变量的改变会引起@Builder方法内的UI刷新。ArkUI提供$$作为按引用传递参数的范式。
@Builder
tabbarBuilder(item: TabbarItem, index: number) {
Column() {
Image(this.selectIndex == index ? item.icon_selected : item.icon).width(28).aspectRatio(1)
Text(item.title)
.width('100%')
.height(14)
.fontSize(10)
.fontWeight(500)
.textAlign(TextAlign.Center)
}
}
3.@Styles
@Styles装饰器可以将多条样式设置提炼成一个方法,直接在组件声明的位置调用
// 定义在全局的@Styles封装的样式
@Styles function globalFancy () {
.width(150)
.height(100)
.backgroundColor(Color.Pink)
}
// 定义在组件内的@Styles封装的样式
@Entry
@Component
struct FancyUse {
@State heightValue: number = 100
// 定义在组件内的@Styles封装的样式
@Styles fancy() {
.width(200)
.height(this.heightValue)
.backgroundColor(Color.Yellow)
.onClick(() => {
this.heightValue = 200
})