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

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

引言：

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

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

我们将从组件化的基础开始，逐步深入到构建函数的高级用法，包括如何使用 @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.<