通过对自定义构建函数的学习,我发现在组件内和组件外编写和使用方面有一些小差别,通过新建一个页面TestBuilderInsideAndOutside来测试一下:

@Entry
@Component
struct TestBuilderInsideAndOutside {
  @State message: string = 'Test Builder Inside And Outside';

  //组件内自定义构建函数,不加function
  @Builder
  InsideBuilder(from: string) {
    Text(from + ' Text in Inside Builder').fontSize(22)
  }

  build() {
    Column() {
      Text(this.message)
        .fontSize(22)
        .fontWeight(FontWeight.Bold)
        .onClick(() => {
          this.message = 'Welcome';
        })
        .padding({ bottom: 30 })

      //使用组件内自定义构建函数需要加this
      this.InsideBuilder('组件内')

      //使用组件外自定义构建函数不需要加this
      OutsideBuilder('组件外')

    }
    .height('100%')
    .width('100%')
  }
}

//组件外自定义构建函数,需要加function
@Builder
function OutsideBuilder(from: string) {
  Text(from + ' Text in Outside Builder').fontSize(22)
}

通过测试我们发现,在组件外需要加function,使用时不需要this,组件内不需要加function,但使用时需要加this,而且在组件内编写自定义构建函数时,要写在struct内部,build()外部,和普通状态变量的编写位置是相同的,如果写错了位置会报错。

Logo

讨论HarmonyOS开发技术,专注于API与组件、DevEco Studio、测试、元服务和应用上架分发等。

更多推荐