首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >【愚公系列】2023年12月 HarmonyOS教学课程 017-ArkUI组件(Progress)

【愚公系列】2023年12月 HarmonyOS教学课程 017-ArkUI组件(Progress)

作者头像
愚公搬代码
发布2025-06-02 16:24:05
发布2025-06-02 16:24:05
12500
代码可运行
举报
文章被收录于专栏:历史专栏历史专栏
运行总次数:0
代码可运行

🚀一、Progress

Progress组件是一种用户界面(UI)元素,用于向用户显示某些任务的进度。它通常以进度条的形式出现,显示任务完成的百分比。Progress组件可以在确定任务持续时间未知的情况下提供有用的反馈,帮助用户了解任务的状态和进度。

在Web应用程序中,Progress组件通常是使用HTML5的元素来实现的。元素必须至少包含一个value属性来指定进度的百分比,以及一个max属性来指定任务的预期完成时间。可以使用CSS样式来自定义元素的外观。

  • 在Android应用程序中,Progress组件通常是使用ProgressBar控件来实现的。ProgressBar控件可以在水平或垂直方向上显示进度条,还可以使用自定义颜色和样式。
  • 在iOS应用程序中,Progress组件通常是使用UIProgressView控件来实现的。UIProgressView控件可以在水平或垂直方向上显示进度条,还可以使用自定义颜色和样式。
  • 在HarmonyOS应用程序中,Progress组件通常是使用Progress控件来实现的。Progress控件可以在水平或垂直方向上显示进度条,还可以使用自定义颜色和样式。

🔎1.创建进度条

语法说明:

代码语言:javascript
代码运行次数:0
运行
复制
Progress(options: {value: number, total?: number, type?: ProgressType})

使用:

代码语言:javascript
代码运行次数:0
运行
复制
// xxx.ets
import promptAction from '@ohos.promptAction';
@Entry
@Component
struct Index {
  build() {
    Column() {
      Row() {
        Progress({ value: 24, total: 100, type: ProgressType.Linear })
      }
      Row() {

      }
      .backgroundColor(0xFFFFFF)
    }
    .padding(10)
    .backgroundColor(0xDCDCDC)
    .width('100%')
    .height('100%')
  }
}

🔎2.设置进度条样式

组件名称

Progress

可选类型

5种:ProgressType.Linear、ProgressType.Ring、ProgressType.ScaleRing、ProgressType.Eclipse、ProgressType.Capsule

设置方式

在创建时通过设置ProgressType枚举类型给type可选项指定Progress类型

样式概述

ProgressType.Linear

线性样式

ProgressType.Ring

环形无刻度样式

ProgressType.ScaleRing

环形有刻度样式

ProgressType.Eclipse

圆形样式

ProgressType.Capsule

胶囊样式

🦋2.1 线性样式
代码语言:javascript
代码运行次数:0
运行
复制
@Entry
@Component
struct Index {
  build() {
    Column() {
      Progress({ value: 20, total: 100, type: ProgressType.Linear }).width(200).height(50)
      Progress({ value: 20, total: 100, type: ProgressType.Linear }).width(50).height(200)
    }
    .padding(10)
    .backgroundColor(0xDCDCDC)
    .width('100%')
    .height('100%')
  }
}
🦋2.2 环形无刻度样式
代码语言:javascript
代码运行次数:0
运行
复制
@Entry
@Component
struct Index {
  build() {
    Column() {
      // 从左往右,1号环形进度条,默认前景色为蓝色,默认strokeWidth进度条宽度为2.0vp
      Progress({ value: 40, total: 150, type: ProgressType.Ring }).width(100).height(100)
      // 从左往右,2号环形进度条
      Progress({ value: 40, total: 150, type: ProgressType.Ring }).width(100).height(100)
        .color(Color.Grey)    // 进度条前景色为灰色
        .style({ strokeWidth: 15})    // 设置strokeWidth进度条宽度为15.0vp
    }
    .padding(10)
    .backgroundColor(0xDCDCDC)
    .width('100%')
    .height('100%')
  }
}
🦋2.3 环形有刻度样式
代码语言:javascript
代码运行次数:0
运行
复制
@Entry
@Component
struct Index {
  build() {
    Column() {
      Progress({ value: 20, total: 150, type: ProgressType.ScaleRing }).width(100).height(100)
        .backgroundColor(Color.Black)
        .style({ scaleCount: 20, scaleWidth: 5 })    // 设置环形有刻度进度条总刻度数为20,刻度宽度为5vp
      Progress({ value: 20, total: 150, type: ProgressType.ScaleRing }).width(100).height(100)
        .backgroundColor(Color.Black)
        .style({ strokeWidth: 15, scaleCount: 20, scaleWidth: 5 })    // 设置环形有刻度进度条宽度15,总刻度数为20,刻度宽度为5vp
      Progress({ value: 20, total: 150, type: ProgressType.ScaleRing }).width(100).height(100)
        .backgroundColor(Color.Black)
        .style({ strokeWidth: 15, scaleCount: 20, scaleWidth: 3 })    // 设置环形有刻度进度条宽度15,总刻度数为20,刻度宽度为3vp
    }
    .padding(10)
    .backgroundColor(0xDCDCDC)
    .width('100%')
    .height('100%')
  }
}
🦋2.4 圆形样式
代码语言:javascript
代码运行次数:0
运行
复制
@Entry
@Component
struct Index {
  build() {
    Column() {
      // 从左往右,1号圆形进度条,默认前景色为蓝色
      Progress({ value: 10, total: 150, type: ProgressType.Eclipse }).width(100).height(100)
      // 从左往右,2号圆形进度条,指定前景色为灰色
      Progress({ value: 20, total: 150, type: ProgressType.Eclipse }).color(Color.Grey).width(100).height(100)
    }
    .padding(10)
    .backgroundColor(0xDCDCDC)
    .width('100%')
    .height('100%')
  }
}
🦋2.5 胶囊样式
代码语言:javascript
代码运行次数:0
运行
复制
@Entry
@Component
struct Index {
  build() {
    Column() {
      Progress({ value: 10, total: 150, type: ProgressType.Capsule }).width(100).height(50)
      Progress({ value: 20, total: 150, type: ProgressType.Capsule }).width(50).height(100).color(Color.Grey)
      Progress({ value: 50, total: 150, type: ProgressType.Capsule }).width(50).height(100).backgroundColor(Color.Black)
    }
    .padding(10)
    .backgroundColor(0xDCDCDC)
    .width('100%')
    .height('100%')
  }
}

🔎3.案例

Progress组件通常用于展示某个任务或者进程的进度,可以向用户传达当前操作的进展情况。以下是Progress组件的一些实际应用场景:

  1. 文件上传或下载的进度条展示
  2. 音视频播放器中的播放进度条
  3. 游戏中的加载进度条
  4. 网页加载进度条
  5. 软件安装或更新的进度条展示
  6. 数据库操作的进度条展示
  7. 任务管理系统中的进度展示
  8. 项目管理系统中的任务进度展示

Progress组件可以直观地展示某个任务的完成情况,帮助用户了解任务的进度及剩余时间,提高用户体验和操作效率。

案例:

代码语言:javascript
代码运行次数:0
运行
复制
@Entry
@Component
struct Index {
  @State progressValue: number = 0    // 设置进度条初始值为0
  build() {
    Column() {
      Column() {
        Progress({value:0, total:100, type:ProgressType.Capsule}).width(200).height(50)
          .style({strokeWidth:50}).value(this.progressValue)
        Row().width('100%').height(5)
        Button("进度条+5")
          .onClick(()=>{
            this.progressValue += 5
            if (this.progressValue > 100){
              this.progressValue = 0
            }
          })
      }
    }.width('100%').height('100%')
  }
}

🚀感谢:给读者的一封信

亲爱的读者,

我在这篇文章中投入了大量的心血和时间,希望为您提供有价值的内容。这篇文章包含了深入的研究和个人经验,我相信这些信息对您非常有帮助。

如果您觉得这篇文章对您有所帮助,我诚恳地请求您考虑赞赏1元钱的支持。这个金额不会对您的财务状况造成负担,但它会对我继续创作高质量的内容产生积极的影响。

我之所以写这篇文章,是因为我热爱分享有用的知识和见解。您的支持将帮助我继续这个使命,也鼓励我花更多的时间和精力创作更多有价值的内容。

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2023-12-07,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 🚀一、Progress
    • 🔎1.创建进度条
    • 🔎2.设置进度条样式
      • 🦋2.1 线性样式
      • 🦋2.2 环形无刻度样式
      • 🦋2.3 环形有刻度样式
      • 🦋2.4 圆形样式
      • 🦋2.5 胶囊样式
    • 🔎3.案例
  • 🚀感谢:给读者的一封信
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档