📢 重磅福利！参与活动赢好礼，马克杯、鼠标垫贴纸、8月1日-12月31日等你来！

点击链接：   华为开发者学堂

场景介绍

比赛计分器是运动健康类应用中的典型场景之一，如篮球、乒乓球、羽毛球等比赛中需要计时和计分。

本示例基于TextTimer组件构建篮球比赛计分板，包括比赛倒计时、比分显示、一键加分（1分球/2分球/3分球）等功能。

效果预览

实现思路

1. 通过TextTimer组件初始化定时器，实现倒计时功能。
   1. TextTimer({ isCountDown: true, count: Constants.TIME_COUNT, controller: this.textTimerController })
2. 调用TextTimerController的pause、start、reset接口，实现倒计时的暂定、启动和重置功能。
   1. Image(this.isPause ? $r('app.media.pause') : $r('app.media.play_fill'))
   2. .width($r('app.float.width_56'))
   3. .height($r('app.float.height_56'))
   4. .margin({ top: $r('app.float.margin_14') })
   5. .interpolation(ImageInterpolation.High)
   6. .onClick(() => {
   7. if (this.isPause) {
   8. this.textTimerController.pause()
   9. } else {
   10. this.textTimerController.start()
   11. }
   12. this.isPause = !this.isPause;
   13. })
   15. Image($r('app.media.clock'))
   16. .width($r('app.float.width_19'))
   17. .height($r('app.float.height_19'))
   18. .alignSelf(ItemAlign.Center)
   19. .interpolation(ImageInterpolation.High)
   20. .onClick(() => {
   21. this.textTimerController.reset();
   22. this.isPause = false;
   23. })

约束与限制

• 本示例支持API Version 17 Release及以上版本。
• 本示例支持HarmonyOS 5.0.5 Release SDK及以上版本。
• 本示例需要使用DevEco Studio 5.0.5 Release及以上版本进行编译运行。

工程目录

1. ├──entry/src/main/ets // 代码区
2. │ ├──constant
3. │ │ └──CommonConstants.ets // 公共常量
4. │ ├──entryability
5. │ │ └──EntryAbility.ets
6. │ ├──entrybackupability
7. │ │ └──EntryBackupAbility.ets
8. │ ├──view
9. │ │ └──ScorerView.ets // 一键加分视图
10. │ └──pages
11. │ └──MatchView.ets // 计分板主页面
12. └──entry/src/main/resources // 应用资源目录

参考文档

TextTimer

代码下载

比赛计分器示例代码