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