鸿蒙开发笔记-BuilderParam传递UI

概述

利用 @BuilderParam 构建函数，可以将外部的 UI 组件传递给自定义的组件，即UI组件可以作为参数传递。

talk is cheap, show me the code

自定义的组件（等待接收参数的组件）

@Component
export default struct TestBuilderParamComponent {
  //contentBuilders 和 defaultBuilders 自己命名
  //默认值，传进来的会把这个默认值覆盖掉
  @BuilderParam
  contentBuilders: () => void = this.defaultBuilders

  @Builder
  defaultBuilders() {
    Text('这是个默认文本')
      .fontColor(Color.Black)
      .fontSize(20)
  }

  build() {
    Column() {
      //使用 BuilderParam 参数
      this.contentBuilders()
    }
  }
}

传递参数的组件（传递参数的组件）

import TestBuilderParamComponent from '../components/TestBuilderParamComponent';

@Entry
@Component
struct Index {
  build() {
    Column({ space: 20 }) {

      //如果不打算传值，就不要加{}，虽然不报错，但影响默认值的使用
      TestBuilderParamComponent()

      //尾随闭包传值
      TestBuilderParamComponent() {
        Text('这是个传入的值')
          .fontColor(Color.Red)
          .fontSize(30)
      }

      //尾随闭包传值
      TestBuilderParamComponent() {
        Image($r('app.media.app_icon'))
          .width(160)
          .height(160)
      }
    }
    .backgroundColor('#F1F3F5')
    .height('100%')
    .width('100%')
  }
}

效果图

需要传递多个 BuilderParam 参数

自定义的组件（等待接收参数的组件）

@Component
export default struct TestBuilderParamComponent {
  //几个BuilderParam就写几个
  @BuilderParam
  titleBuilders: () => void = this.defaultBuilders
  @BuilderParam
  contentBuilders: () => void = this.defaultBuilders

  @Builder
  defaultBuilders() {
    Text('这是个默认文本')
      .fontColor(Color.Black)
      .fontSize(20)
  }

  build() {
    Column() {
      //使用 BuilderParam 参数
      this.titleBuilders()
      this.contentBuilders()
    }
  }
}

传递参数的组件（传递参数的组件）

import TestBuilderParamComponent from '../components/TestBuilderParamComponent';

@Entry
@Component
struct Index {
  @Builder
  titleBuilders() {
    Text('我是多参数BuilderParam标题')
  }

  @Builder
  contentBuilders() {
    Text('我是多参数BuilderParam内容')
  }

  build() {
    Column({ space: 20 }) {
      //与一个BuilderParam相比，这里不再是尾随闭包了
      TestBuilderParamComponent({
        titleBuilders: this.titleBuilders,
        contentBuilders: this.contentBuilders
      })
    }
    .padding({ top: 50 })
    .backgroundColor('#F1F3F5')
    .height('100%')
    .width('100%')
  }
}

多BuilderParam的效果图