ArkUI 模块化实践探索

@Builder装饰器：自定义构建函数

参考了 @Builder装饰器 官方文档，

@Builder装饰装饰的函数就是自定义构建函数，分为 局部的 和 全局的 两种， 局部的即组件成员变量的自定义构建函数，局部的自定义构建函数可以共享组件状态， 全局的自定义函数，不依赖自定义组件存在，

这里强调介绍俩个地方， 自定义构建函数按引用传递参数 和 公有的自定义函数抽离。

自定义构建函数按引用传递参数， 全局的，局部的用法一样。

只有一个参数，且参数需要直接传入对象字面量才会按引用传递该参数，代码形式如下：

class Tmp {
    paramA1: string = ''
}

@Builder function overBuilder($$: Tmp) {
  Row() {
    Column() {
      Text(`overBuilder===${$$.paramA1}`)
      HelloComponent({message: $$.paramA1})
    }
  }
}

@Entry
@Component
struct Parent {
  @State label: string = 'Hello';
  build() {
    Column() {
      // 在父组件中调用overBuilder组件时，
      // 把this.label通过引用传递的方式传给overBuilder组件。
      overBuilder({paramA1: this.label})
      Button('Click me').onClick(() => {
        // 单击Click me后，UI文本从Hello更改为ArkUI。
        this.label = 'ArkUI';
      })
    }
  }
}

修改组件Parent状态 label 的值 自定义构建函数重新渲染。

如果局部的自定义函数内部使用了状态变量，状态变量(带有装饰器修饰的变量)改变页会刷新自定义构建函数。

全局的自定义函数抽离

全局的自定义函数抽离到单独的文件。

使用 $$ 仅仅是一个约定，并非强制，这样是为了表示它是引用，你用其他变量名效果一样。

// entry/src/../comps/testBuilder.ets

export interface IA {
  text: string
}

@Builder function A($$: IA){
  Text('付腾飞 test Builder: ' + $$.text)
    .fontColor('#fff')
    .fontSize(16)
}

export {
  A
}

在用到的地方引入即可，好像在使用一个组件一样，实际上它是一个自定义函数，不能尾随闭包传入子组件。内部可以使用子组件。

import {A} from '../comps/testBuilder'


Column(){
  Button('Test Button')
    .onClick(() => {this.text = 'I am BBB'})
  A({text: this.text})
}