鸿蒙原生ArkTS布局方式之Progress环形进度布局深度解析

项目演示一、概述与背景1.1 鸿蒙HarmonyOS NEXT简介HarmonyOS NEXT是华为公司推出的新一代智能终端操作系统旨在打造万物互联的全场景智慧生活体验。作为HarmonyOS生态的重要组成部分ArkTSArkUI TypeScript是一种基于TypeScript的声明式UI开发语言为开发者提供了高效、便捷的应用开发能力。在HarmonyOS NEXT中UI开发采用了全新的声明式范式通过组件化、状态驱动的方式构建用户界面。Progress组件作为基础的信息展示组件之一在应用中扮演着重要角色广泛应用于加载状态显示、任务进度展示、数据可视化等场景。1.2 Progress组件的应用场景Progress组件用于展示操作进度其核心功能是通过可视化方式向用户传达当前任务的完成状态。常见的应用场景包括数据加载进度如页面加载、文件下载、数据同步等过程中的进度显示任务执行状态如文件上传、数据处理、批量操作等任务的进度反馈资源消耗指示如存储空间使用、电池电量、网络带宽等资源的使用状态数据可视化如仪表盘、统计图表、健康数据等场景的进度展示在这些场景中环形进度条Ring以其独特的视觉效果和空间利用率成为最受欢迎的进度展示方式之一。1.3 环形进度条的优势相比传统的线性进度条环形进度条具有以下优势空间利用率高环形进度条可以在有限的空间内展示完整的进度信息尤其适合小屏幕设备视觉效果突出环形进度条具有更强的视觉冲击力能够快速吸引用户注意力信息展示丰富可以在环形进度条内部展示文字、图标等附加信息提升信息密度交互体验好环形进度条天然支持旋转动画能够提供更流畅的交互体验二、Progress组件基础2.1 Progress组件概述Progress组件是ArkUI框架提供的基础组件之一用于展示操作进度。该组件从API version 7开始支持后续版本不断扩展功能和属性。2.1.1 组件接口Progress组件的基本接口定义如下typescriptProgress(options: {value: number, total?: number, type?: ProgressType})其中options参数是一个对象包含以下属性参数名参数类型必填默认值说明valuenumber是0当前进度值设置小于0的数值时置为0设置大于total的数值时置为totaltotalnumber否100进度总长设置小于等于0的数值时置为100typeProgressType否ProgressType.Linear进度条类型支持5种类型2.1.2 ProgressType枚举ProgressType枚举定义了进度条的五种类型枚举值值说明Linear0线性样式从API version 9开始当高度大于宽度时自适应垂直显示Ring1环形无刻度样式环形圆环逐渐显示直至完全填充ScaleRing2环形有刻度样式类似时钟刻度从API version 9开始当刻度外圈重叠时自动转为Ring样式Eclipse3圆形样式进度以圆形填充方式展示Capsule4胶囊样式两端采用圆形样式中间采用线性样式2.2 Progress组件属性Progress组件支持以下属性2.2.1 通用属性Progress组件继承了所有通用属性包括尺寸属性width、height、minWidth、minHeight、maxWidth、maxHeight布局属性padding、margin、position、alignSelf、flexGrow、flexShrink等背景属性backgroundColor、backgroundImage、backgroundRadius等边框属性borderWidth、borderColor、borderRadius等透明度属性opacity2.2.2 组件特有属性Progress组件还支持以下特有属性属性名参数类型说明valuenumber设置当前进度值colorResourceColor设置进度条前景色backgroundColorResourceColor设置进度条背景色styleProgressStyleOptions设置进度条样式选项不同类型的进度条支持不同的样式选项2.2.3 ProgressStyleOptions详解ProgressStyleOptions是一个泛型类型根据ProgressType的不同支持不同的样式选项RingStyleOptions环形无刻度样式属性名参数类型默认值说明strokeWidthLength4.0vp设置进度条宽度不支持百分比设置宽度大于等于半径时默认修改至半径值的二分之一shadowbooleanfalse进度条阴影开关scanEffectScanEffectOptions-扫描效果选项ScaleRingStyleOptions环形有刻度样式属性名参数类型默认值说明strokeWidthLength4.0vp设置进度条宽度scaleCountnumber12设置刻度总数scaleWidthLength2.0vp设置刻度宽度shadowbooleanfalse进度条阴影开关LinearStyleOptions线性样式属性名参数类型默认值说明strokeWidthLength-设置进度条宽度scaleCountnumber0设置刻度总数为0时不显示刻度scaleWidthLength2.0vp设置刻度宽度EclipseStyleOptions圆形样式属性名参数类型默认值说明shadowbooleanfalse进度条阴影开关CapsuleStyleOptions胶囊样式属性名参数类型默认值说明strokeWidthLength-设置进度条宽度2.3 Progress组件事件Progress组件目前不支持事件监听。2.4 Progress组件生命周期Progress组件遵循ArkUI组件的生命周期管理aboutToAppear组件即将出现时触发aboutToDisappear组件即将消失时触发三、ProgressType.Ring环形进度条详解3.1 环形进度条的特性环形进度条ProgressType.Ring是Progress组件中最常用的类型之一具有以下特性3.1.1 视觉特性环形展示进度以圆环形式展示从起始点开始逐渐填充渐变效果默认前景色为蓝色渐变提供平滑的视觉过渡阴影支持可通过shadow属性添加阴影效果增强立体感3.1.2 动画特性平滑过渡进度值变化时环形进度条会平滑过渡到新的位置扫描效果支持扫描动画效果可通过scanEffect属性配置3.1.3 布局特性自适应尺寸通过width和height属性控制环形进度条的大小居中对齐环形进度条默认居中显示嵌套布局支持在环形进度条内部嵌套其他组件如Text、Image等3.2 环形进度条的核心属性3.2.1 value属性value属性用于设置当前进度值范围为0到total默认100。当value值变化时环形进度条会自动更新显示。typescriptProgress({ value: 50, total: 100, type: ProgressType.Ring })3.2.2 total属性total属性用于设置进度总长默认为100。进度百分比的计算公式为percentage value / total * 100%。typescriptProgress({ value: 50, total: 200, type: ProgressType.Ring }) // 进度为25%3.2.3 color属性color属性用于设置进度条前景色支持ResourceColor类型包括十六进制颜色值如’#007DFF’RGB/RGBA颜色值如’rgb(0, 125, 255)、‘rgba(0, 125, 255, 0.5)’颜色常量如Color.Blue、Color.Red资源引用如$r(‘app.color.progress_color’)typescriptProgress({ value: 50, type: ProgressType.Ring }).color(‘#007DFF’) // 蓝色进度条3.2.4 backgroundColor属性backgroundColor属性用于设置进度条背景色未填充部分的颜色。typescriptProgress({ value: 50, type: ProgressType.Ring }).color(‘#007DFF’).backgroundColor(‘#E8E8E8’) // 灰色背景3.2.5 style属性style属性用于设置进度条的样式选项对于环形进度条主要包括strokeWidth设置进度条宽度圆环粗细typescriptProgress({ value: 50, type: ProgressType.Ring }).style({ strokeWidth: 15 }) // 设置圆环宽度为15vpshadow设置进度条阴影开关typescriptProgress({ value: 50, type: ProgressType.Ring }).style({ shadow: true }) // 启用阴影效果scanEffect设置扫描效果选项typescriptProgress({ value: 50, type: ProgressType.Ring }).style({scanEffect: {enable: true,duration: 2000,color: ‘#007DFF’}})3.3 环形进度条的尺寸计算3.3.1 基本尺寸设置环形进度条的尺寸通过width和height属性设置typescriptProgress({ value: 50, type: ProgressType.Ring }).width(200).height(200)3.3.2 strokeWidth约束当strokeWidth设置过大时会自动调整如果strokeWidth 半径默认修改为半径值的二分之一半径 Math.min(width, height) / 23.3.3 最佳实践推荐的尺寸设置原则width和height设置为相同值确保圆形比例strokeWidth设置为宽度的1/10到1/5之间保证视觉效果根据实际场景调整尺寸确保在不同设备上都能正常显示四、鸿蒙原生ArkTS布局方式4.1 ArkUI布局体系概述ArkUI提供了丰富的布局容器组件用于构建灵活的界面布局。主要包括Column垂直布局容器子组件按垂直方向排列Row水平布局容器子组件按水平方向排列Stack层叠布局容器子组件按层叠方式排列Flex弹性布局容器支持灵活的布局方式Grid网格布局容器子组件按网格方式排列RelativeContainer相对布局容器子组件按相对位置排列4.2 环形进度条的常用布局方式4.2.1 居中布局使用Column布局实现环形进度条的居中显示typescriptColumn() {Progress({ value: 50, type: ProgressType.Ring }).width(200).height(200)}.justifyContent(FlexAlign.Center).alignItems(HorizontalAlign.Center).height(‘100%’).width(‘100%’)4.2.2 嵌套布局Stack使用Stack布局在环形进度条内部添加文字或图标typescriptStack({ alignContent: Alignment.Center }) {Progress({ value: 50, type: ProgressType.Ring }).width(200).height(200)Text(‘50%’).fontSize(32).fontWeight(FontWeight.Bold)}4.2.3 组合布局Row Column使用Row和Column组合布局实现多个环形进度条的排列typescriptRow() {Column() {Progress({ value: 30, type: ProgressType.Ring }).width(150).height(150)Text(‘下载进度’).fontSize(14).margin({ top: 10 })}Column() {Progress({ value: 60, type: ProgressType.Ring }).width(150).height(150)Text(‘上传进度’).fontSize(14).margin({ top: 10 })}}.justifyContent(FlexAlign.SpaceAround).height(‘100%’).width(‘100%’)4.2.4 相对布局RelativeContainer使用RelativeContainer实现更复杂的布局typescriptRelativeContainer() {Progress({ value: 50, type: ProgressType.Ring }).id(‘progress’).width(200).height(200).alignRules({center: { anchor: ‘container’, align: VerticalAlign.Center },middle: { anchor: ‘container’, align: HorizontalAlign.Center }})Text(‘进度’).id(‘label’).fontSize(18).alignRules({bottom: { anchor: ‘progress’, align: VerticalAlign.Top },middle: { anchor: ‘progress’, align: HorizontalAlign.Center }})}.height(‘100%’).width(‘100%’)4.3 布局注意事项4.3.1 尺寸适配使用百分比或vp单位实现自适应布局避免使用固定像素值确保在不同屏幕尺寸上正常显示考虑横竖屏切换时的布局适配4.3.2 性能优化避免嵌套过深的布局结构使用适当的布局容器避免过度使用Stack合理使用flexGrow和flexShrink属性4.3.3 响应式设计使用媒体查询适配不同设备考虑不同分辨率和像素密度的显示效果确保布局在折叠屏等特殊设备上正常工作五、实战案例5.1 案例一基础仪表盘5.1.1 需求描述实现一个基础的仪表盘界面展示单个环形进度条中心显示百分比数值。5.1.2 代码实现typescriptEntryComponentstruct DashboardPage {State progressValue: number 68;build() {Column() {Text(‘仪表盘’).fontSize(24).fontWeight(FontWeight.Bold).margin({ bottom: 40 });Stack({ alignContent: Alignment.Center }) { Progress({ value: this.progressValue, total: 100, type: ProgressType.Ring }) .width(200) .height(200) .color(#007DFF) .backgroundColor(#E8E8E8) .style({ strokeWidth: 15 }); Text(${this.progressValue}%) .fontSize(32) .fontWeight(FontWeight.Bold) .fontColor(#333333); } .margin({ bottom: 40 }); Text(当前进度) .fontSize(18) .fontColor(#666666); } .justifyContent(FlexAlign.Center) .alignItems(HorizontalAlign.Center) .height(100%) .width(100%) .backgroundColor(#F5F5F5);}}5.1.3 效果展示页面标题仪表盘居中显示环形进度条位于页面中央宽度200vp圆环宽度15vp进度条前景色为蓝色背景色为浅灰色中心显示当前进度百分比字体大小32vp加粗底部显示当前进度文字说明5.2 案例二动态进度动画5.2.1 需求描述实现一个动态进度动画效果进度值从0自动递增到100循环播放。5.2.2 代码实现typescriptEntryComponentstruct AnimatedProgressPage {State progressValue: number 0;private timerId: number 0;aboutToAppear() {this.startAnimation();}aboutToDisappear() {if (this.timerId ! 0) {clearInterval(this.timerId);this.timerId 0;}}private startAnimation() {this.timerId setInterval(() {this.progressValue 2;if (this.progressValue 100) {this.progressValue 0;}}, 100);}build() {Column() {Text(‘动态进度’).fontSize(24).fontWeight(FontWeight.Bold).margin({ bottom: 40 });Stack({ alignContent: Alignment.Center }) { Progress({ value: this.progressValue, total: 100, type: ProgressType.Ring }) .width(200) .height(200) .color(#007DFF) .backgroundColor(#E8E8E8) .style({ strokeWidth: 15, shadow: true }); Column({ space: 8 }) { Text(${Math.floor(this.progressValue)}%) .fontSize(32) .fontWeight(FontWeight.Bold) .fontColor(#333333); Text(加载中...) .fontSize(14) .fontColor(#999999); } } .margin({ bottom: 40 }); Text(进度值: ${this.progressValue.toFixed(1)} / 100) .fontSize(14) .fontColor(#999999); } .justifyContent(FlexAlign.Center) .alignItems(HorizontalAlign.Center) .height(100%) .width(100%) .backgroundColor(#F5F5F5);}}5.2.3 效果展示进度值每100ms增加2从0递增到100后重置为0环形进度条平滑过渡带有阴影效果中心显示百分比和加载中…文字底部显示精确的进度值5.3 案例三多进度条对比5.3.1 需求描述实现一个多进度条对比界面展示多个环形进度条用于对比不同任务的进度。5.3.2 代码实现typescriptEntryComponentstruct MultiProgressPage {State downloadProgress: number 45;State uploadProgress: number 78;State syncProgress: number 32;build() {Column() {Text(‘多任务进度’).fontSize(24).fontWeight(FontWeight.Bold).margin({ bottom: 40 });Row({ space: 30 }) { this.buildProgressCard(下载, this.downloadProgress, #007DFF); this.buildProgressCard(上传, this.uploadProgress, #00C853); this.buildProgressCard(同步, this.syncProgress, #FF9800); } .width(100%) .justifyContent(FlexAlign.Center) .margin({ bottom: 40 }); Button(刷新进度) .width(150) .height(40) .onClick(() { this.downloadProgress Math.floor(Math.random() * 100); this.uploadProgress Math.floor(Math.random() * 100); this.syncProgress Math.floor(Math.random() * 100); }); } .justifyContent(FlexAlign.Center) .alignItems(HorizontalAlign.Center) .height(100%) .width(100%) .backgroundColor(#F5F5F5);}BuilderbuildProgressCard(title: string, progress: number, color: string) {Column({ space: 10 }) {Stack({ alignContent: Alignment.Center }) {Progress({value: progress,total: 100,type: ProgressType.Ring}).width(120).height(120).color(color).backgroundColor(‘#E8E8E8’).style({ strokeWidth: 10 });Text(${progress}%) .fontSize(20) .fontWeight(FontWeight.Bold) .fontColor(#333333); } Text(title) .fontSize(16) .fontColor(#666666); }}}5.3.3 效果展示三个环形进度条并排显示分别代表下载、上传和同步任务每个进度条使用不同的颜色区分蓝色、绿色、橙色中心显示百分比数值底部显示任务名称点击刷新进度按钮随机更新进度值5.4 案例四带刻度的环形进度条5.4.1 需求描述实现一个带刻度的环形进度条类似仪表盘的效果。5.4.2 代码实现typescriptEntryComponentstruct ScaleRingPage {State progressValue: number 65;build() {Column() {Text(‘带刻度环形进度条’).fontSize(24).fontWeight(FontWeight.Bold).margin({ bottom: 40 });Stack({ alignContent: Alignment.Center }) { Progress({ value: this.progressValue, total: 100, type: ProgressType.ScaleRing }) .width(250) .height(250) .color(#007DFF) .backgroundColor(#333333) .style({ strokeWidth: 20, scaleCount: 24, scaleWidth: 4 }); Column({ space: 8 }) { Text(${this.progressValue}) .fontSize(48) .fontWeight(FontWeight.Bold) .fontColor(#FFFFFF); Text(得分) .fontSize(16) .fontColor(#FFFFFF); } } .margin({ bottom: 40 }); Slider({ value: this.progressValue, min: 0, max: 100, step: 1 }) .width(200) .onChange((value: number) { this.progressValue value; }); } .justifyContent(FlexAlign.Center) .alignItems(HorizontalAlign.Center) .height(100%) .width(100%) .backgroundColor(#1A1A2E);}}5.4.3 效果展示深色背景营造仪表盘氛围带刻度的环形进度条24个刻度刻度宽度4vp进度条宽度20vp前景色蓝色背景色黑色中心显示大字体得分和得分标签底部滑块可调节进度值六、进阶技巧6.1 自定义进度条颜色6.1.1 使用渐变颜色typescriptProgress({ value: 50, type: ProgressType.Ring }).width(200).height(200).color(‘#007DFF’) // 纯色6.1.2 使用资源文件在resources/base/element/color.json中定义颜色json{“color”: [{“name”: “progress_primary”,“value”: “#007DFF”},{“name”: “progress_background”,“value”: “#E8E8E8”}]}在代码中引用typescriptProgress({ value: 50, type: ProgressType.Ring }).width(200).height(200).color(r(′app.color.progressprimary′)).backgroundColor(r(app.color.progress_primary)) .backgroundColor(r(′app.color.progressp​rimary′)).backgroundColor(r(‘app.color.progress_background’))6.2 进度条动画控制6.2.1 使用setInterval实现动画typescriptprivate startAnimation() {this.timerId setInterval(() {if (this.progressValue 100) {this.progressValue 1;} else {clearInterval(this.timerId);}}, 50);}6.2.2 使用animation属性typescriptState progressValue: number 0;build() {Progress({ value: this.progressValue, type: ProgressType.Ring }).width(200).height(200).animation({duration: 1000,curve: Curve.EaseOut});}6.3 进度条与其他组件联动6.3.1 与Slider组件联动typescriptState progressValue: number 50;build() {Column() {Progress({ value: this.progressValue, type: ProgressType.Ring }).width(200).height(200);Slider({ value: this.progressValue, min: 0, max: 100, step: 1 }) .width(200) .onChange((value: number) { this.progressValue value; });}}6.3.2 与Button组件联动typescriptState progressValue: number 0;build() {Column() {Progress({ value: this.progressValue, type: ProgressType.Ring }).width(200).height(200);Button(开始) .onClick(() { this.progressValue 100; }); Button(重置) .onClick(() { this.progressValue 0; });}}6.4 进度条嵌套布局6.4.1 双层环形进度条typescriptStack({ alignContent: Alignment.Center }) {Progress({ value: 80, total: 100, type: ProgressType.Ring }).width(200).height(200).color(‘#007DFF’).style({ strokeWidth: 10 });Progress({ value: 60, total: 100, type: ProgressType.Ring }).width(160).height(160).color(‘#00C853’).style({ strokeWidth: 10 });Text(‘双进度’).fontSize(16).fontWeight(FontWeight.Bold);}6.4.2 环形进度条与图标组合typescriptStack({ alignContent: Alignment.Center }) {Progress({ value: 75, type: ProgressType.Ring }).width(120).height(120).color(‘#007DFF’).style({ strokeWidth: 8 });Image($r(‘app.media.icon’)).width(40).height(40);}6.5 进度条样式定制6.5.1 阴影效果typescriptProgress({ value: 50, type: ProgressType.Ring }).width(200).height(200).style({ shadow: true });6.5.2 扫描效果typescriptProgress({ value: 50, type: ProgressType.Ring }).width(200).height(200).style({scanEffect: {enable: true,duration: 2000,color: ‘#007DFF’}});七、常见问题与解决方案7.1 问题一ProgressType.Circular不存在问题描述编译报错Property Circular does not exist on type typeof ProgressType原因分析ProgressType枚举中没有Circular值Circular是LoadingProgressStyle枚举中的值不属于ProgressType。解决方案使用ProgressType.Ring代替typescript// 错误Progress({ value: 50, type: ProgressType.Circular })// 正确Progress({ value: 50, type: ProgressType.Ring })7.2 问题二无法找到ohos.arkui.advanced模块问题描述编译报错Cannot find module ohos.arkui.advanced原因分析ohos.arkui.advanced模块不存在或未安装。解决方案ProgressType在ArkTS中是全局可用的无需导入typescript// 错误import { ProgressType } from ‘ohos.arkui.advanced’;// 正确// 直接使用ProgressType无需导入Progress({ value: 50, type: ProgressType.Ring })7.3 问题三使用any/unknown类型报错问题描述编译报错Use explicit types instead of any, unknown原因分析ArkTS编译器禁止使用any和unknown类型。解决方案使用明确的类型typescript// 错误private timerId: number | null null;this.timerId setInterval(…) as unknown as number;// 正确private timerId: number 0;this.timerId setInterval(…);7.4 问题四资源名称不存在问题描述编译报错Unknown resource name page_title_font_size原因分析引用的资源名称在资源文件中不存在。解决方案检查资源文件使用正确的资源名称typescript// 错误.fontSize($r(‘app.float.page_title_font_size’))// 正确假设float.json中定义了page_text_font_size.fontSize($r(‘app.float.page_text_font_size’))7.5 问题五进度条不显示问题描述Progress组件在页面中不显示。原因分析尺寸未设置或设置为0布局容器没有设置高度颜色与背景色相同解决方案typescriptColumn() {Progress({ value: 50, type: ProgressType.Ring }).width(200) // 设置宽度.height(200) // 设置高度.color(‘#007DFF’) // 设置前景色.backgroundColor(‘#E8E8E8’) // 设置背景色}.height(‘100%’) // 设置容器高度.width(‘100%’)7.6 问题六进度条动画不流畅问题描述进度条在值变化时动画不流畅有卡顿现象。原因分析更新频率过高或过低布局层级过深同时更新多个状态解决方案typescript// 合理设置更新频率this.timerId setInterval(() {this.progressValue 1;}, 50); // 50ms更新一次较为流畅// 简化布局结构Stack({ alignContent: Alignment.Center }) {Progress({ value: this.progressValue, type: ProgressType.Ring }).width(200).height(200);Text(${this.progressValue}%);}八、最佳实践总结8.1 代码规范使用State管理状态进度值应使用State装饰器管理确保状态变化时自动更新UI避免使用any/unknown类型ArkTS编译器禁止使用这些类型应使用明确的类型声明合理使用资源系统颜色、字体大小等应定义在资源文件中便于统一管理和主题切换添加适当的注释代码应添加清晰的注释说明组件的用途和关键逻辑8.2 性能优化避免过度渲染只在必要时更新进度值避免频繁的状态变更简化布局结构避免嵌套过深的布局容器减少渲染开销合理使用动画动画会增加性能开销应根据实际需求选择合适的动画方式及时清理定时器在页面销毁时清理定时器避免内存泄漏8.3 用户体验提供清晰的视觉反馈进度条的颜色、尺寸应与页面整体风格协调显示进度数值在进度条附近显示具体的进度数值便于用户了解当前状态提供交互方式如滑块调节、按钮控制等增强用户参与感考虑无障碍访问确保进度条信息可以被屏幕阅读器识别8.4 兼容性考虑API版本兼容性Progress组件从API version 7开始支持某些属性有版本限制设备适配确保进度条在不同屏幕尺寸和分辨率上正常显示横竖屏适配考虑横竖屏切换时的布局变化九、总结本文详细介绍了鸿蒙HarmonyOS NEXT中Progress组件的环形进度条ProgressType.Ring布局方式涵盖了组件基础、核心属性、布局方式、实战案例、进阶技巧和常见问题等方面。通过本文的学习开发者可以掌握以下技能理解Progress组件的基本概念和API掌握环形进度条的核心属性和样式配置学会使用ArkUI布局容器构建灵活的界面布局能够实现动态进度动画和多进度条对比展示了解常见问题的解决方案和最佳实践环形进度条作为一种重要的信息展示方式在应用开发中具有广泛的应用场景。希望本文能够帮助开发者更好地理解和使用这一组件提升应用的用户体验和视觉效果。附录附录AProgressType枚举完整定义typescriptenum ProgressType {Linear 0, // 线性样式Ring 1, // 环形无刻度样式ScaleRing 2, // 环形有刻度样式Eclipse 3, // 圆形样式Capsule 4 // 胶囊样式}附录B完整示例代码typescriptEntryComponentstruct Index {State progressValue: number 0;private timerId: number 0;aboutToAppear() {this.startProgressAnimation();}aboutToDisappear() {if (this.timerId ! 0) {clearInterval(this.timerId);this.timerId 0;}}private startProgressAnimation() {this.timerId setInterval(() {this.progressValue 2;if (this.progressValue 100) {this.progressValue 0;}}, 100);}build() {Column() {Text(‘仪表盘’).fontSize($r(‘app.float.page_text_font_size’)).fontWeight(FontWeight.Bold).margin({ bottom: 40 });Stack({ alignContent: Alignment.Center }) { Progress({ value: this.progressValue, total: 100, type: ProgressType.Ring }) .width(200) .height(200) .color(#007DFF) .backgroundColor(#E8E8E8) .style({ strokeWidth: 15 }); Text(${Math.floor(this.progressValue)}%) .fontSize(32) .fontWeight(FontWeight.Bold) .fontColor(#333333); } .margin({ bottom: 40 }); Text(当前进度) .fontSize(18) .fontColor(#666666); Text(进度值: ${this.progressValue.toFixed(1)} / 100) .fontSize(14) .fontColor(#999999) .margin({ top: 8 }); } .justifyContent(FlexAlign.Center) .alignItems(HorizontalAlign.Center) .height(100%) .width(100%) .backgroundColor(#F5F5F5);}}附录C参考资料HarmonyOS官方文档https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-basic-components-progressOpenHarmony官方文档https://gitee.com/openharmony/docs/tree/master/zh-cn/application-dev/uiArkUI组件参考https://developer.huawei.com/consumer/cn/doc/harmonyos-references/arkui-api