鸿蒙:@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()
    }

  }
}

以上是个人经验分享

相关推荐
fruge3 小时前
提升 HarmonyOS 开发效率:DevEco Studio 6.0 热更新调试模式全指南
华为·harmonyos
2501_919749033 小时前
鸿蒙:使用Image组件展示相册图片或rawfile图片
华为·harmonyos
2501_919749033 小时前
鸿蒙:PersistenceV2页面间持久化存储数据
华为·harmonyos
yenggd5 小时前
QoS之拥塞管理两种配置方法
网络·华为
一尘之中10 小时前
操作系统内核架构深度解析:从单内核、微内核到鸿蒙分布式设计
架构·harmonyos·ai写作
咕噜企业签名分发-淼淼16 小时前
App防止恶意截屏功能的方法:iOS、Android和鸿蒙系统的实现方案
android·ios·harmonyos
安卓开发者16 小时前
鸿蒙NEXT NearLink Kit入门指南:重新定义短距无线通信
华为·harmonyos
科技风向标19 小时前
2025 随身 WiFi 行业报告:格行 WiFi6 技术下放百元市场,中兴华为机型竞争力分析;五款机型芯片方案 / 网速 / 质保深度横评
网络·科技·物联网·华为·随身wifi·格行
想不明白的过度思考者1 天前
鸿蒙系统:不止于“手机OS”的全场景智能操作系统
华为·智能手机·harmonyos
IT WorryFree1 天前
华为光模块命名规则
华为