1# Progress 2 3进度条组件，用于显示内容加载或操作处理等进度。 4 5> **说明：** 6> 7> 该组件从API version7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 8 9 10## 子组件 11 12无 13 14 15## 接口 16 17Progress(options: {value: number, total?: number, type?: ProgressType}) 18 19创建进度组件，用于显示内容加载或操作处理进度。 20 21从API version 9开始，该接口支持在ArkTS卡片中使用。 22 23**参数:** 24 25| 参数名 | 参数类型 | 必填 | 参数描述 | 26| -------------------------- | ----------------------------------- | ---- | ---------------------------------------- | 27| value | number | 是 | 指定当前进度值。设置小于0的数值时置为0，设置大于total的数值时置为total。<br/>从API version 9开始，该接口支持在ArkTS卡片中使用。 | 28| total | number | 否 | 指定进度总长。<br/>默认值：100<br/>从API version 9开始，该接口支持在ArkTS卡片中使用。 | 29| type<sup>8+</sup> | [ProgressType](#progresstype枚举说明) | 否 | 指定进度条类型。<br/>默认值：ProgressType.Linear<br/>从API version 9开始，该接口支持在ArkTS卡片中使用。 | 30| style<sup>deprecated</sup> | [ProgressStyle](#progressstyle枚举说明) | 否 | 指定进度条样式。<br/>该参数从API version8开始废弃，建议使用type替代。<br/>默认值：ProgressStyle.Linear | 31 32## ProgressType枚举说明 33 34从API version 9开始，该接口支持在ArkTS卡片中使用。 35 36| 名称 | 描述 | 37| ---------------------- | ---------------------------------------- | 38| Linear | 线性样式。从API version9开始，高度大于宽度的时候自适应垂直显示。 | 39| Ring<sup>8+</sup> | 环形无刻度样式，环形圆环逐渐显示至完全填充效果。 | 40| Eclipse<sup>8+</sup> | 圆形样式，显示类似月圆月缺的进度展示效果，从月牙逐渐变化至满月。 | 41| ScaleRing<sup>8+</sup> | 环形有刻度样式，显示类似时钟刻度形式的进度展示效果。从API version9开始，刻度外圈出现重叠的时候自动转换为环形无刻度进度条。 | 42| Capsule<sup>8+</sup> | 胶囊样式，头尾两端圆弧处的进度展示效果与Eclipse相同；中段处的进度展示效果与Linear相同。高度大于宽度的时候自适应垂直显示。 | 43 44## ProgressStyle枚举说明 45 46从API version 9开始，该接口支持在ArkTS卡片中使用。 47 48| 名称 | 描述 | 49| --------- | ---------------------------------------- | 50| Linear | 线性样式。 | 51| Ring | 环形无刻度样式，环形圆环逐渐显示至完全填充效果。 | 52| Eclipse | 圆形样式，显示类似月圆月缺的进度展示效果，从月牙逐渐变化至满月。 | 53| ScaleRing | 环形有刻度样式，显示类似时钟刻度形式的进度展示效果。 | 54| Capsule | 胶囊样式，头尾两端圆弧处的进度展示效果与Eclipse相同；中段处的进度展示效果与Linear相同。高度大于宽度的时候自适应垂直显示。 | 55 56## 属性 57 58| 名称 | 参数类型 | 描述 | 59| ------------------ | ---------------------------------------- | ---------------------------------------- | 60| value | number | 设置当前进度值。设置小于0的数值时置为0，设置大于total的数值时置为total。非法数值不生效。<br/>从API version 9开始，该接口支持在ArkTS卡片中使用。 | 61| color | [ResourceColor](ts-types.md#resourcecolor) | 设置进度条前景色。<br/>默认值：'\#ff007dff'<br/>从API version 9开始，该接口支持在ArkTS卡片中使用。 | 62| backgroundColor | [ResourceColor](ts-types.md#resourcecolor) | 设置进度条底色。<br/>默认值：'\#19182431'<br/>从API version 9开始，该接口支持在ArkTS卡片中使用。 | 63| style<sup>8+</sup> | {<br/>strokeWidth?: [Length](ts-types.md#length),<br/>scaleCount?: number,<br/>scaleWidth?: [Length](ts-types.md#length)<br/>} | 定义组件的样式。<br/>- strokeWidth: 设置进度条宽度（不支持百分比设置）。从API version9开始，环形进度条设置宽度大于等于半径时，默认修改宽度至半径值的二分之一。<br/>默认值：4.0Vp<br/>- scaleCount: 设置环形进度条总刻度数。<br>默认值：120<br/>- scaleWidth: 设置环形进度条刻度粗细（不支持百分比设置），刻度粗细大于进度条宽度时，为系统默认粗细。<br>默认值：2.0Vp<br/>从API version 9开始，该接口支持在ArkTS卡片中使用。 | 64 65## 事件 66 67支持[通用事件](ts-universal-events-click.md)。 68 69## 示例 70 71```ts 72// xxx.ets 73@Entry 74@Component 75struct ProgressExample { 76 build() { 77 Column({ space: 15 }) { 78 Text('Linear Progress').fontSize(9).fontColor(0xCCCCCC).width('90%') 79 Progress({ value: 10, type: ProgressType.Linear }).width(200) 80 Progress({ value: 20, total: 150, type: ProgressType.Linear }).color(Color.Grey).value(50).width(200) 81 82 83 Text('Eclipse Progress').fontSize(9).fontColor(0xCCCCCC).width('90%') 84 Row({ space: 40 }) { 85 Progress({ value: 10, type: ProgressType.Eclipse }).width(100) 86 Progress({ value: 20, total: 150, type: ProgressType.Eclipse }).color(Color.Grey).value(50).width(100) 87 } 88 89 Text('ScaleRing Progress').fontSize(9).fontColor(0xCCCCCC).width('90%') 90 Row({ space: 40 }) { 91 Progress({ value: 10, type: ProgressType.ScaleRing }).width(100) 92 Progress({ value: 20, total: 150, type: ProgressType.ScaleRing }) 93 .color(Color.Grey).value(50).width(100) 94 .style({ strokeWidth: 15, scaleCount: 15, scaleWidth: 5 }) 95 } 96 97 // scaleCount和scaleWidth效果对比 98 Row({ space: 40 }) { 99 Progress({ value: 20, total: 150, type: ProgressType.ScaleRing }) 100 .color(Color.Grey).value(50).width(100) 101 .style({ strokeWidth: 20, scaleCount: 20, scaleWidth: 5 }) 102 Progress({ value: 20, total: 150, type: ProgressType.ScaleRing }) 103 .color(Color.Grey).value(50).width(100) 104 .style({ strokeWidth: 20, scaleCount: 30, scaleWidth: 3 }) 105 } 106 107 Text('Ring Progress').fontSize(9).fontColor(0xCCCCCC).width('90%') 108 Row({ space: 40 }) { 109 Progress({ value: 10, type: ProgressType.Ring }).width(100) 110 Progress({ value: 20, total: 150, type: ProgressType.Ring }) 111 .color(Color.Grey).value(50).width(100) 112 .style({ strokeWidth: 20, scaleCount: 30, scaleWidth: 20 }) 113 } 114 115 Text('Capsule Progress').fontSize(9).fontColor(0xCCCCCC).width('90%') 116 Row({ space: 40 }) { 117 Progress({ value: 10, type: ProgressType.Capsule }).width(100).height(50) 118 Progress({ value: 20, total: 150, type: ProgressType.Capsule }) 119 .color(Color.Grey) 120 .value(50) 121 .width(100) 122 .height(50) 123 } 124 }.width('100%').margin({ top: 30 }) 125 } 126} 127``` 128 129 130
