当前位置：首页 > news >正文

HarmonyOS 6 Progress 组件 - 设置线性进度条和胶囊进度条属性

news 2026/5/1 2:08:29

文章目录

- Progress 组件基础概述
- 核心依赖与导入
- 线性进度条（ProgressType.Linear）
- - 1. 作用
  - 2. 核心代码（对应示例）
  - 3. 关键属性说明
  - 4. 渐变颜色配置
- 胶囊进度条（ProgressType.Capsule）
- - 1. 作用
  - 2. 核心代码（对应示例）
  - 3. 关键属性说明
  - 4. 渐变颜色配置
  - 5 完整代码
- 总结

Progress 组件基础概述

Progress是HarmonyOS提供的进度指示器组件，用于直观展示任务加载、操作完成的进度状态，支持线性、胶囊、环形、仪表盘等多种类型。
本文重点讲解Linear（线性）和Capsule（胶囊）两种最常用的进度条类型，包含宽度、进度值、描边粗细、渐变颜色等核心属性配置。

核心依赖与导入

使用Progress组件无需额外手动导入，HarmonyOS ArkTS框架已内置该基础组件，直接在.ets文件中调用即可；
配置渐变颜色需使用框架内置的LinearGradient类，用于定义线性渐变色彩方案。

线性进度条（ProgressType.Linear）

1. 作用

展示水平直线型进度条，适用于文件下载、数据加载、任务进度等常规场景。

2. 核心代码（对应示例）

Progress({ value: 70, total: 100, type: ProgressType.Linear }) .width(100) // 进度条宽度 .style({ strokeWidth: 20 }) // 进度条描边粗细 .color(this.gradientColor) // 进度条渐变颜色

3. 关键属性说明

属性/参数	类型	含义	示例值
value	number	当前进度值	70
total	number	进度总数值（最大值）	100
type	ProgressType	进度条类型	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.Capsule）

1. 作用

展示两端为圆角的胶囊型进度条，视觉更柔和，适用于轻量化进度展示、状态指示等场景。

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 }) } }

运行效果如图：