ArkTS - @Builder自定义构建函数

这个@Builder作用就是可以把组件样式抽离出来，写成公共组件，下边记录下全局自定义构建函数用法及注意的地方。

官方文档：开发者可以将重复使用的UI元素抽象成一个方法，在build方法里调用。

一、用法

下边代码，我在CommonBtn.ets文件中定义了两个函数，函数里边定义了按钮样式，这两个函数必须要用@Builder装饰器装饰（官方规定）。
一个是按引用传递的参数（引用传递参数必须写两个$符号，$符号的值就是：{ 参数名:参数类型}）；
另一个是按值传递的参数，引用和值传递区别下边记录，最后把函数导出。

// CommonBtn.ets
// 引用传递
@Builder
export function Btn1($$: {btnName: string}){
  Row() {
    Button($$.btnName).width(200).padding({left: 20, right: 20})
  }.justifyContent(FlexAlign.Center).width("100%").margin({top: 8,bottom: 8})
}
// 按值传递
@Builder
export function Btn2(btnName: string){
  Row() {
    Button(btnName).width(200).padding({left: 20, right: 20})
  }.justifyContent(FlexAlign.Center).width("100%").margin({top: 8,bottom: 8})
}

接下来在需要的页面导入：

// BuilderTest.ets
import {Btn1, Btn2} from "./CommonBtn"
@Entry
@Component
struct Test {
  @State btnText1: string = "引用传递按钮文字"
  @State btnText2: string = "值传递按钮文字"
  build() {
    Column() {
      // 引用传递
      Row() {
        Btn1({btnName:this.btnText1})
      }
      // 值传递
      Row() {
        Btn2(this.btnText2)
      }
      // 测试按引用传递参数 和 值传递参数的区别
      Button("改变两个按钮的文字").onClick(e => {
        this.btnText1 += 1
        this.btnText2 += 1
      })
    }
  }
}

页面样式如下：

二、引用传递和值传递区别

按引用传递参数的时候，自定义构建函数中的变量会实时更新。
官方文档：按引用传递参数时，传递的参数可为状态变量，且状态变量的改变会引起@Builder方法内的UI刷新。ArkUI提供$$作为按引用传递参数的范式。

按值传递的时候，自定义构建函数中的变量不会更新。
官方文档：调用@Builder装饰的函数默认按值传递。当传递的参数为状态变量时，状态变量的改变不会引起@Builder方法内的UI刷新。所以当使用状态变量的时候，推荐使用按引用传递。

测试：

当点击【改变两个按钮的文字】时，只有按引用传递的参数 实时更新了：