鸿蒙5.0进阶开发：UI开发-进度条 (Progress)

 往期鸿蒙全套实战文章必看：（文中附带鸿蒙全栈学习资料）

• 鸿蒙开发核心知识点，看这篇文章就够了
  
• 最新版！鸿蒙HarmonyOS Next应用开发实战学习门路
  
• 鸿蒙HarmonyOS NEXT开发技术最全学习门路指南
  
• 鸿蒙应用开发实战项目，看这一篇文章就够了（部门项目附源码）
  

---

进度条 (Progress)

Progress是进度条表现组件，表现内容通常为目的操作的当前进度。
创建进度条

Progress通过调用接口来创建，接口调用形式如下：

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

复制代码

此中，value用于设置初始进度值，total用于设置进度总长度，type用于设置Progress样式。

1. Progress({ value: 24, total: 100, type: ProgressType.Linear }) // 创建一个进度总长为100，初始进度值为24的线性进度条

复制代码

设置进度条样式

Progress有5种可选范例，通过ProgressType可以设置进度条样式，ProgressType范例包括：ProgressType.Linear（线性样式）、 ProgressType.Ring（环形无刻度样式）、ProgressType.ScaleRing（环形有刻度样式）、ProgressType.Eclipse（圆形样式）和ProgressType.Capsule（胶囊样式）。

• 线性样式进度条（默认范例）
         说明
      从API version9开始，组件高度大于宽度时，自顺应垂直表现；组件高度即是宽度时，保持水平表现。
     
  1. Progress({ value: 20, total: 100, type: ProgressType.Linear }).width(200).height(50)
  2. Progress({ value: 20, total: 100, type: ProgressType.Linear }).width(50).height(200)

  复制代码
  
  
  
  
  
• 环形无刻度样式进度条
  
  1. // 从左往右，1号环形进度条，默认前景色为蓝色渐变，默认strokeWidth进度条宽度为2.0vp
  2. Progress({ value: 40, total: 150, type: ProgressType.Ring }).width(100).height(100)
  3. // 从左往右，2号环形进度条
  4. Progress({ value: 40, total: 150, type: ProgressType.Ring }).width(100).height(100)
  5.     .color(Color.Grey)    // 进度条前景色为灰色
  6.     .style({ strokeWidth: 15})    // 设置strokeWidth进度条宽度为15.0vp

  复制代码
  
  
  
  
  
• 环形有刻度样式进度条
  
  1. Progress({ value: 20, total: 150, type: ProgressType.ScaleRing }).width(100).height(100)
  2.     .backgroundColor(Color.Black)
  3.     .style({ scaleCount: 20, scaleWidth: 5 })    // 设置环形有刻度进度条总刻度数为20，刻度宽度为5vp
  4. Progress({ value: 20, total: 150, type: ProgressType.ScaleRing }).width(100).height(100)
  5.     .backgroundColor(Color.Black)
  6.     .style({ strokeWidth: 15, scaleCount: 20, scaleWidth: 5 })    // 设置环形有刻度进度条宽度15，总刻度数为20，刻度宽度为5vp
  7. Progress({ value: 20, total: 150, type: ProgressType.ScaleRing }).width(100).height(100)
  8.     .backgroundColor(Color.Black)
  9.     .style({ strokeWidth: 15, scaleCount: 20, scaleWidth: 3 })    // 设置环形有刻度进度条宽度15，总刻度数为20，刻度宽度为3vp

  复制代码
  
  
  
  
  
• 圆形样式进度条
  
  1. // 从左往右，1号圆形进度条，默认前景色为蓝色
  2. Progress({ value: 10, total: 150, type: ProgressType.Eclipse }).width(100).height(100)
  3. // 从左往右，2号圆形进度条，指定前景色为灰色
  4. Progress({ value: 20, total: 150, type: ProgressType.Eclipse }).color(Color.Grey).width(100).height(100)

  复制代码
  
  
  
  
  
• 胶囊样式进度条
         说明
  
  
  
  • 头尾两端圆弧处的进度展示效果与ProgressType.Eclipse样式相同。
    
  • 中段处的进度展示效果为矩形状长条，与ProgressType.Linear线性样式相似。
    
  • 组件高度大于宽度的时候自顺应垂直表现。
    
     
  1. Progress({ value: 10, total: 150, type: ProgressType.Capsule }).width(100).height(50)
  2. Progress({ value: 20, total: 150, type: ProgressType.Capsule }).width(50).height(100).color(Color.Grey)
  3. Progress({ value: 50, total: 150, type: ProgressType.Capsule }).width(50).height(100).color(Color.Blue).backgroundColor(Color.Black)

  复制代码
  
  
  
  
  
  

场景示例

更新当前进度值，如应用安装进度条，可通过点击Button增长progressValue，value属性将progressValue设置给Progress组件，进度条组件即会触发革新，更新当前进度。

1. @Entry
2. @Component
3. struct ProgressCase1 {
4.   @State progressValue: number = 0    // 设置进度条初始值为0
5.   build() {
6.     Column() {
7.       Column() {
8.         Progress({value:0, total:100, type:ProgressType.Capsule}).width(200).height(50).value(this.progressValue)
9.         Row().width('100%').height(5)
10.         Button("进度条+5")
11.           .onClick(()=>{
12.             this.progressValue += 5
13.             if (this.progressValue > 100){
14.               this.progressValue = 0
15.             }
16.           })
17.       }
18.     }.width('100%').height('100%')
19.   }
20. }

复制代码

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。