鸿蒙装饰器@BuilderParam

111 阅读1分钟

一 、@BuilderParam

@BuilderParam该装饰器是用来声明任意UI描述的一个元素,类似于slot --> 用于自定义组件外部传入UI

1.1 单个@BuilderParam

可以直接在父组件上中的子组件上使用{}这个符号,在这个符号里面写UI,就可以将数据传入到子组件上

// 使用自定义组件时,就可以使用如下方式传递 UI

// 不传递时会使用默认值

SonCom(){ // 传入的 UI }

格式如下:

@Component
struct SonCom {
  // 由外部传入 UI
  @BuilderParam ContentBuilder: () => void = this.defaultBuilder

  // 设置默认 的 Builder,避免外部不传入
  @Builder
  defaultBuilder() {
    Text('默认的内容')
  }

  build() {
    Column() {
      this.ContentBuilder()
    }
    .width(300)
    .height(200)
    .border({ width: .5 })
  }
}

@Entry
@Component
struct Index {
  build() {
    Column({ space: 15 }) {
      SonCom() {
        // 直接传递进来
        Button('传入的结构')
          .onClick(() => {
            AlertDialog.show({ message: '点了 Button' })
          })
      }
    }
  }
}

1.2 多个@BuilderParam

注意:多个@BuilderParam必须通过参数的形式来传递过来 使用格式 核心步骤:

  1. 自定义组件-定义:

添加多个 @BuilderParam ,并定义默认值

  1. 自定义组件-使用

格式: 通过参数的形式传入多个 Builder,比如

SonCom({ titleBuilder: this.fTitleBuilder, contentBuilder: this.fContentBuilder })