当前位置: 首页> 汽车> 车展 > HarmonyOS第五章:组件抽取、构建函数抽取@Builder、构建函数插槽@BuilderParam

HarmonyOS第五章:组件抽取、构建函数抽取@Builder、构建函数插槽@BuilderParam

时间:2025/7/11 7:45:00来源:https://blog.csdn.net/to_the_Future/article/details/141022660 浏览次数: 0次

🎉 博客主页:【剑九_六千里-CSDN博客】【剑九_六千里-掘金社区】
🎨 上一篇文章:【HarmonyOS第四章:样式操作及渲染页面】
🎠 系列专栏:【HarmonyOS系列】
💖 感谢大家点赞👍收藏⭐评论✍

在这里插入图片描述

在这里插入图片描述

文章目录

  • 1. 组件化抽取
    • 1.1. 组件拆分及导入导出
  • 2. 构建函数抽取
    • 2.1. @Builder
    • 2.2. @Builder传参传递
  • 3. 构建函数插槽 @BuilderParam
    • 3.1. 尾随闭包初始化组件(默认插槽)
    • 3.2. 参数初始化组件(具名插槽)

引言

在鸿蒙应用开发中,随着应用复杂度的提升,如何有效地组织和管理代码成为了一个重要的课题。

本文将探讨如何通过组件化和构建函数的使用来优化代码结构,提高代码的可读性和可维护性。

我们将从组件化的基础开始,逐步深入到构建函数的高级用法,包括如何使用 @Builder@BuilderParam 来进一步增强组件的灵活性和复用性。

无论你是刚接触鸿蒙应用开发的新手还是有一定经验的开发者,都能从中获得实用的技巧和最佳实践。让我们一起探索这些强大的工具吧!

1. 组件化抽取

1.1. 组件拆分及导入导出

刚开始写鸿蒙代码时,我们的代码都是在一个文件中编写,如下:

在这里插入图片描述

  • 重复代码较多
  • 不利于维护
@Entry
@Component
struct ComponentPage {build() {Column() {Text("header").width("100%").height(200).backgroundColor(Color.Pink)Text("content").width("100%").height(200).backgroundColor(Color.Red)Text("footer").width("100%").height(200).backgroundColor(Color.Yellow)}}
}

当页面特别复杂时,这样写会导致代码量太大,不利于后续维护,那么可以采用下面这种方式:

创建 components/layout 文件夹:

在这里插入图片描述
导出每个组件:

  • Header.ets
@Component
export struct Header {build() {Text("header").width("100%").height(200).backgroundColor(Color.Pink)}
}
  • Content.ets
@Component
export struct Content {build() {Text("content").width("100%").height(200).backgroundColor(Color.Red)}
}
  • Footer.ets
@Component
export struct Footer {build() {Text("footer").width("100%").height(200).backgroundColor(Color.Yellow)}
}

主页面导入并使用:

在这里插入图片描述

  • 将子组件导入父组件
  • 在负组件中直接使用子组件即可
import { Header } from "../components/layout/Header";
import { Content } from "../components/layout/Content";
import { Footer } from "../components/layout/Footer";@Entry
@Component
struct ComponentPage {build() {Column() {Header()Content()Footer()}}
}

当然了,在同一个文件中抽取组件也是可行的,如下:

在这里插入图片描述

  • 在同一文件中通过 @Component 装饰器创建子组件
  • 在父组件中引用即可
@Entry
@Component
struct Index {build() {Column() {ListModel()}.width("100%").height("100%")}
}
// 同一文件中抽取组件
@Component
struct ListModel {build() {Text(`123`).fontSize(24)}
}

2. 构建函数抽取

2.1. @Builder

页面抽取为组件后,组件中有一些相似的内容,又可以抽取为构建函数:

在这里插入图片描述

  • 将部分UI抽取为公共构建函数
@Component
export struct Header {// 组件内构建函数:不需要 function 关键字声明// 通过 this.ListModel() 调用@Builder ListModel() {Text(title).fontSize(30).width("100%").height(100).backgroundColor(Color.Pink)}build() {Column() {this.ListModel()}}
}// 全局构建函数:需要 function 关键字声明
// 直接 ListModel() 调用
// @Builder function ListModel() {
//   Text("你好")
//     .fontSize(30)
//     .width("100%")
//     .height(100)
//     .backgroundColor(Color.Pink)
// }

2.2. @Builder传参传递

1)按值传递

在这里插入图片描述

  • 标题通过参数传递
  • 只传递一个参数
@Component
export struct Header {// 组件内构建函数:不需要 function 关键字声明// 通过 this.ListModel() 调用@Builder ListModel(title: string) {Text(title).fontSize(30).width("100%").height(100).backgroundColor(Color.Pink)}build() {Column() {this.ListModel("你好")}}
}// 全局构建函数:需要 function 关键字声明
// 直接 ListModel() 调用
// @Builder function ListModel(title: string) {
//   Text(title)
//     .fontSize(30)
//     .width("100%")
//     .height(100)
//     .backgroundColor(Color.Pink)
// }

2)按引用传递

在这里插入图片描述

  • 名称总数通过参数传递
  • 可传递多个参数
  • 点击按钮增加总数
interface IOptions {name: string;count: number;
}@Component
export struct Header {@State count: number = 1;// 组件内构建函数:不需要 function 关键字声明// 通过 this.ListModel() 调用@Builder ListModel(options: IOptions) {Text(`${options.name}-------------------${options.count}`).width("100%").height(20).backgroundColor(Color.Pink)}build() {Column() {this.ListModel({name: "Header", count: this.count})this.ListModel({name: "Header", count: this.count * 2})this.ListModel({name: "Header", count: this.count * 4})Button("增加count").onClick(() => {this.count++;})}}
}// 全局构建函数:需要 function 关键字声明
// 直接 ListModel() 调用
// @Builder function ListModel(options: IOptions) {
//   Text(`${options.name}-------------------${options.count}`)
//     .width("100%")
//     .height(20)
//     .backgroundColor(Color.Pink)
// }

注意:

  • 在使用 @Builder 复用逻辑时,可以支持传递参数,从而实现更灵活的UI渲染。
  • 参数可以是状态数据,但建议使用对象的方式进行传递(直接传递,无法实现视图更新)。
  • 可以使用 Component 来抽象组件,而 @Builder 则可以实现轻量级的UI复用。
  • 按引用传递,参数定义类型时,不能使用字面量形式,需要使用 interface 或者 type 定义。

3. 构建函数插槽 @BuilderParam

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

当开发者创建了自定义组件,并想对该组件添加特定功能时,例如在自定义组件中添加一个点击跳转操作。

若直接在组件内嵌入事件方法,将会导致所有引入该自定义组件的地方均增加了该功能。

为解决此问题,ArkUI 引入了 @BuilderParam 装饰器,@BuilderParam 用来装饰指向 @Builder 方法的变量,开发者可在初始化自定义组件时对此属性进行赋值,为自定义组件增加特定的功能。

3.1. 尾随闭包初始化组件(默认插槽)

在这里插入图片描述

  • 组件后加 {} 书写,称为尾随闭包
  • 组件多次使用时,如未传递插槽,需通过 @Builder 声明默认内容
// @BuilderParam
@Entry
@Component
struct Index {build() {Column() {ListModel() {// 传递默认插槽Text("默认插槽").fontSize(24)}// 此处未使用插槽ListModel()}.width("100%").height("100%")}
}@Component
struct ListModel {// 使用父组件的尾随闭包{}(@Builder装饰的方法)初始化子组件@BuilderParam@BuilderParam ListModelFn: () => void = this.ListModelDefaultFn;// 如果默认插槽未传递,则默认一个内容@Builder ListModelDefaultFn () {Text("这是默认内容")}build() {Column() {Text("尾随闭包").fontSize(24)// 接收默认插槽this.ListModelFn()}}
}

3.2. 参数初始化组件(具名插槽)

在这里插入图片描述

  • @BuilderParam 装饰的方法可以是有参数和无参数的两种形式,需与指向的 @Builder 方法类型匹配。
  • @BuilderParam 装饰的方法类型需要和 @Builder 方法类型一致。
  • @BuilderParam 装饰的方法必须要有默认值,要不会报错,默认值是一个函数,通过 @Builder 装饰

@Entry
@Component
struct Index {@Builder HeaderContent() {Text("上部分内容").fontColor(Color.White).height(40).backgroundColor(Color.Blue).width("100%").textAlign(TextAlign.Center)}@Builder FooterContent() {Text("下部分内容").fontColor(Color.White).height(40).backgroundColor(Color.Blue).width("100%").textAlign(TextAlign.Center)}build() {Column({space:10}) {ListModel({ title:"中间内容",HeaderCon: this.HeaderContent, // 可以传递多个插槽,只传递,不调用FooterCon: () => { this.FooterContent() } // 也可以才有箭头函数的形式传递})}.width('100%').height('100%')}
}@Component
struct ListModel {title:string = "";@BuilderParam HeaderCon:() => void = this.Default;@BuilderParam FooterCon:() => void = this.Default;// 必须要有默认值,要不会报错@Builder Default () {Text("")}build() {Column(){// 组件中调用this.HeaderCon()Text(this.title).width("100%").height(40).textAlign(TextAlign.Center).fontColor(Color.White).backgroundColor(Color.Red)// 组件中调用this.FooterCon()}.width("100%")}
}
关键字:HarmonyOS第五章:组件抽取、构建函数抽取@Builder、构建函数插槽@BuilderParam

版权声明:

本网仅为发布的内容提供存储空间,不对发表、转载的内容提供任何形式的保证。凡本网注明“来源:XXX网络”的作品,均转载自其它媒体,著作权归作者所有,商业转载请联系作者获得授权,非商业转载请注明出处。

我们尊重并感谢每一位作者,均已注明文章来源和作者。如因作品内容、版权或其它问题,请及时与我们联系,联系邮箱:809451989@qq.com,投稿邮箱:809451989@qq.com

责任编辑: