鸿蒙：@Builder 和 @BuilderParam正确使用方法

前言：

这两个装饰器在鸿蒙中还是比较好用的，最近在整理代码的时候，用到了这两个装饰器，作用是插槽传组件、替换组件，相信有一些刚开始学习鸿蒙的朋友可能会有些迷糊。这里我就跟大家简单分享下。相信你看完了以后，应该能理解了。

跟大家用白话讲讲，这个@Builder就类似于我们用的手机，@BuilderParam则类似于我们用的手机壳。假设你有多个手机，这个手机壳又恰好是通用的，那么你就可以一壳多用。

所以，我们可以将@Builder装到@BuilderParam中，形成一个具有保护壳的手机，但本质上主要使用的物品还是手机。

该鸿蒙中该如何应用呢？

常见的是在自定义组件替换组件（就好比一个自定义组件中的一个Text()组件你想换成Image()组件，那么就可以通过@Builder @BuilderParam实现）。

下面是官方文档链接：

https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/arkts-builderparam#%E5%88%9D%E5%A7%8B%E5%8C%96builderparam%E8%A3%85%E9%A5%B0%E7%9A%84%E6%96%B9%E6%B3%95https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/arkts-builderparam#%E5%88%9D%E5%A7%8B%E5%8C%96builderparam%E8%A3%85%E9%A5%B0%E7%9A%84%E6%96%B9%E6%B3%95下面我写个例子给大家展示下，效果图和代码如下：

1、Index.ets

复制代码

import { Test } from "./Test";

@Entry
@Component
export struct Index {
  @Builder
  indexBuild02() {
    Column() {
      Text("这是一个indexBuild02函数  ")
        .fontColor(Color.Green)
        .fontSize(20)

      Button("Index传递的")
        .onClick(() => {

        })
    }
  }

  @Builder
  indexBuild() {
    Column() {
      Text("这是一个indexBuild函数  ")
        .fontColor(Color.Orange)
        .fontSize(20)
      Button("Index传递的")
        .onClick(() => {

        })
    }
  }

  build() {
    Column({ space: 60 }) {
      Column() {
        Text("原汁原味的Builder，Index没传入Builder，所以没有替换")
        Test()
      }

      Divider()
      // 自定义构建函数区域
      Column() {
        Text("Index传入了的Builder，所以子组件的Builder被替换了")

        Test({
          myBuilderParam: this.indexBuild
        })
      }

      Divider()
      // 自定义构建函数区域
      Column() {
        Text("Index传入了的Builder02")

        Test({
          myBuilderParam: this.indexBuild02
        })
      }

    }
    .justifyContent(FlexAlign.Center)
    .height("100%")
    .width("100%")
  }
}

2、Test.ets

复制代码

@Component
export struct Test {
  @BuilderParam myBuilderParam: () => void= this.myBuilder
    @Builder
     myBuilder() {
    Column() {
      Text("这是一个myBuilder函数  ")
        .fontColor(Color.Red)
        .fontSize(20)
      Image($r('app.media.startIcon'))
        .width(50)
        .height(50)
    }
  }

  build() {

    Column() {
      this.myBuilderParam()
    }

  }
}

以上是个人经验分享