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```ts
45import { ProgressButton } from '@kit.ArkUI'
46
47@Entry
48@Component
49struct Index {
50  @State halfProgress: number = 0
51  @State smallProgress: number = 0
52  @State bigProgress: number = 0
53  @State textState1: string = ''
54  @State isRunning1: boolean = false
55  @State enableState1: boolean = true
56  @State progressState: Visibility = Visibility.None
57  @State ButtonState: Visibility = Visibility.Visible
58  @State buttonText: string = '下载'
59  @State buttonEnable: boolean = true
60  @State isEnd: boolean = false
61  build() {
62    Column({space: 20}) {
63      Text('下载按钮')
64      Button(this.buttonText)
65        .fontSize($r('sys.float.ohos_id_text_size_button3'))
66        .fontWeight(FontWeight.Medium)
67        .fontColor($r('sys.color.ohos_id_color_emphasize'))
68        .padding({left: 8, right: 8})
69        .opacity(this.buttonEnable? 1: 0.4)
70        .enabled(this.buttonEnable)
71        .height(28)
72        .borderRadius(14)
73        .width(60)
74        .backgroundColor($r("sys.color.ohos_id_color_button_normal"))
75        .onClick(() => {
76          if(!this.isEnd) {
77            this.buttonText = '等待中'
78            let timer1 = setInterval(() => {
79              this.progressState = Visibility.Visible
80              this.ButtonState = Visibility.None
81              clearInterval(timer1)
82              this.isRunning1 = true
83              let timer = setInterval(() => {
84                if (this.isRunning1) {
85                  if (this.halfProgress === 100) {
86                    this.isEnd = true
87                  } else {
88                    this.halfProgress++
89                    if (this.halfProgress === 100) {
90                      this.textState1 = '安装中'
91                      this.enableState1 = false
92                      this.ButtonState = Visibility.Visible
93                      this.progressState = Visibility.None
94                      this.buttonEnable = false
95                      this.buttonText = '安装中'
96                      let timer2 = setInterval(() => {
97                        this.buttonText = '打开'
98                        this.buttonEnable = true
99                        this.isEnd = true
100                        clearInterval(timer2)
101                      }, 2000)
102                    }
103                    console.info('x progress++ = ' + this.halfProgress)
104                  }
105                } else {
106                  console.info('x isRunning = ' + false)
107                  clearInterval(timer)
108                }
109              }, 100)
110            }, 2000)
111          }
112        }).visibility(this.ButtonState)
113      ProgressButton({
114        progress: this.halfProgress,
115        progressButtonWidth: "60",
116        content: this.textState1,
117        enable: this.enableState1,
118
119        clickCallback: () => {
120          if (this.isRunning1 && this.halfProgress < 100) {
121            this.textState1 = '继续'
122          }
123          this.isRunning1 = !this.isRunning1
124          let timer = setInterval(() => {
125
126            if (this.isRunning1) {
127              if (this.halfProgress === 100) {
128              } else {
129                this.halfProgress++
130                if (this.halfProgress === 100) {
131                  this.textState1 = '安装中'
132                  this.enableState1 = false
133                  this.ButtonState = Visibility.Visible
134                  this.progressState = Visibility.None
135                  this.buttonEnable = false
136                  this.buttonText = '安装中'
137                  let timer2 = setInterval(() => {
138                    this.buttonText = '打开'
139                    this.buttonEnable = true
140                    this.isEnd = true
141                    clearInterval(timer2)
142                  },2000)
143                }
144                console.info('x progress++ = ' + this.halfProgress)
145              }
146            } else {
147              console.info('x isRunning = ' + false)
148              clearInterval(timer)
149            }
150          }, 100)
151        }
152      }).visibility(this.progressState)
153    }.alignItems(HorizontalAlign.Center).width('100%')
154  }
155}
156```
157
158
159![zh-cn_image_0000001664713029](figures/zh-cn_image_0000001664713029.png)
160