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

  }
}

以上是个人经验分享

相关推荐
m0_685535085 小时前
Zemax非序列膜层介绍
华为·光学·光学设计·光学工程·镜头设计
SWUT胖虎5 小时前
AlphabetIndexer组件 与 List 联动总结
list·harmonyos·arkts·鸿蒙
鸿蒙小白龙7 小时前
OpenHarmony轻量级内核LiteOS-M技术详解与应用实践
harmonyos·鸿蒙·鸿蒙系统·open harmony
Damon小智9 小时前
HarmonyOS应用开发-低代码开发登录页面(超详细)
低代码·harmonyos·鸿蒙·登录·arcts·arcui·griditem
爱笑的眼睛1111 小时前
深入探讨HarmonyOS中ListItem的滑动操作:从基础实现到高级分布式交互
华为·harmonyos
摘星编程12 小时前
【参赛心得】HarmonyOS创新赛获奖秘籍:如何用Stage模型和声明式UI打造高分作品
ui·华为·harmonyos·鸿蒙开发·stage模型
2501_9197490312 小时前
flutter鸿蒙:实现类似B站或抖音的弹幕功能
flutter·华为·harmonyos
鸿蒙小白龙13 小时前
OpenHarmony后台服务开发指南:ServiceAbility与ServiceExtensionAbility全解析
harmonyos·鸿蒙系统·open harmony
运维行者_14 小时前
DDI 与 OpManager 集成对企业 IT 架构的全维度优化
运维·网络·数据库·华为·架构·1024程序员节·snmp监控
浅蓝色17 小时前
flutter平台判断,这次应该没问题了。支持鸿蒙,插件已发布
flutter·harmonyos