HarmonyOS Next应用开发——@build构建函数的使用

【高心星出品】

@builder构建函数

ArkUI还提供了一种更轻量的UI元素复用机制@Builder，@Builder所装饰的函数遵循build()函数语法规则，开发者可以将重复使用的UI元素抽象成一个方法，在build方法里调用。

组件内构建函数

@Entry
@Component
struct 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
@Component
struct 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'
          })