鸿蒙@Builder装饰器：高效构建可复用UI组件

1. 鸿蒙中的@Builder装饰器解析

在鸿蒙应用开发中，@Builder装饰器是一个强大而灵活的工具，它允许开发者创建可复用的UI组件构建函数。这个特性在HarmonyOS 3.0后得到了显著增强，成为构建复杂界面的利器。

我第一次使用@Builder是在开发一个电商应用的商品详情页时。页面中有多个地方需要显示相似的商品卡片，但又有细微差别。传统做法会导致代码重复，而@Builder完美解决了这个问题。

2. @Builder的核心概念与优势

2.1 什么是@Builder

@Builder本质上是一个自定义构建函数，它可以将UI描述封装成一个可复用的单元。与常规方法不同，@Builder函数返回的是一个UI描述而非数据或组件实例。

typescript复制@Builder
function productCard(name: string, price: number) {
  Column() {
    Text(name)
      .fontSize(16)
    Text(`¥${price}`)
      .fontColor('#FF0000')
  }
}

2.2 @Builder的主要优势

1. 代码复用：消除重复的UI构建代码
2. 逻辑封装：将复杂UI构建过程隐藏起来
3. 参数传递：支持动态配置UI表现
4. 组合使用：多个@Builder可以相互调用

3. @Builder的详细使用方式

3.1 基本语法结构

一个标准的@Builder函数包含以下部分：

typescript复制@Builder
function builderName(param1: type, param2: type) {
  // UI构建代码
}

注意：@Builder函数必须使用function关键字定义，不能使用箭头函数。

3.2 参数传递机制

@Builder支持两种参数传递方式：

1. 按值传递：基本数据类型（string, number, boolean等）
2. 按引用传递：对象和数组（使用$前缀）

typescript复制@Builder
function userProfile($user: User) {
  Column() {
    Text($user.name)
    Text($user.age.toString())
  }
}

3.3 实际应用示例

假设我们要构建一个社交应用的帖子组件：

typescript复制@Builder
function postItem(
  author: string,
  content: string,
  $images: string[],
  likes: number
) {
  Column() {
    // 作者信息行
    Row() {
      Image($authorAvatar)
        .width(40)
        .height(40)
      Text(author)
        .fontSize(14)
    }
    
    // 内容区域
    Text(content)
      .fontSize(16)
      .margin({top: 8})
    
    // 图片展示（如果有）
    if ($images.length > 0) {
      Grid() {
        ForEach($images, (image) => {
          GridItem() {
            Image(image)
              .aspectRatio(1)
          }
        })