学习笔记（四十三）：@BuilderParam装饰器初始化组件的三种方式

一、参数初始化组件

@BuilderParam装饰的方法可以是有参数和无参数的两种形式，需与指向的@Builder方法类型匹配

1、定义一个类作为参数

// 定义一个对象，ui需要的数据
export class ViewEntity{
  content:string = "sssss";
}

2、定义一个自定义组件

import { ViewEntity } from "../animation/ViewEntity";

// 自定义组件
@Component
export struct CommonView{
  label: string = 'Child';
  @Builder customBuilder() {};
  @Builder customerParmsBuilder($$:ViewEntity){}
  // 无参数类型，指向的componentBuilder也是无参数类型
  @BuilderParam customBuilderParam: () => void = this.customBuilder;
  // 有参数类型，指向的overBuilder也是有参数类型的方法
  @BuilderParam customOverBuilderParam: ($$: ViewEntity) => void = this.customerParmsBuilder;

  build() {
    Column() {
      this.customBuilderParam()
      this.customOverBuilderParam(new ViewEntity() )
    }
  }
}

3、有参和无参两种使用自定义组件的方式

import { ViewEntity } from "../animation/ViewEntity";
import { CommonView } from "../components/CommonView";
@Entity
@Component
export struct Main {
  label: string = '使用组件的Parent';
  viewEntity : ViewEntity = new ViewEntity()
  aboutToAppear(): void {
    this.viewEntity.content = "类的content字段"
  }
  // 无参自定义组件构建函数
  @Builder
  componentBuilder() {
    Text(`${this.label}`)
  }

  // 有参自定义组件构建函数
  @Builder
  componentParmsBuilder($$: ViewEntity) {
    Text($$.content)
      .width(400)
      .height(50)
      .backgroundColor(Color.Red)
  }

  build() {
    Column() {
      // 显示当前自定义构建函数 ，所以显示文案为 使用组件的Parent
      this.componentBuilder()
      Divider()
      // 使用一个自定义组件，通过@BuilderParms装饰器 传入当前 componentBuilder和componentParmsBuilder两个构建函数
      // 传入的无参构建函数componentBuilder，显示 label内容，在CommonView里面定义的内容为Child，所以显示Child
      // 传入的有参构建函数componentParmsBuilder,参数为一个ViewEntity类的对象，内容为显示对象的content属性值，因为自定义组件内new ViewEntity，且content字段默认值为sssss，所以ui显示未sssss
      CommonView({ customBuilderParam: this.componentBuilder, customOverBuilderParam: this.componentParmsBuilder })
    }
  }
}

 

效果图:

 

二、尾随闭包初始化组件

注意：

• 此场景下自定义组件内有且仅有一个使用@BuilderParam装饰的属性。

• 此场景下自定义组件不支持使用通用属性。

 

1、定义一个自定义组件

// 自定义组件
@Component
export struct CommonView{
  @Builder customBuilder() {};
  @BuilderParam customBuilderParam:()=>void=this.customBuilder
  build() {
    Column() {
      this.customBuilderParam()
    }
  }
}

 

 

2、使用该自定义组件，以尾随闭包的方式初始化组件

import { CommonView } from "../components/CommonView";
@Entity
@Component
export struct Main {
  build() {
    Column() {
      Text('Main')
      CommonView(){
        Text('尾随闭包初始化组件')
      }
      Text('End')
    }.width('100%').justifyContent(FlexAlign.Center)
  }
}

 

效果图：

 

 

3、使用全局和局部@Builder初始化@BuilderParam

@Component
struct ChildPage {
  label: string = `Child Page`;
  @Builder customBuilder() {};
  @BuilderParam customBuilderParam: () => void = this.customBuilder;
  @BuilderParam customChangeThisBuilderParam: () => void = this.customBuilder;

  build() {
    Column() {
      this.customBuilderParam()
      this.customChangeThisBuilderParam()
    }
  }
}

const builder_value: string = 'Hello World';
@Builder function overBuilder() {
  Row() {
    Text(`全局 Builder: ${builder_value}`)
      .fontSize(20)
      .fontWeight(FontWeight.Bold)
  }
}

@Entry
@Component
struct ParentPage {
  label: string = `Parent Page`;

  @Builder componentBuilder() {
    Row(){
      Text(`局部 Builder :${this.label}`)
        .fontSize(20)
        .fontWeight(FontWeight.Bold)
    }
  }

  build() {
    Column() {
      // 调用this.componentBuilder()时，this指向当前@Entry所装饰的ParentPage组件，所以label变量的值为"Parent Page"。
      this.componentBuilder()
      ChildPage({
        // 把this.componentBuilder传给子组件ChildPage的@BuilderParam customBuilderParam，this指向的是子组件ChildPage，所以label变量的值为"Child Page"。
        customBuilderParam: this.componentBuilder,
        // 把():void=>{this.componentBuilder()}传给子组件ChildPage的@BuilderParam customChangeThisBuilderParam，
        // 因为箭头函数的this指向的是宿主对象，所以label变量的值为"Parent Page"。
        customChangeThisBuilderParam: (): void => { this.componentBuilder() }
      })
      Line()
        .width('100%')
        .height(10)
        .backgroundColor('#000000').margin(10)
      // 调用全局overBuilder()时，this指向当前整个活动页，所以展示的内容为"Hello World"。
      overBuilder()
      ChildPage({
        // 把全局overBuilder传给子组件ChildPage的@BuilderParam customBuilderParam，this指向当前整个活动页，所以展示的内容为"Hello World"。
        customBuilderParam: overBuilder,
        // 把全局overBuilder传给子组件ChildPage的@BuilderParam customChangeThisBuilderParam，this指向当前整个活动页，所以展示的内容为"Hello World"。
        customChangeThisBuilderParam: overBuilder
      })
    }
  }
}

 

效果图：