自定义构建函数,多态样式,BuilderParams

自定义构建函数

@Builder 装饰的函数也称为“自定义构建函数”

如何使用构建函数

主要有两种使用方式，第一是：自定义组件内使用，第二是，全局自定义构建函数

自定义组件内使用

定义语法：

@Builder MyBuilderFunction(){ ... }

使用方法：

this.MyBuilderFunction()

允许在自定义组件内定义一个或多个@Builder方法，该方法被认为是该组件的私有、特殊类型的成

员函数。

自定义构建函数可以在所属组件的build方法和其他自定义构建函数中调用，但不允许在组件外调

用。

在自定义函数体中，this指代当前所属组件，组件的状态变量可以在自定义构建函数内访问。建议

通过this访问自定义组件的状态变量而不是参数传递。

全局自定义构建函数

定义的语法：@Builder function MyGlobalBuilderFunction(){ ... }

使用方法：MyGlobalBuilderFunction()

全局的自定义构建函数可以被整个应用获取，不允许使用 this 和 bind 方法。

如果不涉及组件状态变化，建议使用全局的自定义构建方法。

全局自定义函数的问题

全局的自定义构建函数可以被整个应用获取（下一代可用-当前4.0暂不支持），不允许使用this和bind方法。

如果不涉及组件状态变化，建议使用全局的自定义构建方法。

补一句-如果数据是响应式的-此时该函数不会自动渲染-哪怕是全局自定义函数，不可被其他文件引

用

参数传递

自定义构建函数的参数传递有按值传递和按引用传递两种，均需遵守以下规则：

参数的类型必须与参数声明的类型一致，不允许undefined、null和返回undefined、null的表达式。

在自定义构建函数内部，不允许改变参数值。如果需要改变参数值，且同步回调用点，建议使用

@Link。

@Builder内UI语法遵循 UI语法规则。

使用了 string 这种基础数据类型，即使它属于用State修饰的变量，也不会引起 UI的变化

按引用传递参数时，传递的参数可为状态变量，且状态变量的改变会引起@Builder方法内的UI刷新。

ArkUI提供$$作为按引用传递参数的范式。

ABuilder( $$ : 类型 );

也就是我们需要在builder中传入一个对象， 该对象使用$$(可使用其他字符)的符号来修饰，此时数据具

备响应式了

class CellParams {

leftTitle: string = ""

rightValue: string = ""

}

@Builder

function getCellContent($$: CellParams) {

        Row() {

        Row() {

                Text($$.leftTitle)

                Text($$.rightValue)

} .width('100%') .justifyContent(FlexAlign.SpaceBetween)

        .padding({

                left: 15,

                right: 15

        })

        .borderRadius(8)

        .height(40)

        .backgroundColor(Color.White)

}

.padding({

        left: 10,

        right: 10

})

}

同样的，全局Builder同样支持这种用法

使用 @Builder 复用逻辑的时候，支持传参可以更灵活的渲染UI

参数可以使用 状态数据 ，不过建议通过对象的方式传入 @Builder

构建函数-传递UI

Component可以抽提组件

Builder可以实现轻量级的UI复用

ArkTS提供了一个叫做 BuilderParam 的修饰符，你可以在组件中定义这样一个函数属性，在使用组件时直接传入

BuilderParam 只能应用在 Component 组件中，不能使用 Entry 修饰的组件中使用

需要注意的是，传入的函数必须是使用 Builder 修饰符修饰的

BuilderParams 类似于 Vue 中的插槽

1. 子组件中定义一个用 BuilderParam 修饰的函数

2. 父组件需要给子组件传入一个用 Builder 修饰的函数来赋值给子组件

3. 子组件要在想要显示插槽的地方来调用传入的方法

多态样式

@Styles和@Extend仅仅应用于静态页面的样式复用，stateStyles可以依据组件的内部状态的不同，快速设置

不同样式。这就是介绍的内容 stateStyles（又称为：多态样式）。

stateStyles 是属性方法，可以根据UI内部状态来设置样式，类似于css伪类，但语法不同。ArkUI提供以下四

种状态：

focused：获焦态。

normal：正常态。

pressed：按压态。

disabled：不可用态。

.stateStyles({

        focused: {

                .backgroundColor(Color.Pink)

},

pressed: {

        .backgroundColor(Color.Black)

},

normal: {

        .backgroundColor(Color.Red)

}

})

@Styles和stateStyles联合使用

@Styles pressedStyle() {

        .backgroundColor(Color.Red)

}

.stateStyles({

        normal: this.normalStyle,

        pressed: this.pressedStyle,

})