前言

在「猫猫大作战」的 HUD 和游戏结束界面中，需要反复展示得分、时长、等级、连击次数等统计数据。将这些统计项封装为 StatItem 组件，可以大幅提升代码复用性。

一、StatItem 组件

@Component
export struct StatItem {
  @Prop label: string;
  @Prop value: string;
  @Prop valueColor: string = '#2C3E50';

  build() {
    Column() {
      Text(this.label)
        .fontSize(12).fontColor('#95A5A6')
        .margin({ bottom: 4 })

      Text(this.value)
        .fontSize(20).fontWeight(FontWeight.Bold)
        .fontColor(this.valueColor)
    }
    .alignItems(HorizontalAlign.Center)
  }
}

二、使用 StatItem

// HUD 中的统计
Row() {
  StatItem({ label: '得分', value: `${this.score}`, valueColor: '#E74C3C' })
  StatItem({ label: '连击', value: `${this.combo.multiplier}x`, valueColor: '#F39C12' })
  StatItem({ label: '时间', value: `${this.gameTime}s`, valueColor: '#95A5A6' })
}
.width('100%')
.justifyContent(FlexAlign.SpaceEvenly)
.padding(16)

// 游戏结束时的统计
Column() {
  StatItem({ label: '最终得分', value: `${this.finalScore}`, valueColor: '#E74C3C' })
  StatItem({ label: '最高等级', value: `Lv.${this.highestLevel}` })
  StatItem({ label: '游戏时长', value: `${this.gameTime}秒` })
  StatItem({ label: '最大连击', value: `${this.maxCombo}x` })
}

三、组件属性

四、最佳实践

1. 参数化组件：标签、数值、颜色都可配置
2. 复用率高：HUD 和结算页复用同一组件
3. 组合灵活：Row 或 Column 自由排列

总结

StatItem 封装标签-数值对的统计展示组件。核心要点：@Prop 接收标签和数值、 valueColor 自定义颜色、 HUD 和结算页复用。

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

相关资源：

• @Component 组件
• 第 102 篇：popup
• 第 104 篇：@Builder
• 第 105 篇：wrapBuilder