鸿蒙：@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 {@BuilderindexBuild02() {Column() {Text("这是一个indexBuild02函数  ").fontColor(Color.Green).fontSize(20)Button("Index传递的").onClick(() => {})}}@BuilderindexBuild() {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@BuildermyBuilder() {Column() {Text("这是一个myBuilder函数  ").fontColor(Color.Red).fontSize(20)Image($r('app.media.startIcon')).width(50).height(50)}}build() {Column() {this.myBuilderParam()}}
}

以上是个人经验分享