@Builder装饰器: 自定义构建函数
自定义组件内构建函数
less
@Builder function(){...}
调用的时候可以直接使用this.function()
使用
自定义组件内@Builder方法个数不限制,可以在build()函数内调用,也可以在其他自定义函数,但是不能在组件外调用。
全局自定义构建函数
less
@Builder function GlobalBuilderFunction(){...}
使用方法GlobalBuilderFunction()
可以被整个应用获取,不允许使用this
和bind
方法。
如果不涉及组件状态变化,建议使用全局自定义构建方法
参数传递规则
参数的传递主要有两种:按值传递
和按引用传递
两种。
参数的类型必须与声明的类型保持一致。
在自定义构建函数内部,不允许改变参数值。如果需要改变参数值,且同步回调用点,建议使用@Link
按引用传递参数
传递的参数可为状态变量,且状态变量的改变会引起@Builder方法内部的UI刷新。
ArkUI提供 $$作为按引用传递参数的范式
按值传递参数
调用@Builder装饰的函数默认按值传递。当传递的参数为状态变量的时候,状态变量的改变不会引起@Builder方法内的UI刷新。所以当使用状态变量的时候,推荐使用按引用传递
。
@BuildeParam装饰器:引用@Builder函数
用来装饰指向@Builder
方法的变量,可以在初始化自定义组件时对属性进行复制,为自定义组件增加特定的功能。
这个装饰器用于声明任意UI描述的一个元素,类似slot占位符。
初始化@BuilderParam装饰的方法
@BuilderParam
装饰的方法只能被@Builder
装饰的方法初始化(自定义构建函数)。
参数初始化组件
@BuilderParam装饰的放大可以是有参数和无参数的两种形式,需与指向的@Builder方法类型匹配。
例如:
less
// 我们声明一个全局构建函数
@Builder function overBuilder($$:{label:string}){
...
}
// 这里我们用了按引用传递参数的方式
那么我们被@BuilderParam
装饰的变量的参数也要采用这样的形式与之匹配。 例如:
typescript
@BuilderParam customBuilderParam:($$:{label:string}) => void
尾随闭包初始化组件
就是在初始化自定义组件的时候,组件后紧跟一个大括号{}形成尾随闭包场景。
@Styles装饰器:定义组件重用样式
我们可以理解为这个装饰器可以把我们开发中组件重复的样式设置代码进行抽离成一个方法。
使用说明
- 当前
@Styles
仅支持通用属性和通用事件 @Styles
方法不支持带参数@Styles
可以定义在组件内或全局,在全局定义时需要在方法前添加function
关键字。和自定义构建函数是一样的- 定义在组件内的
@Styles
可以通过this
访问组件的常量和状态变量,并可以在@Styles
里通过时间来改变状态变量的值 - 组件内的
@Styles
优先级高于全局@Styles
,框架优先找当前组件内的@Styles
,如果找不到,则会全局查找
@Extend装饰器:定义扩展组件样式
使用说明
语法
java
@Extend(UIcompinentName) function functionName{...}
使用规则
@Extend
仅支持定义在全局,不支持组件内定义@Extend
支持封装指定组件的私有属性、私有事件和自身定义的全局方法@Extend
支持代参数,参数可以为function
,也可以为状态变量
(当状态变量改变的时候,UI可以正常被帅鑫渲染)
stateStyles:多态样式
概述
stateStyles是属性方法,可以根据UI内部状态来设置样式,类似于css伪类,但是语法不同。 ArkUI提供以下四种状态:
- focused : 获焦态
- normal :正常态
- pressed: 按压态
- disabled : 不可用态
这样我们就可以通过组件的不同状态对组件进行不同状态下的样式设置,也可以配合着@Styles
装饰器一起使用