1# Progress 2<!--Kit: ArkUI--> 3<!--Subsystem: ArkUI--> 4<!--Owner: @liyujie43--> 5<!--Designer: @weixin_52725220--> 6<!--Tester: @xiong0104--> 7<!--Adviser: @HelloCrease--> 8 9进度条组件，用于显示内容加载或操作处理等进度。 10 11> **说明：** 12> 13> 该组件从API version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 14 15 16## 子组件 17 18无 19 20## 接口 21 22Progress(options: ProgressOptions) 23 24创建进度条组件。 25 26**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。 27 28**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 29 30**系统能力：** SystemCapability.ArkUI.ArkUI.Full 31 32**参数：** 33 34| 参数名 | 类型 | 必填 | 说明 | 35| -------- | -------- | -------- | -------- | 36| options | [ProgressOptions](#progressoptions对象说明)| 是 | 按进度条类型不同，设置不同属性的进度条组件参数。 | 37 38## ProgressOptions对象说明 39 40进度条选项。 41 42**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 43 44**系统能力：** SystemCapability.ArkUI.ArkUI.Full 45 46| 名称 | 类型 | 只读 | 可选 | 说明 | 47| -------------------------- | ----------------------------------- | ---- | ---------------------------------------- | ---------------------------------------- | 48| value | number | 否 | 否 | 指定当前进度值。设置小于0的数值时置为0，设置大于total的数值时置为total。<br/>默认值：0<br/>取值范围：[0, total]<br/>**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。 | 49| total | number | 否 | 是 | 指定进度总长。设置小于等于0的数值时置为100。<br/>默认值：100<br/>取值范围：[0, 2147483647]<br/>**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。 | 50| type<sup>8+</sup> | [ProgressType](#progresstype8枚举说明) | 否 | 是 | 指定进度条类型。<br/>默认值：ProgressType.Linear<br/>**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。<br/>**说明：** 不同的type需分别对应相应的[style](#style8)属性设置，详细映射关系参考[ProgressStyleMap](#progressstylemap10对象说明)。 | 51| style<sup>(deprecated)</sup> | [ProgressStyle](#progressstyle枚举说明) | 否 | 是 | 指定进度条样式。<br/>该参数从API version8开始废弃，建议使用type替代。<br/>默认值：ProgressStyle.Linear | 52 53## ProgressType<sup>8+</sup>枚举说明 54 55进度条类型。 56 57**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。 58 59**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 60 61**系统能力：** SystemCapability.ArkUI.ArkUI.Full 62 63| 名称 | 值 | 说明 | 64| ---------------------- | - | ---------------------------------------- | 65| Linear | 0 | 线性样式。从API version 9开始，当高度大于宽度时，自适应垂直显示。 | 66| Ring | 1 | 环形无刻度样式，环形圆环逐渐显示直至完全填充。 | 67| Eclipse | 2 | 圆形样式，显示类似月圆月缺的进度展示效果，从月牙逐渐变化至满月。 | 68| ScaleRing | 3 | 环形有刻度样式，显示类似时钟刻度形式的进度展示效果。从API version 9开始，刻度外圈出现重叠时自动转换为环形无刻度进度条。 | 69| Capsule | 4 | 胶囊样式，头尾两端圆弧处的进度展示效果与Eclipse相同，中段的进度展示效果与Linear相同。当高度大于宽度时，自适应垂直显示。 | 70 71## ProgressStyle枚举说明 72 73进度条样式。 74 75**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。 76 77**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 78 79**系统能力：** SystemCapability.ArkUI.ArkUI.Full 80 81| 名称 | 值 | 说明 | 82| --------- | - | ---------------------------------------- | 83| Linear | - | 线性样式。 | 84| Ring<sup>8+</sup> | - | 环形圆环逐渐显示直至完全填充。 | 85| Eclipse | - | 圆形样式，显示类似月圆月缺的进度展示效果，从月牙逐渐变化至满月。 | 86| ScaleRing<sup>8+</sup> | - | 环形有刻度样式，显示类似时钟刻度形式的进度展示效果。 | 87| Capsule<sup>8+</sup> | - | 胶囊样式，头尾两端圆弧处的进度展示效果与Eclipse相同，中段的进度展示效果与Linear相同。当高度大于宽度时，自适应垂直显示。 | 88 89## ProgressStyleMap<sup>10+</sup>对象说明 90 91进度条类型和样式的映射表。 92 93**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 94 95**系统能力：** SystemCapability.ArkUI.ArkUI.Full 96 97| 名称 | 类型 | 98| --------- | ---------------------------------------- | 99| ProgressType.Linear | [LinearStyleOptions<sup>10+</sup>](#linearstyleoptions10) \| [ProgressStyleOptions](#progressstyleoptions8) | 100| ProgressType.Ring | [RingStyleOptions<sup>10+</sup>](#ringstyleoptions10) \| [ProgressStyleOptions](#progressstyleoptions8) | 101| ProgressType.Eclipse | [EclipseStyleOptions<sup>10+</sup>](#eclipsestyleoptions10) \| [ProgressStyleOptions](#progressstyleoptions8) | 102| ProgressType.ScaleRing| [ScaleRingStyleOptions<sup>10+</sup>](#scaleringstyleoptions10) \| [ProgressStyleOptions](#progressstyleoptions8) | 103| ProgressType.Capsule | [CapsuleStyleOptions<sup>10+</sup>](#capsulestyleoptions10) \| [ProgressStyleOptions](#progressstyleoptions8) | 104 105## 属性 106 107除支持[通用属性](ts-component-general-attributes.md)外，还支持以下属性： 108 109> **说明：** 110> 111> 该组件重写了通用属性[backgroundColor](ts-universal-attributes-background.md)，直接添加在Progress组件上，设置进度条的底色。如需设置整个Progress组件的背景色，需要在外层容器上添加backgroundColor，并用该容器包裹Progress组件。 112 113### value 114 115value(value: number) 116 117设置当前进度值。设置小于0的数值时置为0，设置大于total的数值时置为total。非法数值不生效。 118 119**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。 120 121**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 122 123**系统能力：** SystemCapability.ArkUI.ArkUI.Full 124 125**参数：** 126 127| 参数名 | 类型 | 必填 | 说明 | 128| ------ | ------ | ---- | ------------ | 129| value | number | 是 | 当前进度值。<br/> 默认值：0| 130 131### color 132 133color(value: ResourceColor | LinearGradient) 134 135设置进度条前景色。 136 137从API version 10开始支持利用LinearGradient设置Ring样式的渐变色。Ring类型不建议设置透明度，如需设置透明度，建议使用[DataPanel](ts-basic-components-datapanel.md)。 138 139**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用，暂不支持LinearGradient。 140 141**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 142 143**系统能力：** SystemCapability.ArkUI.ArkUI.Full 144 145**参数：** 146 147| 参数名 | 类型 | 必填 | 说明 | 148| ------ | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ | 149| value | [ResourceColor](ts-types.md#resourcecolor) \| [LinearGradient](ts-basic-components-datapanel.md#lineargradient10) | 是 | 进度条前景色。<br/>默认值：<br/>- Capsule：<br/> API version 9及以下：'\#ff007dff'<br/> API version 10：'\#33006cde'<br/> API version 11及以上：'\#33007dff'<br/>- Ring：<br/> API version 9及以下：'\#ff007dff'<br/> API version 10及以上：起始端：'\#ff86c1ff'，结束端：'\#ff254ff7'<br/>- 其他样式：'\#ff007dff' | 150 151### style<sup>8+</sup> 152 153style(value: ProgressStyleOptions \| CapsuleStyleOptions \| RingStyleOptions \| LinearStyleOptions \| ScaleRingStyleOptions \| EclipseStyleOptions) 154 155设置组件的样式。 156 157**系统能力：** SystemCapability.ArkUI.ArkUI.Full 158 159**参数：** 160 161| 参数名 | 类型 | 必填 | 说明 | 162| ------ | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ | 163| value | [ProgressStyleOptions<sup>8+</sup>](#progressstyleoptions8) \| [CapsuleStyleOptions<sup>10+</sup>](#capsulestyleoptions10) \| <br/>[RingStyleOptions<sup>10+</sup>](#ringstyleoptions10) \| [LinearStyleOptions<sup>10+</sup>](#linearstyleoptions10) \| <br/>[ScaleRingStyleOptions<sup>10+</sup>](#scaleringstyleoptions10) \| [EclipseStyleOptions<sup>10+</sup>](#eclipsestyleoptions10) | 是 | 组件的样式。<br/>- CapsuleStyleOptions：设置Capsule的样式。<br/>- RingStyleOptions：设置Ring的样式。<br/>- LinearStyleOptions：设置Linear的样式。<br/>- ScaleRingStyleOptions：设置ScaleRing的样式。<br/>- EclipseStyleOptions：设置Eclipse的样式。<br/>- ProgressStyleOptions：仅可设置各类型进度条的strokeWidth、scaleCount、scaleWidth，仅对支持这些样式设置的进度条生效。 | 164 165### contentModifier<sup>12+</sup> 166contentModifier(modifier:ContentModifier\<ProgressConfiguration\>) 167 168定制progress内容区的方法。 169 170**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 171 172**系统能力：** SystemCapability.ArkUI.ArkUI.Full 173 174**参数：** 175| 参数名 | 类型 | 必填 | 说明 | 176| ------ | ------ | ---- | ------------ | 177| modifier | [ContentModifier\<ProgressConfiguration\>](#progressconfiguration12) | 是 | 在progress组件上，定制内容区的方法。<br/>modifier： 内容修改器，开发者需要自定义class实现ContentModifier接口。 | 178 179### privacySensitive<sup>12+</sup> 180 181privacySensitive(isPrivacySensitiveMode: Optional\<boolean\>) 182 183设置隐私敏感。 184 185**卡片能力：** 从API version 12开始，该接口支持在ArkTS卡片中使用。 186 187**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 188 189**系统能力：** SystemCapability.ArkUI.ArkUI.Full 190 191**参数：** 192 193| 参数名 | 类型 | 必填 | 说明 | 194| ------ | --------------------------------------------------------- | ---- | ----------------------------------------------------- | 195| isPrivacySensitiveMode | [Optional\<boolean\>] | 是 | 设置隐私敏感，隐私模式下进度清零，文字将被遮罩。true表示打开隐私敏感，false表示关闭隐私敏感。<br/>**说明：** <br/>设置null表示不敏感。<!--Del--><br/>需要在卡片中使用Progress，并用[FormComponent](./ts-basic-components-formcomponent-sys.md)组件设置[隐私遮罩](./ts-universal-attributes-obscured.md)属性，显示卡片时才有隐私遮罩效果。<!--DelEnd--> | 196 197## ProgressConfiguration<sup>12+</sup> 198 199进度条配置。继承自[CommonConfiguration](ts-universal-attributes-content-modifier.md#commonconfigurationt)。 200 201**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 202 203**系统能力：** SystemCapability.ArkUI.ArkUI.Full 204 205| 名称 | 类型 | 只读 | 可选 |说明 | 206| ------ | ------ | ------- |------------|------------| 207| value | number | 否 | 否 | 当前进度值。当设置的数值小于0时，将其置为0。当设置的数值大于total时，将其置为total。<br/>默认值：0<br/>取值范围：[0, total] | 208| total | number | 否 | 否 | 进度总长。<br/>取值范围：[0, 2147483647] | 209 210## CommonProgressStyleOptions<sup>10+</sup> 211 212进度条通用样式选项。 213 214**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 215 216**系统能力：** SystemCapability.ArkUI.ArkUI.Full 217 218| 名称 | 类型 | 只读 | 可选 | 说明 | 219| ------------ | ---------------------------- | ---- | ------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------ | 220| enableSmoothEffect | boolean | 否 | 是 | 进度平滑动效的开关。开启平滑动效后设置进度，进度会从当前值渐变至设定值，页面会有进度变化的动效；否则进度从当前值突变至设定值，页面无动效。<br/>默认值：true，true表示开启进度平滑动效，false表示关闭进度平滑动效。 | 221 222## ScanEffectOptions<sup>10+</sup> 223 224扫光效果选项。 225 226**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 227 228**系统能力：** SystemCapability.ArkUI.ArkUI.Full 229 230| 名称 | 类型 | 只读 | 可选 | 说明 | 231| ------------- | ------- | ---- | -------- | -------- | 232| enableScanEffect | boolean | 否 | 是 | 扫光效果的开关。<br/>默认值：false，false表示关闭扫光效果，true表示开启扫光效果。仅支持Linear、Ring、Capsule类型的进度条。 | 233 234## ProgressStyleOptions<sup>8+</sup> 235 236进度条样式选项。 237 238继承自[CommonProgressStyleOptions](#commonprogressstyleoptions10)。 239 240**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。 241 242**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 243 244**系统能力：** SystemCapability.ArkUI.ArkUI.Full 245 246| 名称 | 类型 | 只读 | 可选 | 说明 | 247| ------------ | ---------------------------- | ---- | ------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------ | 248| strokeWidth | [Length](ts-types.md#length) | 否 | 是 | 设置进度条宽度（不支持百分比设置）。<br/>默认值：4.0vp | 249| scaleCount | number | 否 | 是 | 设置环形进度条总刻度数。<br/>默认值：120 <br/>取值范围：[2, min(width, height)/scaleWidth/2/π]，超出取值范围时，样式显示为环形无刻度进度条。默认情况下宽高最小为77vp。 | 250| scaleWidth | [Length](ts-types.md#length) | 否 | 是 | 设置环形进度条刻度粗细（不支持百分比设置）。刻度粗细大于进度条宽度时，为系统默认粗细。<br/>默认值：2.0vp | 251 252## CapsuleStyleOptions<sup>10+</sup> 253 254胶囊样式选项。 255 256继承自[ScanEffectOptions](#scaneffectoptions10)和[CommonProgressStyleOptions](#commonprogressstyleoptions10)。 257 258**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 259 260**系统能力：** SystemCapability.ArkUI.ArkUI.Full 261 262| 名称 | 类型 | 只读 | 可选 | 说明 | 263| ------------- | ------- | ---- | -------- | -------- | 264| borderColor | [ResourceColor](ts-types.md#resourcecolor) | 否 | 是 | 内描边颜色。<br/>默认值：<br/>API version 10：'\#33006cde'<br/>API version 11及以上：'\#33007dff' | 265| borderWidth | [Length](ts-types.md#length) | 否 | 是 | 内描边宽度（不支持百分比设置）。<br/>默认值：1vp | 266| content | [ResourceStr](ts-types.md#resourcestr) | 否 | 是 | 文本内容，应用可自定义。<br>从API version 20开始，支持Resource类型。 | 267| font | [Font](ts-types.md#font) | 否 | 是 | 文本样式。<br/>默认值：<br/>- 文本大小（不支持百分比设置）：12fp <br/>其他文本参数跟随text组件的主题值。| 268| fontColor | [ResourceColor](ts-types.md#resourcecolor) | 否 | 是 | 文本颜色。<br/>默认值：'\#ff182431' | 269| showDefaultPercentage | boolean | 否 | 是 | 显示百分比文本的开关。开启后，进度条上显示当前进度的百分比。设置了content属性时该属性不生效。<br/>默认值：false，false表示不显示百分比文本，true表示显示百分比文本。 | 270| borderRadius<sup>18+</sup> | [LengthMetrics](../js-apis-arkui-graphics.md#lengthmetrics12) | 否 | 是 | Capsule进度条圆角半径（不支持百分比设置）。<br/>取值范围：[0, height/2]。默认值：height / 2。<br/>设置非法数值时，按照默认值处理。 | 271 272## RingStyleOptions<sup>10+</sup> 273 274环形无刻度样式选项。 275 276继承自[ScanEffectOptions](#scaneffectoptions10)和[CommonProgressStyleOptions](#commonprogressstyleoptions10)。 277 278**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 279 280**系统能力：** SystemCapability.ArkUI.ArkUI.Full 281 282| 名称 | 类型 | 只读 | 可选 | 说明 | 283| ------------- | ---------------------------- | ---- | ------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------ | 284| strokeWidth | [Length](ts-types.md#length) | 否 | 是 | 设置进度条宽度（不支持百分比设置）。当宽度大于等于半径时，宽度默认修改为半径值的二分之一。<br/>默认值：4.0vp | 285| shadow | boolean | 否 | 是 | 进度条阴影开关。<br/>默认值：false，false表示关闭进度条阴影，true表示打开进度条阴影。 | 286| status | [ProgressStatus<sup>10+</sup>](#progressstatus10枚举说明) | 否 | 是 | 设置进度条状态。当设置为ProgressStatus.LOADING时会开启检查更新动效，此时设置进度值不生效。当从ProgressStatus.LOADING设置为ProgressStatus.PROGRESSING时，检查更新动效会执行到终点再停止。<br/>默认值：ProgressStatus.PROGRESSING | 287 288## LinearStyleOptions<sup>10+</sup> 289 290线性样式选项。 291 292继承自[ScanEffectOptions](#scaneffectoptions10)和[CommonProgressStyleOptions](#commonprogressstyleoptions10)。 293 294**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 295 296**系统能力：** SystemCapability.ArkUI.ArkUI.Full 297 298| 名称 | 类型 | 只读 | 可选 | 说明 | 299| ------------- | ---------------------------- | ---- | ------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------ | 300| strokeWidth | [Length](ts-types.md#length) | 否 | 是 | 设置进度条宽度（不支持百分比设置）。<br/>默认值：4.0vp | 301| strokeRadius | [PX](ts-types.md#px10) \| [VP](ts-types.md#vp10) \| [LPX](ts-types.md#lpx10) \| [Resource](ts-types.md#resource)| 否 | 是 | 设置线性进度条的圆角半径。<br/>取值范围[0, strokeWidth / 2]。默认值：strokeWidth / 2。 | 302 303## ScaleRingStyleOptions<sup>10+</sup> 304 305环形有刻度样式选项。 306 307继承自[CommonProgressStyleOptions](#commonprogressstyleoptions10)。 308 309**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 310 311**系统能力：** SystemCapability.ArkUI.ArkUI.Full 312 313| 名称 | 类型 | 只读 | 可选 | 说明 | 314| ------------ | ---------------------------- | ---- | ------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------ | 315| strokeWidth | [Length](ts-types.md#length) | 否 | 是 | 设置进度条宽度（不支持百分比设置）。<br/>默认值：4.0vp | 316| scaleCount | number | 否 | 是 | 设置环形进度条总刻度数。<br/>默认值：120 <br/>取值范围：[2, min(width, height)/scaleWidth/2/π]，超出取值范围时，样式显示为环形无刻度进度条。默认情况下宽高最小为77vp。 | 317| scaleWidth | [Length](ts-types.md#length) | 否 | 是 | 设置环形进度条刻度粗细（不支持百分比设置）。刻度粗细大于进度条宽度时，为系统默认粗细。<br/>默认值：2.0vp | 318 319## EclipseStyleOptions<sup>10+</sup> 320 321圆形样式选项。圆形样式的显示类似月圆月缺的进度展示效果，从月牙逐渐变化至满月。 322 323继承自[CommonProgressStyleOptions](#commonprogressstyleoptions10)。 324 325**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 326 327**系统能力：** SystemCapability.ArkUI.ArkUI.Full 328 329## ProgressStatus<sup>10+</sup>枚举说明 330 331进度条的当前状态。 332 333**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 334 335**系统能力：** SystemCapability.ArkUI.ArkUI.Full 336 337| 名称 | 值 | 说明 | 338| ----------------------- | ---------------- | ---------------- | 339| LOADING | - | 加载中。 | 340| PROGRESSING | - | 进度更新中。 | 341 342## 事件 343 344支持[通用事件](ts-component-general-events.md)。 345 346## 示例 347 348### 示例1（设置进度条的类型） 349 350该示例通过type属性，实现了设置进度条类型的功能。 351 352```ts 353// xxx.ets 354@Entry 355@Component 356struct ProgressExample { 357 build() { 358 Column({ space: 15 }) { 359 Text('Linear Progress').fontSize(9).fontColor(0xCCCCCC).width('90%') 360 Progress({ value: 10, type: ProgressType.Linear }).width(200) 361 Progress({ value: 20, total: 150, type: ProgressType.Linear }).color(Color.Grey).value(50).width(200) 362 363 364 Text('Eclipse Progress').fontSize(9).fontColor(0xCCCCCC).width('90%') 365 Row({ space: 40 }) { 366 Progress({ value: 10, type: ProgressType.Eclipse }).width(100) 367 Progress({ value: 20, total: 150, type: ProgressType.Eclipse }).color(Color.Grey).value(50).width(100) 368 } 369 370 Text('ScaleRing Progress').fontSize(9).fontColor(0xCCCCCC).width('90%') 371 Row({ space: 40 }) { 372 Progress({ value: 10, type: ProgressType.ScaleRing }).width(100) 373 Progress({ value: 20, total: 150, type: ProgressType.ScaleRing }) 374 .color(Color.Grey).value(50).width(100) 375 .style({ strokeWidth: 15, scaleCount: 15, scaleWidth: 5 }) 376 } 377 378 // scaleCount和scaleWidth效果对比 379 Row({ space: 40 }) { 380 Progress({ value: 20, total: 150, type: ProgressType.ScaleRing }) 381 .color(Color.Grey).value(50).width(100) 382 .style({ strokeWidth: 20, scaleCount: 20, scaleWidth: 5 }) 383 Progress({ value: 20, total: 150, type: ProgressType.ScaleRing }) 384 .color(Color.Grey).value(50).width(100) 385 .style({ strokeWidth: 20, scaleCount: 30, scaleWidth: 3 }) 386 } 387 388 Text('Ring Progress').fontSize(9).fontColor(0xCCCCCC).width('90%') 389 Row({ space: 40 }) { 390 Progress({ value: 10, type: ProgressType.Ring }).width(100) 391 Progress({ value: 20, total: 150, type: ProgressType.Ring }) 392 .color(Color.Grey).value(50).width(100) 393 .style({ strokeWidth: 20 }) 394 } 395 396 Text('Capsule Progress').fontSize(9).fontColor(0xCCCCCC).width('90%') 397 Row({ space: 40 }) { 398 Progress({ value: 10, type: ProgressType.Capsule }).width(100).height(50) 399 Progress({ value: 20, total: 150, type: ProgressType.Capsule }) 400 .color(Color.Grey) 401 .value(50) 402 .width(100) 403 .height(50) 404 } 405 }.width('100%').margin({ top: 30 }) 406 } 407} 408``` 409 410 411 412### 示例2（设置环形进度条属性） 413 414该示例通过[style](#style8)接口的strokeWidth和shadow属性，实现了环形进度条视觉属性设置功能。 415 416```ts 417// xxx.ets 418@Entry 419@Component 420struct ProgressExample { 421 private gradientColor: LinearGradient = new LinearGradient([{ color: Color.Yellow, offset: 0.5 }, 422 { color: Color.Orange, offset: 1.0 }]) 423 424 build() { 425 Column({ space: 15 }) { 426 Text('Gradient Color').fontSize(9).fontColor(0xCCCCCC).width('90%') 427 Progress({ value: 70, total: 100, type: ProgressType.Ring }) 428 .width(100).style({ strokeWidth: 20 }) 429 .color(this.gradientColor) 430 431 Text('Shadow').fontSize(9).fontColor(0xCCCCCC).width('90%') 432 Progress({ value: 70, total: 100, type: ProgressType.Ring }) 433 .width(120).color(Color.Orange) 434 .style({ strokeWidth: 20, shadow: true }) 435 }.width('100%').padding({ top: 5 }) 436 } 437} 438``` 439 440 441### 示例3（设置环形进度条动画） 442 443该示例通过[style](#style8)接口的status和enableScanEffect属性，实现了环形进度条动效的开关功能。 444 445```ts 446// xxx.ets 447@Entry 448@Component 449struct ProgressExample { 450 build() { 451 Column({ space: 15 }) { 452 Text('Loading Effect').fontSize(9).fontColor(0xCCCCCC).width('90%') 453 Progress({ value: 0, total: 100, type: ProgressType.Ring }) 454 .width(100).color(Color.Blue) 455 .style({ strokeWidth: 20, status: ProgressStatus.LOADING }) 456 457 Text('Scan Effect').fontSize(9).fontColor(0xCCCCCC).width('90%') 458 Progress({ value: 30, total: 100, type: ProgressType.Ring }) 459 .width(100).color(Color.Orange) 460 .style({ strokeWidth: 20, enableScanEffect: true }) 461 }.width('100%').padding({ top: 5 }) 462 } 463} 464``` 465 466 467### 示例4（设置胶囊形进度条属性） 468 469该示例通过[style](#style8)接口的borderColor、borderWidth、content、font、fontColor、enableScanEffect、showDefaultPercentage属性，实现胶囊形进度条的视觉属性设置。 470 471```ts 472// xxx.ets 473@Entry 474@Component 475struct ProgressExample { 476 build() { 477 Column({ space: 15 }) { 478 Row({ space: 40 }) { 479 Progress({ value: 100, total: 100, type: ProgressType.Capsule }).width(100).height(50) 480 .style({ 481 borderColor: Color.Blue, 482 borderWidth: 1, 483 content: 'Installing...', 484 font: { size: 13, style: FontStyle.Normal }, 485 fontColor: Color.Gray, 486 enableScanEffect: false, 487 showDefaultPercentage: false 488 }) 489 } 490 }.width('100%').padding({ top: 5 }) 491 } 492} 493``` 494 495 496### 示例5（设置进度平滑动效） 497 498该示例通过[style](#style8)接口的enableSmoothEffect属性，实现了进度平滑动效开关的功能。 499 500```ts 501// xxx.ets 502@Entry 503@Component 504struct Index { 505 @State value: number = 0; 506 507 build() { 508 Column({ space: 10 }) { 509 Text('enableSmoothEffect: true') 510 .fontSize(9) 511 .fontColor(0xCCCCCC) 512 .width('90%') 513 .margin(5) 514 .margin({ top: 20 }) 515 Progress({ value: this.value, total: 100, type: ProgressType.Linear }) 516 .style({ strokeWidth: 10, enableSmoothEffect: true }) 517 518 Text('enableSmoothEffect: false').fontSize(9).fontColor(0xCCCCCC).width('90%').margin(5) 519 Progress({ value: this.value, total: 100, type: ProgressType.Linear }) 520 .style({ strokeWidth: 10, enableSmoothEffect: false }) 521 522 Button('value +10').onClick(() => { 523 this.value += 10; 524 }) 525 .width(75) 526 .height(15) 527 .fontSize(9) 528 } 529 .width('50%') 530 .height('100%') 531 .margin({ left: 20 }) 532 } 533} 534 535``` 536 537 538### 示例6（设置定制内容区） 539 540该示例通过[contentModifier](#contentmodifier12)接口，实现了自定义进度条的功能，自定义实现星形，其中总进度为3，且当前值可通过按钮进行增减，达到的进度使用自定义颜色填充。 541 542```ts 543// xxx.ets 544class MyProgressModifier implements ContentModifier<ProgressConfiguration> { 545 color: Color = Color.White; 546 547 constructor(color: Color) { 548 this.color = color; 549 } 550 551 applyContent(): WrappedBuilder<[ProgressConfiguration]> { 552 return wrapBuilder(myProgress); 553 } 554} 555 556@Builder 557function myProgress(config: ProgressConfiguration) { 558 559 Column({ space: 30 }) { 560 Text("当前进度：" + config.value + "/" + config.total).fontSize(20) 561 Row() { 562 Flex({ justifyContent: FlexAlign.SpaceBetween }) { 563 Path() 564 .width('30%') 565 .height('30%') 566 .commands('M108 0 L141 70 L218 78.3 L162 131 L175 205 L108 170 L41.2 205 L55 131 L1 78 L75 68 L108 0 Z') 567 .fill(config.enabled && config.value >= 1 ? (config.contentModifier as MyProgressModifier).color : 568 Color.White) 569 .stroke(Color.Black) 570 .strokeWidth(3) 571 Path() 572 .width('30%') 573 .height('30%') 574 .commands('M108 0 L141 70 L218 78.3 L162 131 L175 205 L108 170 L41.2 205 L55 131 L1 78 L75 68 L108 0 Z') 575 .fill(config.enabled && config.value >= 2 ? (config.contentModifier as MyProgressModifier).color : 576 Color.White) 577 .stroke(Color.Black) 578 .strokeWidth(3) 579 Path() 580 .width('30%') 581 .height('30%') 582 .commands('M108 0 L141 70 L218 78.3 L162 131 L175 205 L108 170 L41.2 205 L55 131 L1 78 L75 68 L108 0 Z') 583 .fill(config.enabled && config.value >= 3 ? (config.contentModifier as MyProgressModifier).color : 584 Color.White) 585 .stroke(Color.Black) 586 .strokeWidth(3) 587 }.width('100%') 588 } 589 }.margin({ bottom: 100 }) 590} 591 592@Entry 593@Component 594struct Index { 595 @State currentValue: number = 0; 596 modifier = new MyProgressModifier(Color.Red); 597 @State myModifier: (MyProgressModifier | undefined) = this.modifier; 598 599 build() { 600 Column() { 601 Progress({ value: this.currentValue, total: 3, type: ProgressType.Ring }).contentModifier(this.modifier) 602 Button('Progress++').onClick(() => { 603 if (this.currentValue < 3) { 604 this.currentValue += 1; 605 } 606 }).width('30%') 607 Button('Progress--').onClick(() => { 608 if (this.currentValue > 0) { 609 this.currentValue -= 1; 610 } 611 }).width('30%') 612 }.width('100%').height('100%') 613 } 614} 615 616``` 617 618 619### 示例7（设置隐私隐藏） 620 621该示例通过[privacySensitive](#privacysensitive12)属性，实现了隐私隐藏效果。效果展示需要卡片框架支持。 622 623```ts 624@Entry 625@Component 626struct ProgressExample { 627 build() { 628 Row() { 629 Column({ space: 15 }) { 630 Progress({ value: 33, total: 100, type: ProgressType.Capsule }).width(300).height(50) 631 .color(Color.Blue) 632 .style({ 633 borderWidth: 5, 634 font: { size: 13, style: FontStyle.Normal }, 635 enableScanEffect: false, 636 showDefaultPercentage: true 637 }) 638 .privacySensitive(true) 639 Progress({ value: 33, total: 100, type: ProgressType.Capsule }).width(300).height(50) 640 .color(Color.Blue) 641 .style({ 642 borderWidth: 5, 643 content: 'Installing...', 644 font: { size: 13, style: FontStyle.Normal }, 645 enableScanEffect: false, 646 }) 647 .privacySensitive(true) 648 } 649 } 650 } 651} 652``` 653 654 655### 示例8（设置capsule进度条圆角半径） 656 657该示例通过borderRadius属性，实现了capsule类型进度条圆角半径设置。 658 659```ts 660import { LengthMetrics } from '@kit.ArkUI'; 661 662@Entry 663@Component 664struct ProgressExample { 665 build() { 666 Column({ space: 15 }) { 667 Text('Capsule Progress').fontSize(9).width('90%') 668 Row({ space: 15 }) { 669 Progress({ value: 30, total: 100, type: ProgressType.Capsule }) 670 .style({ content: "默认圆角", borderWidth: 5 }) 671 .width(100) 672 .height(60) 673 } 674 675 Row({ space: 15 }) { 676 Progress({ value: 30, total: 100, type: ProgressType.Capsule }) 677 .style({ content: "圆角为20vp", borderWidth: 5, borderRadius: LengthMetrics.vp(20) }) 678 .width(100) 679 .height(60) 680 } 681 } 682 .width('100%') 683 .margin({ top: 30 }) 684 } 685} 686 687``` 688 689
