【鸿蒙实战开发】HarmonyOS鸿蒙实现自定义组件插槽

代码改变世界996

已于 2024-08-11 21:07:28 修改

阅读量843

点赞数 11

分类专栏：鸿蒙安卓前端文章标签： harmonyos 华为 ui 鸿蒙 android

于 2024-08-11 21:06:04 首次发布

本文链接：https://blog.csdn.net/HarmonyOS007/article/details/141111844

版权

鸿蒙同时被 3 个专栏收录

200 篇文章 4 订阅

订阅专栏

安卓

200 篇文章 0 订阅

订阅专栏

前端

200 篇文章 0 订阅

订阅专栏

引言

在HarmonyOS中，如何实现类似Vue-Slot或React-RenderProps的功能？即允许将UI结构的函数（被@Builder修饰的函数）作为参数传递给组件，并在组件内的指定位置渲染，可以使用@BuilderParam装饰器。

@BuilderParam装饰器

@BuilderParam装饰器用于标记指向@Builder方法的变量。在初始化自定义组件时，可以通过对这个属性赋值来为组件添加特定的功能。该装饰器用于声明任意UI描述的一个元素，其作用类似于Vue中的slot占位符。

插槽的实现

使用步骤

子组件声明 @BuilderParam 属性。
父组件传入 @Builder修饰的函数或箭头函数。
调用 @Builder函数的逻辑。

BuilderParam的参数可以不给初始值，如果给了初始值，就是没有内容的默认内容

自定义组件


`// 子组件
@Component
 export struct Card {
 // 声明的一个要传递的内容！
 @Builder
 slot() {
 Text('暂无数据').margin(30)
 };

 private title: ResourceStr
 @BuilderParam component: () => void = this.slot;

 build() {
 Column() {
 Row() {
 Text(this.title)
 .fontColor('#333333')
 .fontSize(18)
 .fontWeight(700)
 .lineHeight(26)
 }.justifyContent(FlexAlign.Start).width('100%')

 this.component()
 }
 .backgroundColor(Color.White)
 .width('100%')
 .padding({ left: 16, right: 16, top: 20, bottom: 20 })
 .borderRadius(12)
 .margin({ bottom: 12 })
 }
 }

外部调用

下面案例中，列举了多种样例使用方法

`@Builder
function overBuilder() {
 Text('外部组件').margin(30)
}

// 父布局调用：
@Preview
@Component
@Entry
export struct Index {
 @Builder
 componentBuilder() {
 Text('内部组件').margin(30)
 }

 build() {
 Column() {
 Card({ title: '默认插槽' })
 Card({ title: '使用内部的组件插槽', component: this.componentBuilder })
 Card({ title: '使用外部的组件插槽', component: overBuilder })
 Card({ title: '直接传值' }) {
 Text('直接传值').margin(30)
 }

 }.height('100%').padding({ left: 16, right: 16, top: 20, bottom: 20 }).backgroundColor('#f0f3f6')
 }
}

效果图

只有一个BuilderParam且不需要传参的时候，可以使用尾随闭包

注意：尾随闭包用空大括号就代表传递空内容，会替代默认内容

以上的例子，都是单个插槽，那如果想使用多个插槽呢?

多个插槽使用

子组件有多个BuilderParam，必须通过参数的方式来传入

自定义组件

 `// 子组件
@Component
export struct Card {
 @Builder
 slot() {
 Text('暂无数据').margin(30)
 };

 @Builder
 defaultRightSlot() {
 Text('详情')
 };

 private title: ResourceStr
 @BuilderParam component: () => void = this.slot;
 @BuilderParam rightSlot: () => void = this.defaultRightSlot;

 build() {
 Column() {
 Row() {
 Text(this.title)
 .fontColor('#333333')
 .fontSize(18)
 .fontWeight(700)
 .lineHeight(26)
 this.rightSlot()

 }.justifyContent(FlexAlign.SpaceBetween).width('100%')

 this.component()
 }
 .backgroundColor(Color.White)
 .width('100%')
 .padding({ left: 16, right: 16, top: 20, bottom: 20 })
 .borderRadius(12)
 .margin({ bottom: 12 })
 }
}

外部调用

`@Builder
function overBuilder() {
 Text('外部组件').margin(30)
}

// 父布局调用：
@Preview
@Component
@Entry
export struct Index {
 @Builder
 componentBuilder() {
 Text('内部组件').margin(30)
 }

 @Builder
 rightBuilder() {
 Text('右边的插槽').margin(30)
 }

 build() {
 Column() {
 Card({ title: '默认插槽' })
 Card({ title: '通过参数传递', component: this.componentBuilder, rightSlot: this.rightBuilder })
 // Card({ title: '会报错' }) {
 //   Text('直接传值').margin(30)
 // }
 }.height('100%').padding({ left: 16, right: 16, top: 20, bottom: 20 }).backgroundColor('#f0f3f6')
 }
}

效果图

插槽的实现方式有很多，具体可以参考下官方文档@BuilderParam装饰器：引用@Builder函数

参数必传

如果我想让，用我封装的组件，让父组件必须传递一个属性，可以使用Require修饰符

Require修饰符只能作用在两个修饰符前面Prop BuilderParam

自定义组件


 `// 子组件
@Component
export struct Card {
 @Builder
 slot() {
 Text('暂无数据').margin(30)
 };

 @Builder
 defaultRightSlot() {
 Text('详情')
 };

 private title: ResourceStr
 // 父组件必须得传，不传则报错
 @Require
 @BuilderParam component: () => void = this.slot;
 @BuilderParam rightSlot: () => void = this.defaultRightSlot;

 build() {
 Column() {
 Row() {
 Text(this.title)
 .fontColor('#333333')
 .fontSize(18)
 .fontWeight(700)
 .lineHeight(26)
 this.rightSlot()

 }.justifyContent(FlexAlign.SpaceBetween).width('100%')

 this.component()
 }
 .backgroundColor(Color.White)
 .width('100%')
 .padding({ left: 16, right: 16, top: 20, bottom: 20 })
 .borderRadius(12)
 .margin({ bottom: 12 })
 }
}

外部调用

`@Builder
function overBuilder() {
 Text('外部组件').margin(30)
}

// 父布局调用：
@Preview
@Component
@Entry
export struct Index {
 @Builder
 componentBuilder() {
 Text('内部组件').margin(30)
 }

 @Builder
 rightBuilder() {
 Text('右边的插槽').margin(30)
 }

 build() {
 Column() {
 // 没传component，会报错
 Card({ title: '通过参数传递', rightSlot: this.rightBuilder })
 }.height('100%').padding({ left: 16, right: 16, top: 20, bottom: 20 }).backgroundColor('#f0f3f6')
 }
}

写在最后

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

这份鸿蒙（HarmonyOS NEXT）文档包含了鸿蒙开发必掌握的核心知识要点，内容包含了（ArkTS、ArkUI开发组件、Stage模型、多端部署、分布式应用开发、音频、视频、WebGL、OpenHarmony多媒体技术、Napi组件、OpenHarmony内核、OpenHarmony南向开发、鸿蒙项目实战等等）鸿蒙（HarmonyOS NEXT）技术知识点。