BuilderParam 浅入浅出

🎯 BuilderParam 浅入浅出

⭐⭐

往期

• @Builder装饰器：自定义构建函数 @Builder装饰器的讲解
• @LocalBuilder装饰器： 维持组件关系 @LocalBuilder装饰器的讲解

见解 🧐

1️⃣ 当一个页面嵌入多个子组件且有些事件是相同的情况下，可以使用BuilderParam，在共同的父容器用Builder初始化好相同的逻辑代码，例如：二级页的返回逻辑

2️⃣ 可以在页面的全局或者局部初始化，前提：使用@Builder❗❗❗

3️⃣ 可以用@Require联合使用且需要初始化

4️⃣ 如果ui不刷新需要用箭头函数将@Builder的this指向改为父容器，因为直接传递给子组件this的指向也是组件❗❗❗

拆解 🍴

@Component
struct BuilderParamSonCase {
  label: string = '子汉堡'
  @Require @BuilderParam caseOneBuilderParam: () => void
  @BuilderParam caseTwoBuilderParam: () => void

  build() {
    Column() {
      this.caseOneBuilderParam()
      this.caseTwoBuilderParam()
    }
  }
}


@Builder
function globalBuilder() {
  Row() {
    Text('全局汉堡')
      .fontSize(20)
      .fontWeight(FontWeight.Bold)
  }
}

@Entry
@Component
struct BuilderParamFatherCase {
  label: string = '父汉堡'

  @Builder
  localBuilder() {
    Row() {
      Text(this.label)
        .fontSize(20)
        .fontWeight(FontWeight.Bold)
    }
  }

  build() {
    Column() {
      BuilderParamSonCase({
        caseOneBuilderParam: this.localBuilder,
        caseTwoBuilderParam: (): void => {
          this.localBuilder()
        }
      })

      BuilderParamSonCase({
        caseOneBuilderParam: globalBuilder,
        caseTwoBuilderParam: globalBuilder
      })
    }
    .width('100%')
    .height('100%')
  }
}

📝 使用@BuilderParam可以在多子组件部分UI代码逻辑一样的情况下可以在共同的父容器组件中全局/局部初始化好@Builder小组件，在用@BuilderParam传递给子组件

🌸🌼🌺