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

🎉 博客主页：【剑九_六千里-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%")}
}