HarmonyOS 关于自定义组件花括号跟通用属性的问题

关于自定义构建函数无法使用通用属性的问题，原因如下：

@BuilderParam接收的是从外部传递进来的自定义构建函数（即@Builder修饰的函数），它本质上是函数，而函数上是没有通用属性的，至于List()为什么可以使用，是因为List是一个组件，而组件上是有这些通用属性的。

文档请参考：

https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V5/arkts-builder-V5#装饰器使用说明

解决方法：

1、如果属性样式为常量，可以在自定义构建函数中来下写死，示例如下：

@Builder doAnything() {
  Text(`this is componet ${this.label}`)
    .opacity(0.5)
    .fontSize(16)
    .border({width: 2, color: Color.Gray, radius: 8})
    .padding(8)
}

2、也可以在自定义函数使用的地方，在外层包裹一个容器组件，在容器组件中设置需要添加的属性，示例如下：

@BuilderParam customAnythingBuilderParam: () => void = this.doAnythingBuilder;
Column() {
  this.customAnythingBuilderParam();
}
.width('100%')
.height('100%')
.visibility(Visibility.Visible)

3、如果属性不确定，也可以使用传参的方式来实现在不同的组件复用而展现不同的特性，提高自定函数的可扩展性。示例如下：

interface BuilderType {
  fontSize: number,
  color: Color,
  opacity: number,
  backgroundColor: string | number
  border: object
  padding: number
  // 以下是您组件想要动态修改的通用属性
}

@Entry
@Component
struct BuilderParamParent {
  @State label: string = 'Parent Component'
  @State styles: Partial<BuilderType> = {
    fontSize: 24,
    color: Color.Red,
    border: {width: 2, color: '#e0e0e0', radius: 12},
    padding: 12
  }

  // 3、动态属性
  @Builder doSomething(styles: Partial<BuilderType>) {
    Text(`this is component ${this.label}`)
      .fontSize(styles.fontSize)
      .fontColor(styles.color)
      .border(styles.border)
      .padding(12)
  }

  // 1、固定属性值
  @Builder doAnything() {
    Text(`this is componet ${this.label}`)
      .opacity(0.5)
      .fontSize(16)
      .border({width: 2, color: Color.Gray, radius: 8})
      .padding(8)
  }
  @Builder parentBuilder() {
    Text('parentBuilder')
  }
  @BuilderParam customBuilderParam: (styles: BuilderType) => void = this.doSomething;
  build() {
    Row() {
      Column() {
        // BuilderParamChild({customBuilderParam: this.parentBuilder})
        // @BuilderParam的this指向问题
        BuilderParamThis({
          customNothingBuilderParam: ():void => this.doSomething(this.styles),
          customAnythingBuilderParam: this.doAnything,
        })
      }
    }
  }
}

/**
 * @BuilderParam的this指向问题：
 *   如果使用箭头函数传递@BuilderParam参数，由于箭头函数不绑定this，所以this还是指向父组件
 * */
@Component
struct BuilderParamThis {
  @State label: string = `Child Component`;

  @Builder doNothingBuilder() {}
  @Builder doAnythingBuilder() {}

  @BuilderParam customNothingBuilderParam: () => void = this.doNothingBuilder;
  @BuilderParam customAnythingBuilderParam: () => void = this.doAnythingBuilder;
  build() {
    Column() {
      this.customNothingBuilderParam();
      // 2、外包容器使用通用属性
      Column() {
        this.customAnythingBuilderParam();
      }
      .width('100%')
      .height('100%')
      .visibility(Visibility.Visible)
    }
  }
}