1# ProgressButton
2
3
4文本下载按钮，可显示具体下载进度。
5
6
7> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
8> 该组件从API Version 10开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
9
10
11## 导入模块
12
13```
14import { ProgressButton } from '@ohos.arkui.advanced.ProgressButton'
15```
16
17
18## ProgressButton
19
20ProgressButton({progress: number, content: string, progressButtonWidth?: Length, clickCallback: () => void, enable: boolean})
21
22**装饰器类型：**\@Component
23
24**系统能力：** SystemCapability.ArkUI.ArkUI.Full
25
26**参数：**
27
28| 参数名 | 参数类型 | 必填 | 装饰器类型 | 描述 |
29| -------- | -------- | -------- | -------- | -------- |
30| progress | number | 是 | \@Prop | 下载按钮的当前进度值。 |
31| content | string | 是 |  | 下载按钮的文本。 |
32| progressButtonWidth | Length | 否 | - | 下载按钮的宽度。 |
33| clickCallback | void | 是 |  | 下载按钮的点击回调。 |
34| enable | boolean | 是 |  | 下载按钮是否可以点击，<br/>默认为true。 |
35
36
37## 示例
38
39```
40import { ProgressButton } from '@ohos.arkui.advanced.ProgressButton'
41@Entry
42@Component
43struct Index {
44  @State halfProgress: number = 50
45  @State smallProgress: number = 8
46  @State bigProgress: number = 51
47  @State textState1: string = '下载'
48  @State textState2: string = '下载'
49  @State textState3: string = '下载'
50  @State isRunning1: boolean = false
51  @State isRunning2: boolean = false
52  @State isRunning3: boolean = false
53  @State enableState1: boolean = true
54  @State enableState2: boolean = true
55  @State enableState3: boolean = true
56  build() {
57    Column({space: 20}) {
58      Text('6、下载按钮：')
59      ProgressButton({
60        progress: this.halfProgress,
61        progressButtonWidth: "60",
62        content: this.textState1,
63        enable: this.enableState1,
64        clickCallback: () => {
65          if (this.textState1 && !this.isRunning1 && this.halfProgress < 100) {
66            this.textState1 = '继续'
67          }
68          this.isRunning1 = !this.isRunning1
69          let timer = setInterval(() => {
70            if (this.isRunning1) {
71              if (this.halfProgress === 100) {
72              } else {
73                this.halfProgress++
74                if (this.halfProgress === 100) {
75                  // this.halfProgress = 0
76                  this.textState1 = '已完成'
77                  this.enableState1 = false
78                }
79                console.info('x progress++ = ' + this.halfProgress)
80              }
81            } else {
82              console.info('x isRunning = ' + false)
83              clearInterval(timer)
84            }
85          }, 100)
86        }
87      })
88      ProgressButton({
89        progress: this.smallProgress,
90        progressButtonWidth: "100",
91        content: this.textState2,
92        enable: this.enableState2,
93        clickCallback: () => {
94          if (this.textState2 && !this.isRunning2 && this.smallProgress < 100) {
95            this.textState2 = '继续'
96          }
97          this.isRunning2 = !this.isRunning2
98          let timer = setInterval(() => {
99            if (this.isRunning2) {
100              if (this.smallProgress === 100) {
101
102              } else {
103                this.smallProgress++
104                if (this.smallProgress === 100) {
105                  this.textState2 = '已完成'
106                  this.enableState2 = false
107                }
108                console.info('x progress++ = ' + this.smallProgress)
109              }
110            } else {
111              console.info('x isRunning = ' + false)
112              clearInterval(timer)
113            }
114          }, 100)
115        }
116      })
117      ProgressButton({
118        progress: this.bigProgress,
119        progressButtonWidth: '300',
120        content: this.textState3,
121        enable: this.enableState3,
122        clickCallback: () => {
123          this.isRunning3 = !this.isRunning3
124          if (!this.isRunning3 && this.textState3 && this.bigProgress < 100) {
125            this.textState3 = '继续'
126          }
127
128          let timer = setInterval(() => {
129            if (this.isRunning3) {
130              if (this.bigProgress === 100) {
131              } else {
132                this.bigProgress++
133                if (this.bigProgress === 100) {
134                  this.textState3 = '已完成'
135                  this.enableState3 = false
136                }
137                console.info('x progress++ = ' + this.bigProgress)
138              }
139            } else {
140              console.info('x isRunning = ' + false)
141              clearInterval(timer)
142            }
143          }, 100)
144        }
145      })
146    }.alignItems(HorizontalAlign.Center).width('100%')
147  }
148}
149```
150
151
152![zh-cn_image_0000001664713029](figures/zh-cn_image_0000001664713029.png)
153