【高心星出品】
@builder 构建函数
ArkUI 还提供了一种更轻量的 UI 元素复用机制 @Builder，@Builder 所装饰的函数遵循 build()函数语法规则，开发者可以将重复使用的 UI 元素抽象成一个方法，在 build 方法里调用。
组件内构建函数
@Entry@Componentstruct Test1 { @State message: string = 'Hello World' // 构建组件内ui @Builder gentext(txt){ Text(txt) .border({width:1,radius:5,color:Color.Red}) .fontSize(22) .padding(5) .width('100%') } build() { Row() { Column() { // 使用组件内ui this.gentext(this.message) } .width('100%') } .height('100%') }}
复制代码
全局构建函数
/** *作者：gxx *日期：2024-03-13 18：41：57 *介绍： *全局builder构建 **/
@Builder export function gentext(txt){ Text(txt) .border({width:1,radius:5,color:Color.Blue}) .fontSize(22) .padding(5) .width('100%')}
复制代码
import { gentext } from '../components/builders'@Entry@Componentstruct Test1 { @State message: string = 'Hello World' // 构建组件内ui @Builder gentext(txt){ Text(txt) .border({width:1,radius:5,color:Color.Red}) .fontSize(22) .padding(5) .width('100%') } build() { Row() { Column() { // 使用组件内ui this.gentext(this.message) // 使用全局builder gentext(this.message) } .width('100%') } .height('100%') }}
复制代码
构建函数传参
按值传递参数
上面的案例就是使用了按值传递，函数内只是获取了值。如果数据发生变化，组件不会刷新。
按引用传递参数
按引用传递参数时，传递的参数可为状态变量，且状态变量的改变会引起 @Builder 方法内的 UI 刷新。ArkUI 提供 $$作为按引用传递参数的范式。
interface param{ txt:string}// 按引用传递@Builder export function gentext1($$:param){ Text($$.txt) .border({width:1,radius:5,color:Color.Blue}) .fontSize(22) .padding(5) .width('100%')}
复制代码
// 按照引用传递 gentext1({txt:this.message}) Button('修改') .width('60%') .onClick(()=>{ // 修改当前值会引起builder构建界面改变 this.message='hello arkui' })
复制代码
评论