文章目录Progress 组件基础概述核心依赖与导入线性进度条ProgressType.Linear1. 作用2. 核心代码对应示例3. 关键属性说明4. 渐变颜色配置胶囊进度条ProgressType.Capsule1. 作用2. 核心代码对应示例3. 关键属性说明4. 渐变颜色配置5 完整代码总结Progress 组件基础概述Progress是HarmonyOS提供的进度指示器组件用于直观展示任务加载、操作完成的进度状态支持线性、胶囊、环形、仪表盘等多种类型。本文重点讲解Linear线性和Capsule胶囊两种最常用的进度条类型包含宽度、进度值、描边粗细、渐变颜色等核心属性配置。核心依赖与导入使用Progress组件无需额外手动导入HarmonyOS ArkTS框架已内置该基础组件直接在.ets文件中调用即可配置渐变颜色需使用框架内置的LinearGradient类用于定义线性渐变色彩方案。线性进度条ProgressType.Linear1. 作用展示水平直线型进度条适用于文件下载、数据加载、任务进度等常规场景。2. 核心代码对应示例Progress({ value: 70, total: 100, type: ProgressType.Linear }) .width(100) // 进度条宽度 .style({ strokeWidth: 20 }) // 进度条描边粗细 .color(this.gradientColor) // 进度条渐变颜色3. 关键属性说明属性/参数类型含义示例值valuenumber当前进度值70totalnumber进度总数值最大值100typeProgressType进度条类型ProgressType.Linear线性.width()Length进度条整体宽度100单位vp.style({ strokeWidth }){strokeWidth: number}进度条描边高度20单位vp.color()LinearGradient/ResourceColor进度条填充颜色自定义渐变对象4. 渐变颜色配置通过LinearGradient类定义线性渐变参数为数组包含两个核心配置color渐变节点颜色十六进制色值offset渐变偏移量取值范围0~1控制渐变位置// 线性进度条渐变颜色定义 private gradientColor: LinearGradient new LinearGradient([ { color: #87BDF9, offset: 0.5 }, // 50%位置为浅蓝色 { color: #3662F0, offset: 1.0 } // 100%位置为深蓝色 ])胶囊进度条ProgressType.Capsule1. 作用展示两端为圆角的胶囊型进度条视觉更柔和适用于轻量化进度展示、状态指示等场景。2. 核心代码对应示例Progress({ value: 50, total: 100, type: ProgressType.Capsule }) .width(120).style({ strokeWidth: 40 }) .color(this.gradientColor2)3. 关键属性说明胶囊进度条继承线性进度条所有属性唯一区别为类型为ProgressType.Capsule额外特性自动将进度条两端渲染为圆角无需手动配置圆角属性strokeWidth同时控制胶囊的高度数值越大胶囊越粗。4. 渐变颜色配置与线性进度条语法一致通过LinearGradient自定义灰色系渐变// 胶囊进度条渐变颜色定义 public gradientColor2: LinearGradient new LinearGradient([ { color: #A5A5AF, offset: 0.5 }, // 50%位置为浅灰色 { color: #67666C, offset: 1.0 } // 100%位置为深灰色 ])5 完整代码// xxx.ets Entry Component struct ProgressExample { private gradientColor: LinearGradient new LinearGradient([{ color: #87BDF9, offset: 0.5 }, { color: #3662F0, offset: 1.0 }]) public gradientColor2: LinearGradient new LinearGradient([{ color: #A5A5AF, offset: 0.5 }, { color: #67666C, offset: 1.0 }]) build() { Column({ space: 15 }) { Text(Linear).fontSize(9).fontColor(0xCCCCCC).width(90%) Progress({ value: 70, total: 100, type: ProgressType.Linear }) .width(100).style({ strokeWidth: 20 }) .color(this.gradientColor) Text(Capsule).fontSize(9).fontColor(0xCCCCCC).width(90%) Progress({ value: 50, total: 100, type: ProgressType.Capsule }) .width(120).style({ strokeWidth: 40 }) .color(this.gradientColor2) }.width(100%).padding({ top: 5 }) } }运行效果如图总结示例代码为标准ArkTS组件结构核心分为数据定义和UI构建两部分变量定义声明两个LinearGradient渐变颜色对象分别用于线性、胶囊进度条UI构建使用Column容器垂直布局搭配Text标签说明依次渲染两种进度条通用样式设置间距、宽度、内边距保证布局美观。单位规范宽度、描边粗细默认单位为vp鸿蒙标准像素单位无需手动标注颜色配置支持纯色如#FFFFFF和渐变LinearGradient渐变必须通过框架类创建进度值范围value建议不超过total超出后进度条会显示为100%状态类型约束ProgressType为枚举类型仅支持框架定义的类型Linear/Capsule等权限说明Progress为基础组件无需申请额外权限全设备通用。如果这篇文章对你有帮助欢迎点赞、收藏、关注你的支持是持续创作的动力