前言

在 ArkUI 中，@Builder 装饰器用于封装可复用的 UI 片段。将游戏结束页的统计项（得分、连击、合并次数）封装为 @Builder 子组件，可以有效减少代码重复。

本文以「猫猫大作战」的 GameOverOverlay 统计项为锚点，讲解 @Builder 的组件复用。

提示：本系列不讲 ArkTS 基础语法与环境搭建，假设你已跟完第 1–102 篇。本篇是阶段三第 103 篇。

一、@Builder 基本用法

1.1 定义构建函数

@Builder
StatItem(label: string, value: string, icon: string) {
  Row() {
    Text(icon).fontSize(20)
    Column() {
      Text(label).fontSize(12).fontColor('#999')
      Text(value).fontSize(20).fontWeight(FontWeight.Bold)
    }
    .margin({ left: 8 })
  }
  .padding(12)
  .backgroundColor('#FFF')
  .borderRadius(8)
}

1.2 使用

this.StatItem('得分', '88888', '⭐')
this.StatItem('最高连击', '5', '🔥')
this.StatItem('合并次数', '24', '🔄')

二、游戏结束统计

@Builder
GameOverStats() {
  Row() {
    this.StatItem('得分', this.score.toString(), '⭐')
    this.StatItem('连击', this.maxCombo.toString(), '🔥')
    this.StatItem('合并', this.mergeCount.toString(), '🔄')
  }
  .width('100%')
  .justifyContent(FlexAlign.SpaceEvenly)
}

三、总结

@Builder 封装可复用的 UI 片段，通过参数传递数据，适合游戏结束页统计项等场景。

核心要点：

• @Builder 装饰函数封装 UI 片段
• 通过参数传递数据
• 可在组件内多次调用复用

下一篇预告：第 104 篇将深入 @Builder 局部构建——复用片段的多种传递方式。

如果这篇文章对你有帮助，欢迎点赞👍、收藏⭐、关注🔔，你的支持是我持续创作的动力！

相关资源：

• @Builder 装饰器文档
• 开源鸿蒙跨平台社区
• 第 102 篇：Popup
• 第 104 篇：@Builder