前言在「猫猫大作战」的 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})}三、组件属性属性类型默认值说明labelstring-标签文字valuestring-数值文字valueColorstring‘#2C3E50’数值颜色四、最佳实践参数化组件标签、数值、颜色都可配置复用率高HUD 和结算页复用同一组件组合灵活Row 或 Column 自由排列总结StatItem 封装标签-数值对的统计展示组件。核心要点Prop接收标签和数值、valueColor自定义颜色、 HUD 和结算页复用。如果这篇文章对你有帮助欢迎点赞、收藏⭐、关注你的支持是我持续创作的动力相关资源Component 组件第 102 篇popup第 104 篇Builder第 105 篇wrapBuilder
前言在「猫猫大作战」的 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})}三、组件属性属性类型默认值说明labelstring-标签文字valuestring-数值文字valueColorstring‘#2C3E50’数值颜色四、最佳实践参数化组件标签、数值、颜色都可配置复用率高HUD 和结算页复用同一组件组合灵活Row 或 Column 自由排列总结StatItem 封装标签-数值对的统计展示组件。核心要点Prop接收标签和数值、valueColor自定义颜色、 HUD 和结算页复用。如果这篇文章对你有帮助欢迎点赞、收藏⭐、关注你的支持是我持续创作的动力相关资源Component 组件第 102 篇popup第 104 篇Builder第 105 篇wrapBuilder
