47.[HarmonyOS NEXT RelativeContainer案例四] 构建动态进度条：相对布局实现精确控制与动画效果

项目已开源，开源地址： 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. 进度条的实际应用场景

进度条在以下场景中特别有用：

1. 文件上传/下载：显示上传或下载进度
2. 数据加载：指示数据加载状态
3. 任务执行：展示任务完成进度
4. 表单填写：指示表单填写完成度
5. 多步骤流程：展示用户在多步骤流程中的位置

6. 总结

使用RelativeContainer实现进度条是一种灵活且精确的方法。