鸿蒙（HarmonyOS）项目方舟框架（ArkUI）之Progress进度条组件

一、操作环境

操作系统: Windows 10 专业版、IDE:DevEco Studio 3.1、SDK:HarmonyOS 3.1

二、Progress组件

进度条也是UI开发最常用的组件之一，进度条组件，用于显示内容加载或操作处理等进度。

接口

Progress(options: {value: number, total?: number, style?: ProgressStyle, type?: ProgressType})

创建进度组件，用于显示内容加载或操作处理进度。

参数

参数名	参数类型	必填	参数描述
value	number	是	指定当前进度值。
total	number	否	指定进度总长。默认值：100
type8+	ProgressType	否	指定进度条类型。默认值：ProgressType.Linear
styledeprecated	ProgressStyle	否	指定进度条类型。该参数从API Version8开始废弃，建议使用type替代。默认值：ProgressStyle.Linear

ProgressType枚举说明

名称	描述
Linear	线性样式。
Ring8+	环形无刻度样式，环形圆环逐渐显示至完全填充效果。
Eclipse	圆形样式，显示类似月圆月缺的进度展示效果，从月牙逐渐变化至满月。
ScaleRing8+	环形有刻度样式，显示类似时钟刻度形式的进度展示效果。
Capsule8+	胶囊样式，头尾两端圆弧处的进度展示效果与Eclipse相同；中段处的进度展示效果与Linear相同。

ProgressStyle枚举说明

名称	描述
Linear	线性样式。
Ring	环形无刻度样式，环形圆环逐渐显示至完全填充效果。
Eclipse	圆形样式，显示类似月圆月缺的进度展示效果，从月牙逐渐变化至满月。
ScaleRing	环形有刻度样式，显示类似时钟刻度形式的进度展示效果。
Capsule	胶囊样式，头尾两端圆弧处的进度展示效果与Eclipse相同；中段处的进度展示效果与Linear相同。

属性

名称	参数类型	描述
value	number	设置当前进度值。
color	ResourceColor	设置进度条前景色。
style8+	{ strokeWidth?: Length, scaleCount?: number, scaleWidth?: Length }	定义组件的样式。 strokeWidth: 设置进度条宽度。 scaleCount: 设置环形进度条总刻度数。 scaleWidth: 设置环形进度条刻度粗细。刻度粗细大于进度条宽度时，刻度粗细为系统默认粗细。

名称

参数类型

描述

value

number

设置当前进度值。

color

ResourceColor

设置进度条前景色。

style8+

{

strokeWidth?: Length,

scaleCount?: number,

scaleWidth?: Length

}

定义组件的样式。

strokeWidth: 设置进度条宽度。

scaleCount: 设置环形进度条总刻度数。

scaleWidth: 设置环形进度条刻度粗细。

刻度粗细大于进度条宽度时，刻度粗细为系统默认粗细。

三、示例

// @ts-nocheck
@Entry
@Component
struct Index {
  // @ts-ignore
  @State message: string = 'Hello World'

  build() {
    Row() {
      Column() {
        Progress({
          value: 85,                   // 设置当前进度
          type: ProgressType.ScaleRing // 设置进度条的样式为环形刻度样式
        })
          .size({width: 80, height: 80})

        Progress({
          value: 85,                   // 设置当前进度
          total: 100,                  // 设置进度总量
          type: ProgressType.Capsule   // 设置进度条的样式为胶囊样式
        })
          .size({width: 120, height: 50})

        Progress({
          value: 85,                   // 设置当前进度
          total: 100,                  // 设置进度总量
          type: ProgressType.Eclipse   // 设置进度条的样式为圆形样式
        })
          .size({width: 80, height: 80})

        Progress({
          value: 85,                   // 设置当前进度
          total: 100,                  // 设置进度总量
          type: ProgressType.Linear    // 设置进度条的样式为条形样式
        })
          .size({width: '100%', height: 40})

        Progress({
          value: 85,                   // 设置当前进度
          total: 100,                  // 设置进度总量
          type: ProgressType.Ring      // 设置进度条的样式为环形样式
        })
          .size({width: 80, height: 80})
      }
      .width('100%')
    }
    .height('100%')
  }
}