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