文章目录导入模块核心参数说明示例功能整体说明状态变量说明完整代码代码逻辑解析1. 组件基础配置2. 点击回调核心逻辑3. 进度递增逻辑总结导入模块import { ProgressButton } from kit.ArkUI;核心参数说明参数类型作用说明progressnumber进度值范围 0100progressButtonWidthnumber按钮整体宽度contentstring按钮显示文字enableboolean按钮是否可点击启用clickCallback() void按钮点击回调事件示例功能整体说明本示例实现仿真下载进度按钮完整逻辑默认文字为「下载」初始进度 0第一次点击变为「继续」开启定时器自动递增进度进度持续从 0 涨到 100进度到达 100 后自动停止、文字变为「已完成」并禁用按钮中途再次点击可暂停进度再次点击继续增长支持状态变量控制运行、启用、文字、宽度等。状态变量说明State progressIndex: number 0; // 进度值 0~100 State textState: string 下载; // 按钮文字 State buttonWidth: number 200; // 按钮宽度 State isRunning: boolean false; // 是否正在加载 State enableState: boolean true; // 按钮是否可点击完整代码import { ProgressButton } from kit.ArkUI; Entry Component struct Index { State progressIndex: number 0; State textState: string 下载; State buttonWidth: number 200; State isRunning: boolean false; State enableState: boolean true; build() { Column() { Scroll() { Column({ space: 20 }) { ProgressButton({ progress: this.progressIndex, progressButtonWidth: this.buttonWidth, content: this.textState, enable: this.enableState, clickCallback: () { if (this.textState !this.isRunning this.progressIndex 100) { this.textState 继续; } this.isRunning !this.isRunning; let timer setInterval(() { if (this.isRunning) { if (this.progressIndex 100) { clearInterval(timer); } else { this.progressIndex; if (this.progressIndex 100) { this.textState 已完成; this.enableState false; } } } else { clearInterval(timer); } }, 20) } }) }.alignItems(HorizontalAlign.Center).width(100%).margin({ top: 20 }) } } } }运行效果如图代码逻辑解析1. 组件基础配置ProgressButton({ progress: this.progressIndex, progressButtonWidth: this.buttonWidth, content: this.textState, enable: this.enableState, ... })绑定实时进度、按钮宽度、显示文字、是否可点击所有变量由State管理自动 UI 刷新。2. 点击回调核心逻辑点击按钮 → 1. 未运行且进度未满文字改为「继续」 2. 切换运行状态 isRunning 3. 开启定时器每20ms进度1 4. 进度到100停止计时、文字变「已完成」、禁用按钮 5. 中途点击暂停并清除定时器3. 进度递增逻辑定时器间隔 20ms模拟高速下载进度动画进度到 100 自动终止定时器完成后enableStatefalse按钮置灰不可再点击。总结进度取值必须在0100区间定时器使用务必clearInterval防止内存泄漏完成后设置enable:false防止重复点击可修改buttonWidth自定义按钮宽窄可调整定时器间隔改变进度快慢。如果这篇文章对你有帮助欢迎点赞、收藏、关注你的支持是持续创作的动力