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

项目演示

一、概述与背景

1.1 鸿蒙HarmonyOS NEXT简介

HarmonyOS NEXT是华为公司推出的新一代智能终端操作系统，旨在打造万物互联的全场景智慧生活体验。作为HarmonyOS生态的重要组成部分，ArkTS（ArkUI 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组件的基本接口定义如下：

typescript
Progress(options: {value: number, total?: number, type?: ProgressType})

其中，options参数是一个对象，包含以下属性：

2.1.2 ProgressType枚举

ProgressType枚举定义了进度条的五种类型：

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等
• 透明度属性：opacity

2.2.2 组件特有属性

Progress组件还支持以下特有属性：

2.2.3 ProgressStyleOptions详解

ProgressStyleOptions是一个泛型类型，根据ProgressType的不同，支持不同的样式选项：

RingStyleOptions（环形无刻度样式）

ScaleRingStyleOptions（环形有刻度样式）

LinearStyleOptions（线性样式）

EclipseStyleOptions（圆形样式）

CapsuleStyleOptions（胶囊样式）

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值变化时，环形进度条会自动更新显示。

typescript
Progress({ value: 50, total: 100, type: ProgressType.Ring })

3.2.2 total属性

total属性用于设置进度总长，默认为100。进度百分比的计算公式为：percentage = value / total * 100%。

typescript
Progress({ 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’)

typescript
Progress({ value: 50, type: ProgressType.Ring })
.color(‘#007DFF’) // 蓝色进度条

3.2.4 backgroundColor属性

backgroundColor属性用于设置进度条背景色（未填充部分的颜色）。

typescript
Progress({ value: 50, type: ProgressType.Ring })
.color(‘#007DFF’)
.backgroundColor(‘#E8E8E8’) // 灰色背景

3.2.5 style属性

style属性用于设置进度条的样式选项，对于环形进度条，主要包括：

strokeWidth：设置进度条宽度（圆环粗细）

typescript
Progress({ value: 50, type: ProgressType.Ring })
.style({ strokeWidth: 15 }) // 设置圆环宽度为15vp

shadow：设置进度条阴影开关

typescript
Progress({ value: 50, type: ProgressType.Ring })
.style({ shadow: true }) // 启用阴影效果

scanEffect：设置扫描效果选项

typescript
Progress({ value: 50, type: ProgressType.Ring })
.style({
scanEffect: {
enable: true,
duration: 2000,
color: ‘#007DFF’
}
})

3.3 环形进度条的尺寸计算

3.3.1 基本尺寸设置

环形进度条的尺寸通过width和height属性设置：

typescript
Progress({ value: 50, type: ProgressType.Ring })
.width(200)
.height(200)

3.3.2 strokeWidth约束

当strokeWidth设置过大时，会自动调整：

• 如果strokeWidth >= 半径，默认修改为半径值的二分之一
• 半径 = Math.min(width, height) / 2

3.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布局实现环形进度条的居中显示：

typescript
Column() {
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布局在环形进度条内部添加文字或图标：

typescript
Stack({ 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组合布局实现多个环形进度条的排列：

typescript
Row() {
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实现更复杂的布局：

typescript
RelativeContainer() {
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 代码实现

typescript
@Entry
@Component
struct 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 代码实现

typescript
@Entry
@Component
struct 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 代码实现

typescript
@Entry
@Component
struct 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');

}

@Builder
buildProgressCard(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 代码实现

typescript
@Entry
@Component
struct 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 使用渐变颜色

typescript
Progress({ 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”
}
]
}

在代码中引用：

typescript
Progress({ 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实现动画

typescript
private startAnimation() {
this.timerId = setInterval(() => {
if (this.progressValue < 100) {
this.progressValue += 1;
} else {
clearInterval(this.timerId);
}
}, 50);
}

6.2.2 使用animation属性

typescript
@State 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组件联动

typescript
@State 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组件联动

typescript
@State 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 双层环形进度条

typescript
Stack({ 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 环形进度条与图标组合

typescript
Stack({ 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 阴影效果

typescript
Progress({ value: 50, type: ProgressType.Ring })
.width(200)
.height(200)
.style({ shadow: true });

6.5.2 扫描效果

typescript
Progress({ 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组件在页面中不显示。

原因分析

1. 尺寸未设置或设置为0
2. 布局容器没有设置高度
3. 颜色与背景色相同

解决方案

typescript
Column() {
Progress({ value: 50, type: ProgressType.Ring })
.width(200) // 设置宽度
.height(200) // 设置高度
.color(‘#007DFF’) // 设置前景色
.backgroundColor(‘#E8E8E8’) // 设置背景色
}
.height(‘100%’) // 设置容器高度
.width(‘100%’)

7.6 问题六：进度条动画不流畅

问题描述

进度条在值变化时动画不流畅，有卡顿现象。

原因分析

1. 更新频率过高或过低
2. 布局层级过深
3. 同时更新多个状态

解决方案

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 代码规范

1. 使用@State管理状态：进度值应使用@State装饰器管理，确保状态变化时自动更新UI
2. 避免使用any/unknown类型：ArkTS编译器禁止使用这些类型，应使用明确的类型声明
3. 合理使用资源系统：颜色、字体大小等应定义在资源文件中，便于统一管理和主题切换
4. 添加适当的注释：代码应添加清晰的注释，说明组件的用途和关键逻辑

8.2 性能优化

1. 避免过度渲染：只在必要时更新进度值，避免频繁的状态变更
2. 简化布局结构：避免嵌套过深的布局容器，减少渲染开销
3. 合理使用动画：动画会增加性能开销，应根据实际需求选择合适的动画方式
4. 及时清理定时器：在页面销毁时清理定时器，避免内存泄漏

8.3 用户体验

1. 提供清晰的视觉反馈：进度条的颜色、尺寸应与页面整体风格协调
2. 显示进度数值：在进度条附近显示具体的进度数值，便于用户了解当前状态
3. 提供交互方式：如滑块调节、按钮控制等，增强用户参与感
4. 考虑无障碍访问：确保进度条信息可以被屏幕阅读器识别

8.4 兼容性考虑

1. API版本兼容性：Progress组件从API version 7开始支持，某些属性有版本限制
2. 设备适配：确保进度条在不同屏幕尺寸和分辨率上正常显示
3. 横竖屏适配：考虑横竖屏切换时的布局变化

九、总结

本文详细介绍了鸿蒙HarmonyOS NEXT中Progress组件的环形进度条（ProgressType.Ring）布局方式，涵盖了组件基础、核心属性、布局方式、实战案例、进阶技巧和常见问题等方面。

通过本文的学习，开发者可以掌握以下技能：

1. 理解Progress组件的基本概念和API
2. 掌握环形进度条的核心属性和样式配置
3. 学会使用ArkUI布局容器构建灵活的界面布局
4. 能够实现动态进度动画和多进度条对比展示
5. 了解常见问题的解决方案和最佳实践

环形进度条作为一种重要的信息展示方式，在应用开发中具有广泛的应用场景。希望本文能够帮助开发者更好地理解和使用这一组件，提升应用的用户体验和视觉效果。

附录

附录A：ProgressType枚举完整定义

typescript
enum ProgressType {
Linear = 0, // 线性样式
Ring = 1, // 环形无刻度样式
ScaleRing = 2, // 环形有刻度样式
Eclipse = 3, // 圆形样式
Capsule = 4 // 胶囊样式
}

附录B：完整示例代码

typescript
@Entry
@Component
struct 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：参考资料

1. HarmonyOS官方文档：https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-basic-components-progress
2. OpenHarmony官方文档：https://gitee.com/openharmony/docs/tree/master/zh-cn/application-dev/ui
3. ArkUI组件参考：https://developer.huawei.com/consumer/cn/doc/harmonyos-references/arkui-api