HarmonyOS NEXT 案例实战之 Progress 进度条组件代码实现

精选原创

鱼弦CTO 2025-02-01 22:39:41 博主文章分类：基础 ©著作权

文章标签 进度条 UI 初始化 文章分类 HarmonyOS 后端开发 yyds干货盘点

©著作权归作者所有：来自51CTO博客作者鱼弦CTO的原创作品，请联系作者获取转载授权，否则将追究法律责任

HarmonyOS NEXT 案例实战之 Progress 进度条组件代码实现

应用使用场景

Progress 进度条组件用于在应用中显示任务的当前进度，常见于以下场景：

文件上传或下载的进度指示。
安装或更新软件时的状态展示。
在多步骤流程中，如注册或购买过程中的指引。

原理解释

进度条组件通过一个视觉化的方式来反馈当前任务的完成状态。它基于用户设置的最大值和当前值计算完成百分比，然后通过动画或直接变化的方式来更新 UI。

算法原理流程图

+---------------------------+
|   初始化 Progress 组件    |
+-------------+-------------+
              |
              v
+---------------------------+
| 设置进度条最大值与当前值  |
+-------------+-------------+
              |
              v
+---------------------------+
| 根据当前进度更新 UI       |
+-------------+-------------+
              |
              v
+---------------------------+
| 用户查看进度条变化        |
+---------------------------+

算法原理解释

初始化 Progress 组件：创建并配置组件的初始样式和参数。
设置进度条最大值与当前值：定义任务的总量和已完成部分。
根据当前进度更新 UI：动态调整进度条长度以反映任务进度。
用户查看进度条变化：通过 UI 提供直观的反馈给用户。

ArkTS + ArkUI 代码示例实现

import { Progress } from '@ohos/ui';

// 创建进度条组件
function createProgressBar() {
    const progressBar = new Progress({
        max: 100, // 最大值
        value: 0  // 当前进度值
    });

    progressBar.style = {
        width: '300px',
        height: '20px',
        backgroundColor: '#f0f0f0',
        progressColor: '#4caf50'
    };

    return progressBar;
}

// 更新进度值的函数
function updateProgress(progressBar: Progress, newValue: number) {
    progressBar.value = newValue;  // 更新当前值
    console.log(`Current progress: ${newValue}%`);
}

// 使用进度条组件
const progressBar = createProgressBar();
progressBar.show();  // 显示进度条

// 模拟进度更新
let simulatedProgress = 0;
const intervalId = setInterval(() => {
    if (simulatedProgress <= 100) {
        updateProgress(progressBar, simulatedProgress);
        simulatedProgress += 10;  // 每次增加10%
    } else {
        clearInterval(intervalId);  // 停止更新
        console.log('Progress complete!');
    }
}, 1000);  // 每秒更新一次