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各进度条基础属性效果。 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环形进度条视觉属性。 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 build() { 389 Column({ space: 15 }) { 390 Text('Gradient Color').fontSize(9).fontColor(0xCCCCCC).width('90%') 391 Progress({ value: 70, total: 100, type: ProgressType.Ring }) 392 .width(100).style({ strokeWidth: 20 }) 393 .color(this.gradientColor) 394 395 Text('Shadow').fontSize(9).fontColor(0xCCCCCC).width('90%') 396 Progress({ value: 70, total: 100, type: ProgressType.Ring }) 397 .width(120).color(Color.Orange) 398 .style({ strokeWidth: 20, shadow: true }) 399 }.width('100%').padding({ top: 5 }) 400 } 401} 402``` 403 404 405### 示例3 406 407环形进度条动效。 408 409```ts 410// xxx.ets 411@Entry 412@Component 413struct ProgressExample { 414 private gradientColor: LinearGradient = new LinearGradient([{ color: Color.Yellow, offset: 0.5 }, 415 { color: Color.Orange, offset: 1.0 }]) 416 build() { 417 Column({ space: 15 }) { 418 Text('Loading Effect').fontSize(9).fontColor(0xCCCCCC).width('90%') 419 Progress({ value: 0, total: 100, type: ProgressType.Ring }) 420 .width(100).color(Color.Blue) 421 .style({ strokeWidth: 20, status: ProgressStatus.LOADING }) 422 423 Text('Scan Effect').fontSize(9).fontColor(0xCCCCCC).width('90%') 424 Progress({ value: 30, total: 100, type: ProgressType.Ring }) 425 .width(100).color(Color.Orange) 426 .style({ strokeWidth: 20, enableScanEffect: true }) 427 }.width('100%').padding({ top: 5 }) 428 } 429} 430``` 431 432 433### 示例4 434 435胶囊形进度条视觉属性。 436 437```ts 438// xxx.ets 439@Entry 440@Component 441struct ProgressExample { 442 443 build() { 444 Column({ space: 15 }) { 445 Row({ space: 40 }) { 446 Progress({ value: 100, total: 100,type: ProgressType.Capsule }).width(100).height(50) 447 .style({borderColor: Color.Blue, borderWidth: 1, content: 'Installing...', 448 font: {size: 13, style: FontStyle.Normal}, fontColor: Color.Gray, 449 enableScanEffect: false, showDefaultPercentage: false}) 450 } 451 }.width('100%').padding({ top: 5 }) 452 } 453} 454``` 455 456 457### 示例5 458 459进度平滑动效。 460 461```ts 462// xxx.ets 463@Entry 464@Component 465struct Index { 466 @State value: number = 0 467 468 build() { 469 Column({space: 10}) { 470 Text('enableSmoothEffect: true').fontSize(9).fontColor(0xCCCCCC).width('90%').margin(5) 471 .margin({top: 20}) 472 Progress({value: this.value, total: 100, type:ProgressType.Linear}) 473 .style({strokeWidth: 10, enableSmoothEffect: true}) 474 475 Text('enableSmoothEffect: false').fontSize(9).fontColor(0xCCCCCC).width('90%').margin(5) 476 Progress({value: this.value, total: 100, type:ProgressType.Linear}) 477 .style({strokeWidth: 10, enableSmoothEffect: false}) 478 479 Button('value +10').onClick(() => { 480 this.value += 10 481 }) 482 .width(75) 483 .height(15) 484 .fontSize(9) 485 } 486 .width('50%') 487 .height('100%') 488 .margin({left:20}) 489 } 490} 491 492``` 493 494 495### 示例6 496 497该示例实现了自定义进度条的功能，自定义实现星形，其中总进度为3，且当前值可通过按钮进行增减，达到的进度被填充自定义颜色。 498 499```ts 500// xxx.ets 501class MyProgressModifier implements ContentModifier<ProgressConfiguration> { 502 color: Color = Color.White 503 504 505 constructor(color:Color) { 506 this.color = color 507 } 508 applyContent() : WrappedBuilder<[ProgressConfiguration]> 509 { 510 return wrapBuilder(myProgress) 511 } 512} 513 514@Builder function myProgress(config: ProgressConfiguration ) { 515 516 Column({space:30}) { 517 Text("当前进度：" + config.value + "/" + config.total).fontSize(20) 518 Row() { 519 Flex({ justifyContent: FlexAlign.SpaceBetween }) { 520 Path() 521 .width('30%') 522 .height('30%') 523 .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') 524 .fill(config.enabled && config.value >=1 ? (config.contentModifier as MyProgressModifier).color : Color.White) 525 .stroke(Color.Black) 526 .strokeWidth(3) 527 Path() 528 .width('30%') 529 .height('30%') 530 .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') 531 .fill(config.enabled && config.value >=2 ? (config.contentModifier as MyProgressModifier).color : Color.White) 532 .stroke(Color.Black) 533 .strokeWidth(3) 534 Path() 535 .width('30%') 536 .height('30%') 537 .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') 538 .fill(config.enabled && config.value >=3 ? (config.contentModifier as MyProgressModifier).color : Color.White) 539 .stroke(Color.Black) 540 .strokeWidth(3) 541 }.width('100%') 542 } 543 }.margin({bottom:100}) 544} 545 546@Entry 547@Component 548struct Index { 549 @State currentValue: number = 0 550 modifier = new MyProgressModifier(Color.Red) 551 @State myModifier:(MyProgressModifier | undefined) = this.modifier 552 build() { 553 Column() { 554 Progress({ value: this.currentValue, total: 3, type: ProgressType.Ring}).contentModifier(this.modifier) 555 Button('Progress++').onClick(()=>{ 556 if (this.currentValue < 3) { 557 this.currentValue += 1 558 } 559 }).width('30%') 560 Button('addProgress--').onClick(()=>{ 561 if (this.currentValue > 0) { 562 this.currentValue -= 1 563 } 564 }).width('30%') 565 }.width('100%').height('100%') 566 } 567} 568 569``` 570 571 572### 示例7 573 574该示例展示了如何配置隐私隐藏，效果展示需要卡片框架支持 575 576```ts 577@Entry 578@Component 579struct ProgressExample { 580 build() { 581 Scroll() { 582 Column({ space: 15 }) { 583 Row() { 584 Progress({ value: 50, total: 100, type: ProgressType.Capsule }).width(100).height(50) 585 .style({ 586 borderColor: Color.Blue, 587 borderWidth: 1, 588 content: 'Installing...', 589 font: { size: 13, style: FontStyle.Normal }, 590 fontColor: Color.Gray, 591 enableScanEffect: false, 592 showDefaultPercentage: true 593 }) 594 .privacySensitive(true) 595 } 596 } 597 } 598 } 599} 600``` 601
