• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1# @ohos.arkui.advanced.ProgressButton（下载按钮）
2
3
4文本下载按钮，可显示具体下载进度。
5
6
7> **说明：**
8>
9> 该组件从API Version 10开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
10
11
12## 导入模块
13
14```
15import { ProgressButton } from '@ohos.arkui.advanced.ProgressButton'
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**系统能力：** SystemCapability.ArkUI.ArkUI.Full
28
29**参数：**
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 '@ohos.arkui.advanced.ProgressButton'
46@Entry
47@Component
48struct Index {
49  @State halfProgress: number = 0
50  @State smallProgress: number = 0
51  @State bigProgress: number = 0
52  @State textState1: string = ''
53  @State isRunning1: boolean = false
54  @State enableState1: boolean = true
55  @State progressState: Visibility = Visibility.None
56  @State ButtonState: Visibility = Visibility.Visible
57  @State buttonText: string = '下载'
58  @State buttonEnable: boolean = true
59  @State isEnd: boolean = false
60  build() {
61    Column({space: 20}) {
62      Text('下载按钮')
63      Button(this.buttonText)
64        .fontSize($r('sys.float.ohos_id_text_size_button3'))
65        .fontWeight(FontWeight.Medium)
66        .fontColor($r('sys.color.ohos_id_color_emphasize'))
67        .padding({left: 8, right: 8})
68        .opacity(this.buttonEnable? 1: 0.4)
69        .enabled(this.buttonEnable)
70        .height(28)
71        .borderRadius(14)
72        .width(60)
73        .backgroundColor($r("sys.color.ohos_id_color_button_normal"))
74        .onClick(() => {
75          if(!this.isEnd) {
76            this.buttonText = '等待中'
77            let timer1 = setInterval(() => {
78              this.progressState = Visibility.Visible
79              this.ButtonState = Visibility.None
80              clearInterval(timer1)
81              this.isRunning1 = true
82              let timer = setInterval(() => {
83                if (this.isRunning1) {
84                  if (this.halfProgress === 100) {
85                    this.isEnd = true
86                  } else {
87                    this.halfProgress++
88                    if (this.halfProgress === 100) {
89                      this.textState1 = '安装中'
90                      this.enableState1 = false
91                      this.ButtonState = Visibility.Visible
92                      this.progressState = Visibility.None
93                      this.buttonEnable = false
94                      this.buttonText = '安装中'
95                      let timer2 = setInterval(() => {
96                        this.buttonText = '打开'
97                        this.buttonEnable = true
98                        this.isEnd = true
99                        clearInterval(timer2)
100                      }, 2000)
101                    }
102                    console.info('x progress++ = ' + this.halfProgress)
103                  }
104                } else {
105                  console.info('x isRunning = ' + false)
106                  clearInterval(timer)
107                }
108              }, 100)
109            }, 2000)
110          }
111        }).visibility(this.ButtonState)
112      ProgressButton({
113        progress: this.halfProgress,
114        progressButtonWidth: "60",
115        content: this.textState1,
116        enable: this.enableState1,
117
118        clickCallback: () => {
119          if (this.isRunning1 && this.halfProgress < 100) {
120            this.textState1 = '继续'
121          }
122          this.isRunning1 = !this.isRunning1
123          let timer = setInterval(() => {
124
125            if (this.isRunning1) {
126              if (this.halfProgress === 100) {
127              } else {
128                this.halfProgress++
129                if (this.halfProgress === 100) {
130                  this.textState1 = '安装中'
131                  this.enableState1 = false
132                  this.ButtonState = Visibility.Visible
133                  this.progressState = Visibility.None
134                  this.buttonEnable = false
135                  this.buttonText = '安装中'
136                  let timer2 = setInterval(() => {
137                    this.buttonText = '打开'
138                    this.buttonEnable = true
139                    this.isEnd = true
140                    clearInterval(timer2)
141                  },2000)
142                }
143                console.info('x progress++ = ' + this.halfProgress)
144              }
145            } else {
146              console.info('x isRunning = ' + false)
147              clearInterval(timer)
148            }
149          }, 100)
150        }
151      }).visibility(this.progressState)
152    }.alignItems(HorizontalAlign.Center).width('100%')
153  }
154}
155```
156
157
158![zh-cn_image_0000001664713029](figures/zh-cn_image_0000001664713029.png)
159