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