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