HarmonyOS 6 Progress组件设置环形进度条属性使用文档

环形进度条（Ring）基础

1. 类型定义

环形进度条对应ProgressType.Ring，是一款无刻度、简洁美观的圆环样式进度条，常用于展示百分比、加载进度、任务完成度等场景。

2. 核心接口

Progress({value:number,total:number,type:ProgressType.Ring})

3. 核心专属属性

环形进度条支持通过style()方法配置专属样式，本次示例重点讲解：

1. strokeWidth：圆环线条宽度
2. shadow：是否开启阴影效果
3. color：支持纯色与线性渐变色配置

属性1：渐变色（Gradient Color）

1. 作用

为环形进度条设置线性渐变颜色，替代单一纯色，提升UI视觉效果，实现更美观的进度展示。

2. 实现步骤

1. 创建LinearGradient实例，定义渐变颜色数组与偏移量（offset）
2. 将渐变对象赋值给Progress组件的color属性
3. 配合style({ strokeWidth })设置圆环粗细

3. 代码片段

// 定义渐变色：黄色 → 橙色privategradientColor:LinearGradient=newLinearGradient([{color:Color.Yellow,offset:0.5},{color:Color.Orange,offset:1.0}]);// 应用渐变色Progress({value:70,total:100,type:ProgressType.Ring}).width(100).style({strokeWidth:20})// 设置圆环宽度.color(this.gradientColor)// 设置渐变色

4. 效果说明

• 进度条从黄色平滑过渡到橙色
• offset表示渐变位置（取值 0~1）
• 支持 2 种及以上颜色组合渐变

属性2：阴影效果（Shadow）

1. 作用

为环形进度条开启阴影样式，增强UI立体感、层次感，使进度条更突出。

2. 配置方式

通过style({ shadow: true })开启阴影。

3. 代码片段

Progress({value:70,total:100,type:ProgressType.Ring}).width(120).color(Color.Orange)// 纯色.style({strokeWidth:20,// 线条宽度shadow:true// 开启阴影})

4. 效果说明

• 进度条外侧自动生成柔和阴影
• 提升界面视觉层次
• 适合深色主题、弹窗、卡片内展示

完整示例代码

@Entry@Componentstruct ProgressExample{// 定义线性渐变色privategradientColor:LinearGradient=newLinearGradient([{color:Color.Yellow,offset:0.5},{color:Color.Orange,offset:1.0}]);build(){Column({space:15}){// 1. 渐变色环形进度条Text('Gradient Color').fontSize(9).fontColor(0xCCCCCC).width('90%');Progress({value:70,total:100,type:ProgressType.Ring}).width(100).style({strokeWidth:20}).color(this.gradientColor);// 2. 带阴影的环形进度条Text('Shadow').fontSize(9).fontColor(0xCCCCCC).width('90%');Progress({value:70,total:100,type:ProgressType.Ring}).width(120).color(Color.Orange).style({strokeWidth:20,shadow:true});}.width('100%').padding({top:5});}}

页面展示内容

1. Gradient Color：黄色→橙色渐变环形进度条
2. Shadow：橙色纯色+阴影环形进度条

运行效果如图：

环形进度条常用属性汇总

总结

1. 渐变色必须使用 LinearGradient 类型，不能直接传入字符串

2. shadow 仅支持 Ring 类型，不是所有进度条都可用

3. strokeWidth 不宜过大，避免圆环重叠显示异常

4. 直径（width）必须大于 2 倍 strokeWidth，否则无法显示圆环

5. 渐变色偏移量offset必须在 0~1 之间，且按顺序递增

6. 渐变色（LinearGradient）：实现多彩、平滑过渡效果

7. 阴影（shadow:true）：增强UI立体感与视觉层次

如果这篇文章对你有帮助，欢迎点赞、收藏、关注，你的支持是持续创作的动力