1# 进度条 2 3 4Progress是进度条显示组件，显示内容通常为某次目标操作的当前进度。具体用法请参考[Progress](../reference/arkui-ts/ts-basic-components-progress.md)。 5 6 7## 创建进度条 8 9Progress通过调用接口来创建，接口调用形式如下： 10 11 12 13```ts 14Progress(options: {value: number, total?: number, type?: ProgressType}) 15``` 16 17 18该接口用于创建type样式的进度条，其中value用于设置初始进度值，total用于设置进度总长度，type决定Progress样式。 19 20 21 22```ts 23Progress({ value: 24, total: 100, type: ProgressType.Linear }) // 创建一个进度总长为100，初始进度值为24的线性进度条 24``` 25 26 27 28 29 30## 设置进度条样式 31 32Progress有5种可选类型，在创建时通过设置ProgressType枚举类型给type可选项指定Progress类型。其分别为：ProgressType.Linear（线性样式）、 ProgressType.Ring（环形无刻度样式）、ProgressType.ScaleRing（环形有刻度样式）、ProgressType.Eclipse（圆形样式）和ProgressType.Capsule（胶囊样式）。 33 34 35- 线性样式进度条（默认类型） 36 >**说明：** 37 > 38 > 从API version9开始，组件高度大于宽度的时候自适应垂直显示，相等时仍然保持水平显示。 39 40 41 ```ts 42 Progress({ value: 20, total: 100, type: ProgressType.Linear }).width(200).height(50) 43 Progress({ value: 20, total: 100, type: ProgressType.Linear }).width(50).height(200) 44 ``` 45 46  47 48- 环形无刻度样式进度条 49 50 ```ts 51 // 从左往右，1号环形进度条，默认前景色为蓝色，默认strokeWidth进度条宽度为2.0vp 52 Progress({ value: 40, total: 150, type: ProgressType.Ring }).width(100).height(100) 53 // 从左往右，2号环形进度条 54 Progress({ value: 40, total: 150, type: ProgressType.Ring }).width(100).height(100) 55 .color(Color.Grey) // 进度条前景色为灰色 56 .style({ strokeWidth: 15}) // 设置strokeWidth进度条宽度为15.0vp 57 ``` 58 59  60 61- 环形有刻度样式进度条 62 63 ```ts 64 Progress({ value: 20, total: 150, type: ProgressType.ScaleRing }).width(100).height(100) 65 .backgroundColor(Color.Black) 66 .style({ scaleCount: 20, scaleWidth: 5 }) // 设置环形有刻度进度条总刻度数为20，刻度宽度为5vp 67 Progress({ value: 20, total: 150, type: ProgressType.ScaleRing }).width(100).height(100) 68 .backgroundColor(Color.Black) 69 .style({ strokeWidth: 15, scaleCount: 20, scaleWidth: 5 }) // 设置环形有刻度进度条宽度15，总刻度数为20，刻度宽度为5vp 70 Progress({ value: 20, total: 150, type: ProgressType.ScaleRing }).width(100).height(100) 71 .backgroundColor(Color.Black) 72 .style({ strokeWidth: 15, scaleCount: 20, scaleWidth: 3 }) // 设置环形有刻度进度条宽度15，总刻度数为20，刻度宽度为3vp 73 ``` 74 75  76 77- 圆形样式进度条 78 79 ```ts 80 // 从左往右，1号圆形进度条，默认前景色为蓝色 81 Progress({ value: 10, total: 150, type: ProgressType.Eclipse }).width(100).height(100) 82 // 从左往右，2号圆形进度条，指定前景色为灰色 83 Progress({ value: 20, total: 150, type: ProgressType.Eclipse }).color(Color.Grey).width(100).height(100) 84 ``` 85 86  87 88- 胶囊样式进度条 89 >**说明：** 90 > 91 >- 头尾两端圆弧处的进度展示效果与ProgressType.Eclipse样式相同； 92 >- 中段处的进度展示效果为矩形状长条，与ProgressType.Linear线性样式相似； 93 > 94 >- 组件高度大于宽度的时候自适应垂直显示。 95 96 97 ```ts 98 Progress({ value: 10, total: 150, type: ProgressType.Capsule }).width(100).height(50) 99 Progress({ value: 20, total: 150, type: ProgressType.Capsule }).width(50).height(100).color(Color.Grey) 100 Progress({ value: 50, total: 150, type: ProgressType.Capsule }).width(50).height(100).backgroundColor(Color.Black) 101 ``` 102 103  104 105 106## 场景示例 107 108更新当前进度值，如应用安装进度条。可通过点击Button增加progressValue，.value()属性将progressValue设置给Progress组件，进度条组件即会触发刷新，更新当前进度。 109 110```ts 111@Entry 112@Component 113struct ProgressCase1 { 114 @State progressValue: number = 0 // 设置进度条初始值为0 115 build() { 116 Column() { 117 Column() { 118 Progress({value:0, total:100, type:ProgressType.Capsule}).width(200).height(50) 119 .style({strokeWidth:50}).value(this.progressValue) 120 Row().width('100%').height(5) 121 Button("进度条+5") 122 .onClick(()=>{ 123 this.progressValue += 5 124 if (this.progressValue > 100){ 125 this.progressValue = 0 126 } 127 }) 128 } 129 }.width('100%').height('100%') 130 } 131} 132``` 133 134 135 136
