项目已开源，开源地址： https://gitcode.com/nutpi/HarmonyosNextCaseStudyTutorial ， 欢迎fork & star
效果演示
1. 引言
进度条是应用程序中常见的UI元素，用于直观地展示任务完成进度或数据加载状态。在HarmonyOS NEXT中，使用RelativeContainer可以轻松实现功能丰富、视觉精美的进度条。本教程将详细讲解如何利用RelativeContainer的锚点系统构建动态进度条，帮助你掌握这一实用技术。
2. 进度条的基本原理
进度条通常由两部分组成：背景轨道和进度指示器。背景轨道表示任务的总量，进度指示器表示已完成的部分。通过调整进度指示器的宽度，可以直观地展示完成比例。
2.1 进度条的关键特性
- 视觉反馈：直观展示任务完成进度
- 动态更新：随着任务进行实时更新
- 自定义样式：可以根据应用风格自定义外观
- 精确控制：准确反映实际进度百分比
3. 案例分析：垂直方向偏移布局实现进度条
3.1 完整代码
@Component export struct ProgressBar { @State progress: number = 0.5; // 0-1 之间的进度值 build() { RelativeContainer() { // 背景轨道（固定宽度） Column() .width('100%') .height(10) .backgroundColor('#EEEEEE') .borderRadius(5) .alignRules({ top: { anchor: "__container__", align: VerticalAlign.Top }, left: { anchor: "__container__", align: HorizontalAlign.Start }, right: { anchor: "__container__", align: HorizontalAlign.End } }) .id('track') // 进度条（动态宽度） Column() .width(this.progress * 100 + '%') // 根据进度调整宽度 .height(10) .backgroundColor('#007DFF') .borderRadius(5) .alignRules({ top: { anchor: "track", align: VerticalAlign.Top }, left: { anchor: "track", align: HorizontalAlign.Start } }) .id('progress') } .width('100%') .height(10) } }
3.2 代码详解
3.2.1 状态变量定义
@State progress: number = 0.5; // 0-1 之间的进度值
这里定义了一个状态变量progress，用于存储进度值。进度值范围为0到1，表示完成百分比。使用@State装饰器使其成为响应式状态，当进度值变化时，UI会自动更新。
3.2.2 RelativeContainer容器设置
RelativeContainer() { // 子组件 } .width('100%') .height(10)
这部分代码创建了一个RelativeContainer容器，并设置了以下属性：
属性 |
值 |
说明 |
width |
'100%' |
容器宽度为父容器的100% |
height |
10 |
容器高度为10vp |
这些设置确保了进度条容器能够横向填满父容器，同时高度固定为10vp，符合常见进度条的视觉比例。
3.2.3 背景轨道设置
Column() .width('100%') .height(10) .backgroundColor('#EEEEEE') .borderRadius(5) .alignRules({ top: { anchor: "__container__", align: VerticalAlign.Top }, left: { anchor: "__container__", align: HorizontalAlign.Start }, right: { anchor: "__container__", align: HorizontalAlign.End } }) .id('track')
背景轨道的关键属性设置：
属性 |
值 |
说明 |
width |
'100%' |
轨道宽度为父容器的100% |
height |
10 |
轨道高度为10vp |
backgroundColor |
'#EEEEEE' |
背景色为浅灰色 |
borderRadius |
5 |
边框圆角为5vp，使轨道呈现为圆角矩形 |
alignRules.top |
{ anchor: "container", align: VerticalAlign.Top } |
顶部对齐容器顶部 |
alignRules.left |
{ anchor: "container", align: HorizontalAlign.Start } |
左侧对齐容器左侧 |
alignRules.right |
{ anchor: "container", align: HorizontalAlign.End } |
右侧对齐容器右侧 |
id |
'track' |
为轨道分配ID，使其可以被进度指示器引用 |
这里使用了Column组件作为背景轨道，并通过alignRules设置使其填满整个容器宽度。通过设置id为'track'，使其可以被进度指示器作为锚点引用。
3.2.4 进度指示器设置
Column() .width(this.progress * 100 + '%') // 根据进度调整宽度 .height(10) .backgroundColor('#007DFF') .borderRadius(5) .alignRules({ top: { anchor: "track", align: VerticalAlign.Top }, left: { anchor: "track", align: HorizontalAlign.Start } }) .id('progress')
进度指示器的关键属性设置：
属性 |
值 |
说明 |
width |
this.progress * 100 + '%' |
宽度根据进度值动态计算，范围为0%到100% |
height |
10 |
高度为10vp，与背景轨道相同 |
backgroundColor |
'#007DFF' |
背景色为蓝色，表示已完成部分 |
borderRadius |
5 |
边框圆角为5vp，与背景轨道相同 |
alignRules.top |
{ anchor: "track", align: VerticalAlign.Top } |
顶部对齐背景轨道顶部 |
alignRules.left |
{ anchor: "track", align: HorizontalAlign.Start } |
左侧对齐背景轨道左侧 |
id |
'progress' |
为进度指示器分配ID |
这里的关键是width属性的设置。通过将状态变量progress(范围0-1)转换为百分比字符串(范围0%-100%)，实现了进度指示器宽度的动态调整。当progress值变化时，进度指示器的宽度会自动更新，从而直观地展示进度变化。
通过将背景轨道作为锚点，确保进度指示器始终位于背景轨道的左侧，并与背景轨道顶部对齐，实现了精确的定位。
4. 进度条的高级功能实现
4.1 进度动画效果
要为进度变化添加平滑动画效果，可以使用HarmonyOS的动画API：
// 在状态变化时添加动画 .animation({ duration: 300, // 动画持续时间300ms curve: Curve.EaseOut // 缓出动画曲线 })
4.2 进度文本显示
可以在进度条上方或内部添加文本，显示具体的进度百分比：
Text(Math.floor(this.progress * 100) + '%') .fontSize(12) .fontColor('#FFFFFF') .alignRules({ center: { anchor: "progress", align: VerticalAlign.Center }, right: { anchor: "progress", align: HorizontalAlign.End }, })
4.3 自定义进度条样式
可以根据需要自定义进度条的样式，例如：
- 更改颜色和透明度
- 添加渐变背景
- 使用不同的形状（圆形、半圆等）
- 添加阴影或边框效果
5. 进度条的实际应用场景
进度条在以下场景中特别有用：
- 文件上传/下载：显示上传或下载进度
- 数据加载：指示数据加载状态
- 任务执行：展示任务完成进度
- 表单填写：指示表单填写完成度
- 多步骤流程：展示用户在多步骤流程中的位置
6. 总结
使用RelativeContainer实现进度条是一种灵活且精确的方法。
