想系统学习HarmonyOS开发？
欢迎加入班级，这里有成体系的学习资源，一站式成长通道已为你打开！每月前200名完成认证的学员可以获得HarmonyOS礼盒~
场景介绍
健身记录三环效果是运动健康类应用中高频使用场景之一。
本示例基于Progress组件构建三个环形进度条，实时显示运动数据，包括活动热量、锻炼时长、活动小时数三项数据。
效果预览
实现思路
- 设置三个进度条组件类型为环形ProgressType.Ring。
- 使用Stack布局，将三个环形进度条中心对齐。
- 设置进度条的宽度strokeWidth和半径width，实现半径等差的三个同心圆效果。
- 分别设置每个进度条的背景颜色backgroundColor和运动数据颜色color。
Progress({ value: this.totalTime, total: this.targetTotalTime, type: ProgressType.Ring }) .width(100) .color('#2e80ff') .style({ strokeWidth: 18, shadow: true }) .backgroundColor('#d5e5ff')
约束与限制
- 本示例支持API Version 17 Release及以上版本。
- 本示例支持HarmonyOS 5.0.5 Release SDK及以上版本。
- 本示例需要使用DevEco Studio 5.0.5 Release及以上版本进行编译运行。
工程目录
├──entry/src/main/ets // 代码区│ ├──entryability│ │ └──EntryAbility.ets // 程序入口│ └──pages│ └──ProgressExample.ets // 健身进度页└──entry/src/main/resources // 应用资源目录
