1# ProgressButton
2
3
4文本下载按钮，可显示具体下载进度。
5
6
7> **说明：**
8>
9> 该组件从API Version 10开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
10
11
12## 导入模块
13
14```
15import { ProgressButton } from '@kit.ArkUI'
16```
17
18## 属性
19支持[通用属性](ts-universal-attributes-size.md)
20
21## ProgressButton
22
23ProgressButton({progress: number, content: string, progressButtonWidth?: Length, clickCallback: () => void, enable: boolean})
24
25**装饰器类型：**\@Component
26
27**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。
28
29**系统能力：** SystemCapability.ArkUI.ArkUI.Full
30
31| 名称 | 类型 | 必填 | 装饰器类型 | 说明 |
32| -------- | -------- | -------- | -------- | -------- |
33| progress | number | 是 | \@Prop | 下载按钮的当前进度值。 |
34| content | string | 是 | \@Prop | 下载按钮的文本。 |
35| progressButtonWidth | [Length](ts-types.md#length) | 否 | - | 下载按钮的宽度。<br/>默认值：44。 |
36| clickCallback | () =&gt; void | 是 | - | 下载按钮的点击回调。 |
37| enable | boolean | 是 | \@Prop | 下载按钮是否可以点击。<br> enable为true时，表示可以点击。<br> enable为false时，表示不可点击。 |
38
39## 事件
40支持[通用事件](ts-universal-events-click.md)
41
42## 示例
43
44该示例实现了一个简单的带加载进度的文本下载按钮。
45```ts
46import { ProgressButton } from '@kit.ArkUI'
47
48@Entry
49@Component
50struct Index {
51  @State progressIndex: number = 0
52  @State textState: string = '下载'
53  @State ButtonWidth: number = 200
54  @State isRunning: boolean = false
55  @State enableState: boolean = true
56  @State value: number = 0
57
58  build() {
59    Column() {
60      Scroll() {
61        Column({ space: 20 }) {
62          ProgressButton({
63            progress: this.progressIndex,
64            progressButtonWidth: this.ButtonWidth,
65            content: this.textState,
66            enable: this.enableState,
67            clickCallback: () => {
68              if (this.textState && !this.isRunning && this.progressIndex < 100) {
69                this.textState = '继续'
70              }
71              this.isRunning = !this.isRunning
72              let timer = setInterval(() => {
73                if (this.isRunning) {
74                  if (this.progressIndex === 100) {
75
76                  } else {
77                    this.progressIndex++
78                    if (this.progressIndex === 100) {
79                      this.textState = '已完成'
80                      this.enableState = false
81                    }
82                  }
83                } else {
84                  clearInterval(timer)
85                }
86              }, 20)
87            }
88          })
89        }.alignItems(HorizontalAlign.Center).width('100%').margin({ top: 20 })
90      }
91    }
92  }
93}
94```
95
96
97![img.png](./figures/img.png)