weixin_40725706

这个屌丝很懒，什么也没留下！

热门标签

HarmonyOS应用开发-ArkTS语言的装饰器之@BuilderParam

作者：weixin_40725706 | 2024-03-20 13:18:29

踩

前言

前面我们玩到了@ Builder 装饰器我们知道他是一个自定义构建函数,可以将重复使用的UI元素抽象成一个方法，在build方法里调用,那么本期我们要玩玩的是BuilderParam 顾名思义: builder 的参数,用作是啥? 这玩意有点麻烦说实话不好用......

用于自定义构建函数的时候在里面添加了一个自定义组件如果你需要实现点击跳转功能按早以前我们都是直接修改这个函数里面的组件那么导致所有引用这个函数的组件都会有点击跳转功能,为解决此问题，ArkUI引入了@BuilderParam装饰器，@BuilderParam用来装饰指向@Builder方法的变量，我们就可以在初始化自定义组件时对此属性进行赋值，为自定义组件增加特定的功能。

该装饰器用于声明任意UI描述的一个元素，类似slot占位符。

使用

⚠️: @BuilderParam装饰的方法只能被自定义构建函数@Builder装饰来初始化

使用所属自定义组件的自定义构建函数或者全局的自定义构建函数，在本地初始化@BuilderParam,啥意思?操作看看

语法:

所属的自定义组件里面的函数

官方给到的一个语法

这里 void 后面跟着类似赋值操作官方没有给出合理的解释, 我们继续跟着案例来


@Builder function GlobalBuilder0() {}
 
 @Component
 struct Child {
   @Builder doNothingBuilder() {};
   // 这里 void 后面跟着类似赋值操作 官方没有给出合理的解释
   @BuilderParam aBuilder0: () => void = this.doNothingBuilder;
   @BuilderParam aBuilder1: () => void = GlobalBuilder0;
   build(){}
 }

用父组件自定义构建函数初始化子组件@BuilderParam装饰的方法

使用子组件的 BuildeParam 传递参数的时候不能传递字符串、数值等类型只能传递 Builder 修饰的函数


// 乖儿
 @Component
 struct Son {
   @BuilderParam bp0: () => void;
 
   build() {
     Column() {
       // 直接调用使用
       this.bp0()
    }
  }
 }
 
 // 父亲组件
 @Entry
 @Component
 struct Father {
   @Builder componentBuilder() {
     Text(`我这里是父类里面的组件`)
  }
 
   build() {
     Column() {
       Son({bp0: this.componentBuilder})
    }
  }
 }

效果展示

this指向

这个时候虽然是可以用到父组件的text组件

但是子组件里面的this是指向 son的所以他默认就是子组件的label的了

如果你把子组件的label删除你就会发现变成undefined?????为什么

因为上面说过了子组件里面的this指向的是子组件,所以就拿不到,这里和vue就不一样了麻烦有一点点难理解

参数初始化组件

@BuilderParam装饰的方法可以是有参数和无参数的两种形式但是@BuilderParam装饰的方法类型需要和@Builder方法类型一致

需求:

定义一个全局的自定义构建函数接受引用参数传递 label 为字符串 ]
定义一个子组件在里编写一个无参数和一个有参数()类型
定义一个父组件为入口、里面使用子组件并且传递无参和有参数据


// 定义一个全局的自定义构建函数接受引用参数传递 label 为字符串
@Builder function GlobalBuilderTextByLabel($$ : {label: string }) {
  Text($$.label)
    .width("100%")
    .height(50)
    .backgroundColor(Color.Pink)
}
 
@Component
struct Child {
  label: string = '子组件'
  // 无参数类，指向的componentBuilder也是无参数类型
  @BuilderParam aBuilder0: () => void;
  // 有参数类型，指向的GlobalBuilderTextByLabel也是有参数类型的方法
  @BuilderParam aBuilder1: ($$ : { label : string}) => void;
 
  build() {
    Column() {
      // 子组件的label this 引用
      this.aBuilder0()
      this.aBuilder1({label: `我在子组件里面调用`} )
    }
  }
}
 
@Entry
@Component
struct Parent {
  label: string = '我是父亲元素'
 
  @Builder componentBuilder() {
    Text(`${this.label}`).fontSize(30)
  }
 
  build() {
    Column() {
      /**
       * 参数一: 无参数传递直接使用 @Builder 当中的组件
       * 参数二: 引用全局自定义函数
       */
      Child({ aBuilder0: this.componentBuilder, aBuilder1: GlobalBuilderTextByLabel })
    }
  }
}

⚠️: 如果在父组件里面使用子组件不传递参数则会报错,两个都得要传递

自定义组件“Child”中的属性“aBuilder0”缺少赋值或初始化。

自定义组件“Child”中的属性“aBuilder1”缺少赋值或初始化。

尾随闭包初始化组件

在初始化自定义组件时，组件后紧跟一个大括号“{}”形成尾随闭包场景。

⚠️: 此场景下自定义组件内有且仅有一个使用@BuilderParam装饰的属性才能用

创建SonCustomContainer，在创建SonCustomContainer时，通过其后紧跟一个大括号“{}”形成尾随闭包

作为传递给子组件SonCustomContainer @BuilderParam closer: () => void的参数


@Component
struct SonCustomContainer {
    @Prop header: string;
    @BuilderParam closer: () => void
 
    build() {
        Column() {
            Text(this.header)
            .fontSize(30)
 
            // 这里是父组件 传递过来的
            this.closer()
        }
    }
}
 
// 全局自定义
@Builder function GlobalSpecificParam(label1: string, label2: string) {
    Column() {
        Text(label1)
        .fontSize(30)
        Text(label2)
        .fontSize(30)
    }
}
 
@Entry
@Component
struct CustomContainerUser {
    @State text: string = 'header';
 
    build() {
        Column() {
            // 创建SonCustomContainer，在创建SonCustomContainer时，通过其后紧跟一个大括号“{}”形成尾随闭包
            // 作为传递给子组件SonCustomContainer @BuilderParam closer: () => void的参数
            SonCustomContainer({ header: this.text }) {
                Column() {
                    // 特殊参数
                    GlobalSpecificParam('参数1111', '参数2222')
                }.backgroundColor(Color.Yellow)
                .onClick(() => {
                    this.text = '点击了';
                })
            }
        }
    }
}

最后

有很多小伙伴不知道学习哪些鸿蒙开发技术？不知道需要重点掌握哪些鸿蒙应用开发知识点？而且学习时频繁踩坑，最终浪费大量时间。所以有一份实用的鸿蒙（Harmony NEXT）资料用来跟着学习是非常有必要的。

这份鸿蒙（Harmony NEXT）资料包含了鸿蒙开发必掌握的核心知识要点，

内容包含了：（ArkTS、ArkUI开发组件、Stage模型、多端部署、分布式应用开发、音频、视频、WebGL、OpenHarmony多媒体技术、Napi组件、OpenHarmony内核、Harmony南向开发、鸿蒙项目实战等等）鸿蒙（Harmony NEXT）技术知识点。

希望这一份鸿蒙学习资料能够给大家带来帮助，有需要的小伙伴自行领取，限时开源，先到先得~无套路领取！！

如果你是一名有经验的资深Android移动开发、Java开发、前端开发、对鸿蒙感兴趣以及转行人员，可以直接领取这份资料

获取这份完整版高清学习路线，请点击→纯血版全套鸿蒙HarmonyOS学习资料

鸿蒙（Harmony NEXT）最新学习路线

HarmonOS基础技能

HarmonOS就业必备技能
HarmonOS多媒体技术

鸿蒙NaPi组件进阶

HarmonOS高级技能

初识HarmonOS内核
实战就业级设备开发

有了路线图，怎么能没有学习资料呢，小编也准备了一份联合鸿蒙官方发布笔记整理收纳的一套系统性的鸿蒙（OpenHarmony ）学习手册（共计1236页）与鸿蒙（OpenHarmony ）开发入门教学视频，内容包含：ArkTS、ArkUI、Web开发、应用模型、资源分类…等知识点。

获取以上完整版高清学习路线，请点击→纯血版全套鸿蒙HarmonyOS学习资料