学习笔记（五）：自定义构建函数

若自定义的组件内部UI结构固定，且仅与使用方进行数据传递。则无需单独写一个自定义组件文件，可直接在使用方内进行定义。

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

定义一个自定义构建函数：

@Builder myBuilderComponent(){
    // todo    
}

 

在使用方内使用：

this.myBuilderComponent()

 

举例：

我有一个页面BuilderTest，需要使用一个自定义组件(myBuilderComponent)，可单独写一个自定义组件文件myBuilderComponent.ets

当 myBuilderComponent 组件只在BuilderTest使用的时候，即可使用自定义组件内自定义构建函数

// 自定义构建函数使用示例
@Entry
@Component
struct BuilderTest {
  @State message: string = 'Hello World'

  @Builder myBuilderComponent(){
    Text('这是自定义构建函数')
      .fontSize(20)
      .fontColor(Color.Red)
  }

  build() {
    Row() {
      Column() {
        this.myBuilderComponent()
      }
      .width('100%')
    }
    .height('100%')
  }
}

 

 

全局自定义构建函数

定义,即多加function

@Builder function  myGlobalBuilderComponent(){
  Text('这是全局自定义构建函数')
    .fontSize(20)
    .fontColor(Color.Red)
}

 

使用

 myGlobalBuilderComponent()

 

注意：全局的自定义构建函数可以被整个应用获取，不允许使用this和bind方法。

完整使用示例：