企业官网建设流程全解析

前言

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

一、StatItem 组件

@Componentexportstruct StatItem{@Proplabel:string;@Propvalue:string;@PropvalueColor: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