想系统学习HarmonyOS开发？

欢迎加入班级，这里有成体系的学习资源，一站式成长通道已为你打开！还有机会获取精美礼盒

场景介绍

健身记录三环效果是运动健康类应用中高频使用场景之一。

本示例基于Progress组件构建三个环形进度条，实时显示运动数据，包括活动热量、锻炼时长、活动小时数三项数据。

效果预览

实现思路

1. 设置三个进度条组件类型为环形ProgressType.Ring。
2. 使用Stack布局，将三个环形进度条中心对齐。
3. 设置进度条的宽度strokeWidth和半径width，实现半径等差的三个同心圆效果。
4. 分别设置每个进度条的背景颜色backgroundColor和运动数据颜色color。

1. Progress({ value: this.totalTime, total: this.targetTotalTime, type: ProgressType.Ring })
2. .width(100)
3. .color('#2e80ff')
4. .style({ strokeWidth: 18, shadow: true })
5. .backgroundColor('#d5e5ff')

约束与限制

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

工程目录

1. ├──entry/src/main/ets // 代码区
2. │ ├──entryability
3. │ │ └──EntryAbility.ets // 程序入口
4. │ └──pages
5. │ └──ProgressExample.ets // 健身进度页
6. └──entry/src/main/resources // 应用资源目录

参考文档

Progress

Stack

代码下载

健身记录三环效果示例代码