1# ProgressButtonV2 2<!--Kit: ArkUI--> 3<!--Subsystem: ArkUI--> 4<!--Owner: @fengluochenai--> 5<!--Designer: @YanSanzo--> 6<!--Tester: @tinygreyy--> 7<!--Adviser: @HelloCrease--> 8 9 10文本下载按钮，可显示具体的下载进度。 11 12该组件基于[状态管理V2](../../../ui/state-management/arkts-state-management-overview.md#状态管理v2)实现，相较于[状态管理V1](../../../ui/state-management/arkts-state-management-overview.md#状态管理v1)，状态管理V2增强了对数据对象的深度观察与管理能力，不再局限于组件层级。借助状态管理V2，开发者可以通过该组件更灵活地控制文本下载按钮的数据和状态，实现更高效的用户界面刷新。 13 14 15> **说明：** 16> 17> - 该组件从API version 18开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 18> 19 20 21## 导入模块 22 23``` 24import { ColorMetrics, LengthMetrics, ProgressButtonV2, ProgressButtonV2Color } from '@kit.ArkUI'; 25``` 26 27## ProgressButtonV2 28 29ProgressButtonV2({progress: number, content: ResourceStr, progressButtonWidth?: LengthMetrics, onClicked: ClickCallback, 30isEnabled: boolean, colorOptions?: ProgressButtonColorOptions, progressButtonRadius?: LengthMetrics}) 31 32文本下载按钮，可显示具体下载进度。 33 34**装饰器类型：**\@ComponentV2 35 36**原子化服务API：** 从API version 18开始，该接口支持在原子化服务中使用。 37 38**系统能力：** SystemCapability.ArkUI.ArkUI.Full 39 40**设备行为差异：** 该接口在Wearable设备上使用时，应用程序运行异常， 异常信息中提示接口未定义，在其他设备中可正常调用。 41 42| 名称 | 类型 | 必填 | 装饰器类型 | 说明 | 43|-----------------------------------|---------------------------------------------------------------|----|------------------------|----------------------------------------------------------------------------| 44| progress | number | 是 | \@Require <br/>\@Param | 下载按钮的当前进度值。<br/>取值范围：[0,100]。设置小于0的数值时置为0，设置大于100的数值置为100。<br/>默认值：0 | 45| content | [ResourceStr](ts-types.md#resourcestr) | 是 | \@Require <br/>\@Param | 下载按钮的文本。 | 46| progressButtonWidth | [LengthMetrics](../js-apis-arkui-graphics.md#lengthmetrics12) | 否 | \@Param <br/>\@Once | 下载按钮的宽度。<br/>默认值：44vp | 47| onClicked | [ClickCallback](#clickcallback) | 是 | \@Param | 下载按钮的点击回调。 | 48| isEnabled | boolean | 是 | \@Param | 下载按钮是否可以点击。<br> isEnabled为true时，表示可以点击。<br> isEnabled为false时，表示不可点击。 | 49| colorOptions | [ProgressButtonV2Color](#progressbuttonv2color) | 否 | \@Param | 下载按钮颜色选项。 | 50| progressButtonRadius<sup>18+<sup> | [LengthMetrics](../js-apis-arkui-graphics.md#lengthmetrics12) | 否 | \@Param | 下载按钮的圆角（不支持百分比设置）。<br/>取值范围：[0, height/2]<br/>默认值：height/2<br/>设置非法数值时，按照默认值处理。 | 51 52## 属性 53不支持[通用属性](ts-component-general-attributes.md)。 54 55## ClickCallback 56 57type ClickCallback = () => void 58 59下载按钮的点击回调。 60 61**原子化服务API：** 从API version 18开始，该接口支持在原子化服务中使用。 62 63**系统能力：** SystemCapability.ArkUI.ArkUI.Full 64 65**设备行为差异：** 该接口在Wearable设备上使用时，应用程序运行异常， 异常信息中提示接口未定义，在其他设备中可正常调用。 66 67## ProgressButtonV2Color 68下载按钮颜色选项。 69 70**装饰器类型：**\@ObservedV2 71 72### 属性 73 74**原子化服务API：** 从API version 18开始，该接口支持在原子化服务中使用。 75 76**系统能力：** SystemCapability.ArkUI.ArkUI.Full 77 78**设备行为差异：** 该接口在Wearable设备上使用时，应用程序运行异常， 异常信息中提示接口未定义，在其他设备中可正常调用。 79 80| 名称 | 类型 | 必填 | 装饰器类型 | 说明 | 81|-----------------|--------------|----|---------|----------------------------| 82| progressColor | [ColorMetrics](../js-apis-arkui-graphics.md#colormetrics12) | 否 | \@Trace | 进度条颜色。<br/>默认值：#330A59F7 | 83| borderColor | [ColorMetrics](../js-apis-arkui-graphics.md#colormetrics12) | 否 | \@Trace | 按钮描边颜色。<br/>默认值：#330A59F7 | 84| textColor | [ColorMetrics](../js-apis-arkui-graphics.md#colormetrics12) | 否 | \@Trace | 按钮文本颜色。<br/>默认值：系统默认值，#CE000000 | 85| backgroundColor | [ColorMetrics](../js-apis-arkui-graphics.md#colormetrics12) | 否 | \@Trace | 按钮背景颜色。<br/>默认值：\$r('sys.color.ohos_id_color_foreground_contrary') | 86 87### constructor 88constructor(options: ProgressButtonV2ColorOptions); 89 90下载按钮颜色选项构造函数。 91 92**原子化服务API：** 从API version 18开始，该接口支持在原子化服务中使用。 93 94**系统能力：** SystemCapability.ArkUI.ArkUI.Full 95 96**设备行为差异：** 该接口在Wearable设备上使用时，应用程序运行异常， 异常信息中提示接口未定义，在其他设备中可正常调用。 97 98**参数：** 99 100| 参数名 | 类型 | 必填 | 说明 | 101|---------|---------------------------------------------------------------|----|-------| 102| options | [ProgressButtonV2ColorOptions](#progressbuttonv2coloroptions) | 是 | 色彩信息。 | 103 104## ProgressButtonV2ColorOptions 105 106下载按钮色彩信息选项。 107 108**原子化服务API：** 从API version 18开始，该接口支持在原子化服务中使用。 109 110**系统能力：** SystemCapability.ArkUI.ArkUI.Full 111 112**设备行为差异：** 该接口在Wearable设备上使用时，应用程序运行异常， 异常信息中提示接口未定义，在其他设备中可正常调用。 113 114| 名称 | 类型 | 必填 | 说明 | 115|-----------------|--------------|----|--------------------------------------------------------------------| 116| progressColor | [ColorMetrics](../js-apis-arkui-graphics.md#colormetrics12)| 否 | 进度条颜色。<br/>默认值：#330A59F7 | 117| borderColor | [ColorMetrics](../js-apis-arkui-graphics.md#colormetrics12)| 否 | 按钮描边颜色。<br/>默认值：#330A59F7 | 118| textColor | [ColorMetrics](../js-apis-arkui-graphics.md#colormetrics12)| 否 | 按钮文本颜色。<br/>默认值：系统默认值(#CE000000) | 119| backgroundColor | [ColorMetrics](../js-apis-arkui-graphics.md#colormetrics12)| 否 | 按钮背景颜色。<br/>默认值：\$r('sys.color.ohos_id_color_foreground_contrary') | 120 121## 事件 122不支持[通用事件](ts-component-general-events.md)。 123 124## 示例 125 126该示例实现了一个简单的带加载进度的文本下载按钮。 127```ts 128import { LengthMetrics, ProgressButtonV2 } from '@kit.ArkUI'; 129 130@Entry 131@ComponentV2 132struct Index { 133 @Local progressIndex: number = 0; 134 @Local textState: string = '下载'; 135 @Local buttonWidth: LengthMetrics = LengthMetrics.vp(200); 136 @Local isRunning: boolean = false; 137 @Local enableState: boolean = true; 138 139 build() { 140 Column() { 141 Scroll() { 142 Column({ space: 20 }) { 143 ProgressButtonV2({ 144 progress: this.progressIndex, 145 progressButtonWidth: this.buttonWidth, 146 content: this.textState, 147 isEnabled: this.enableState, 148 onClicked: () => { 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 clearInterval(timer); 157 } else { 158 this.progressIndex++; 159 if (this.progressIndex === 100) { 160 this.textState = '已完成'; 161 this.enableState = false; 162 } 163 } 164 } else { 165 clearInterval(timer); 166 } 167 }, 20); 168 } 169 }) 170 }.alignItems(HorizontalAlign.Center).width('100%').margin({ top: 20 }); 171 } 172 } 173 } 174} 175``` 176 177 178
