1# ProgressButton 2 3 4文本下载按钮，可显示具体下载进度。 5 6 7> **说明：** 8> 9> 该组件从API Version 10开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 10> 11> 该组件不支持在Wearable设备上使用。 12 13 14## 导入模块 15 16``` 17import { ProgressButton } from '@kit.ArkUI' 18``` 19 20## 属性 21不支持[通用属性](ts-component-general-attributes.md)。 22 23## ProgressButton 24 25ProgressButton({progress: number, content: string, progressButtonWidth?: Length, clickCallback: () => void, enable: 26boolean, colorOptions?: ProgressButtonColorOptions, progressButtonRadius?: LengthMetrics}) 27 28**装饰器类型：**\@Component 29 30 31**系统能力：** SystemCapability.ArkUI.ArkUI.Full 32 33| 名称 | 类型 | 必填 | 装饰器类型 | 说明 | 34|-----------------------------------|---------------------------------------------------------------|----|--------|--------------------------------------------------------------------------------------------------------------------------------------| 35| progress | number | 是 | \@Prop | 下载按钮的当前进度值。<br/>取值范围：[0,100]。设置小于0的数值时置为0，设置大于100的数值置为100。<br/>默认值：0。<br/>**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 | 36| content | string | 是 | \@Prop | 下载按钮的文本。<br/>默认值：空字符串。<br/>**说明**：最长显示组件宽度，超出部分用省略号代替。<br/>**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 | 37| progressButtonWidth | [Length](ts-types.md#length) | 否 | - | 下载按钮的宽度，单位vp。<br/>取值范围：大于等于44vp。<br/>默认值：44vp。小于默认值和非法值设置为默认值。<br/>**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 | 38| clickCallback | () => void | 是 | - | 下载按钮的点击回调。<br/>**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 | 39| enable | boolean | 是 | \@Prop | 下载按钮是否可以点击。<br> enable为true时，表示可以点击。<br> enable为false时，表示不可点击。<br/>**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 | 40| colorOptions<sup>18+<sup> | [ProgressButtonColorOptions](#progressbuttoncoloroptions18) | 否 | \@Prop | 下载按钮颜色。<br/>**原子化服务API：** 从API version 18开始，该接口支持在原子化服务中使用。 | 41| progressButtonRadius<sup>18+<sup> | [LengthMetrics](../js-apis-arkui-graphics.md#lengthmetrics12) | 否 | \@Prop | 下载按钮的圆角（不支持百分比设置）。<br/>取值范围：[0, height/2]<br/>默认值：height/2<br/>设置非法数值时，按照默认值处理。 <br/>**原子化服务API：** 从API version 18开始，该接口支持在原子化服务中使用。 | 42 43## ProgressButtonColorOptions<sup>18+<sup> 44 45下载按钮颜色选项 46 47**原子化服务API：** 从API version 18开始，该接口支持在原子化服务中使用。 48 49**系统能力：** SystemCapability.ArkUI.ArkUI.Full 50 51| 名称 | 类型 | 必填 | 说明 | 52|-----------------|----------------------------------------|----|-------------------------------------------------------------------| 53| progressColor | [ResourceColor](ts-types.md#resourcecolor) | 否 | 进度条颜色。<br/>默认值：#330A59F7 | 54| borderColor | [ResourceColor](ts-types.md#resourcecolor) | 否 | 按钮描边颜色。<br/>默认值：#330A59F7 | 55| textColor | [ResourceColor](ts-types.md#resourcecolor) | 否 | 按钮文本颜色。<br/>默认值：系统默认值 | 56| backgroundColor | [ResourceColor](ts-types.md#resourcecolor) | 否 | 按钮背景色。<br/>默认值：\$r('sys.color.ohos_id_color_foreground_contrary') | 57 58## 事件 59不支持[通用事件](ts-component-general-events.md)。 60 61## 示例 62 63### 示例1（进度条下载按钮） 64该示例实现了一个简单的带加载进度的文本下载按钮。 65```ts 66import { ProgressButton } from '@kit.ArkUI' 67 68@Entry 69@Component 70struct Index { 71 @State progressIndex: number = 0 72 @State textState: string = '下载' 73 @State ButtonWidth: number = 200 74 @State isRunning: boolean = false 75 @State enableState: boolean = true 76 77 build() { 78 Column() { 79 Scroll() { 80 Column({ space: 20 }) { 81 ProgressButton({ 82 progress: this.progressIndex, 83 progressButtonWidth: this.ButtonWidth, 84 content: this.textState, 85 enable: this.enableState, 86 clickCallback: () => { 87 if (this.textState && !this.isRunning && this.progressIndex < 100) { 88 this.textState = '继续' 89 } 90 this.isRunning = !this.isRunning 91 let timer = setInterval(() => { 92 if (this.isRunning) { 93 if (this.progressIndex === 100) { 94 95 } else { 96 this.progressIndex++ 97 if (this.progressIndex === 100) { 98 this.textState = '已完成' 99 this.enableState = false 100 } 101 } 102 } else { 103 clearInterval(timer) 104 } 105 }, 20) 106 } 107 }) 108 }.alignItems(HorizontalAlign.Center).width('100%').margin({ top: 20 }) 109 } 110 } 111 } 112} 113``` 114 115 116 117 118### 示例2（自定义颜色按钮） 119该示例实现了一个简单的自定义颜色的文本下载按钮。 120```ts 121import { ProgressButton } from '@kit.ArkUI' 122 123@Entry 124@Component 125struct Index { 126 @State progressIndex: number = 0 127 @State textState: string = '下载' 128 @State ButtonWidth: number = 200 129 @State isRunning: boolean = false 130 @State enableState: boolean = true 131 132 build() { 133 Column() { 134 Scroll() { 135 Column({ space: 20 }) { 136 ProgressButton({ 137 //设置下载按钮颜色 138 colorOptions: { 139 progressColor: Color.Orange, 140 borderColor: Color.Black, 141 textColor: Color.Blue, 142 backgroundColor: Color.Pink 143 }, 144 progress: this.progressIndex, 145 progressButtonWidth: this.ButtonWidth, 146 content: this.textState, 147 enable: this.enableState, 148 clickCallback: () => { 149 if (this.textState && !this.isRunning && this.progressIndex < 100) { 150 this.textState = '继续' 151 } 152 this.isRunning = !this.isRunning 153 let timer = setInterval(() => { 154 if (this.isRunning) { 155 if (this.progressIndex === 100) { 156 } else { 157 this.progressIndex++ 158 if (this.progressIndex === 100) { 159 this.textState = '已完成' 160 this.enableState = false 161 } 162 } 163 } else { 164 clearInterval(timer) 165 } 166 }, 20) 167 } 168 }) 169 }.alignItems(HorizontalAlign.Center).width('100%').margin({ top: 20 }) 170 } 171 } 172 } 173} 174``` 175 176 177### 示例3（自定义圆角按钮） 178该示例实现了一个简单的自定义圆角的文本下载按钮。 179```ts 180import { ProgressButton, LengthMetrics } from '@kit.ArkUI' 181 182@Entry 183@Component 184struct Index { 185 @State progressIndex: number = 0 186 @State textState: string = '下载' 187 @State ButtonWidth: number = 200 188 @State isRunning: boolean = false 189 @State enableState: boolean = true 190 191 build() { 192 Column() { 193 Scroll() { 194 Column({ space: 20 }) { 195 ProgressButton({ 196 progressButtonRadius: LengthMetrics.vp(8), //自定义圆角值为8vp 197 progress: this.progressIndex, 198 progressButtonWidth: this.ButtonWidth, 199 content: this.textState, 200 enable: this.enableState, 201 clickCallback: () => { 202 if (this.textState && !this.isRunning && this.progressIndex < 100) { 203 this.textState = '继续' 204 } 205 this.isRunning = !this.isRunning 206 let timer = setInterval(() => { 207 if (this.isRunning) { 208 if (this.progressIndex === 100) { 209 } else { 210 this.progressIndex++ 211 if (this.progressIndex === 100) { 212 this.textState = '已完成' 213 this.enableState = false 214 } 215 } 216 } else { 217 clearInterval(timer) 218 } 219 }, 20) 220 } 221 }) 222 }.alignItems(HorizontalAlign.Center).width('100%').margin({ top: 20 }) 223 } 224 } 225 } 226} 227``` 228
