文章目录环形进度条Ring基础1. 类型定义2. 核心接口3. 核心专属属性属性1渐变色Gradient Color1. 作用2. 实现步骤3. 代码片段4. 效果说明属性2阴影效果Shadow1. 作用2. 配置方式3. 代码片段4. 效果说明完整示例代码页面展示内容环形进度条常用属性汇总总结环形进度条Ring基础1. 类型定义环形进度条对应ProgressType.Ring是一款无刻度、简洁美观的圆环样式进度条常用于展示百分比、加载进度、任务完成度等场景。2. 核心接口Progress({value:number,total:number,type:ProgressType.Ring})3. 核心专属属性环形进度条支持通过style()方法配置专属样式本次示例重点讲解strokeWidth圆环线条宽度shadow是否开启阴影效果color支持纯色与线性渐变色配置属性1渐变色Gradient Color1. 作用为环形进度条设置线性渐变颜色替代单一纯色提升UI视觉效果实现更美观的进度展示。2. 实现步骤创建LinearGradient实例定义渐变颜色数组与偏移量offset将渐变对象赋值给Progress组件的color属性配合style({ strokeWidth })设置圆环粗细3. 代码片段// 定义渐变色黄色 → 橙色privategradientColor:LinearGradientnewLinearGradient([{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阴影效果Shadow1. 作用为环形进度条开启阴影样式增强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. 效果说明进度条外侧自动生成柔和阴影提升界面视觉层次适合深色主题、弹窗、卡片内展示完整示例代码EntryComponentstruct ProgressExample{// 定义线性渐变色privategradientColor:LinearGradientnewLinearGradient([{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});}}页面展示内容Gradient Color黄色→橙色渐变环形进度条Shadow橙色纯色阴影环形进度条运行效果如图环形进度条常用属性汇总属性说明取值示例value当前进度70total最大进度100type进度条类型ProgressType.Ringwidth组件直径100color颜色Color.Orange / LinearGradientstrokeWidth圆环线条宽度20shadow开启阴影true / false总结渐变色必须使用 LinearGradient 类型不能直接传入字符串shadow 仅支持 Ring 类型不是所有进度条都可用strokeWidth 不宜过大避免圆环重叠显示异常直径width必须大于 2 倍 strokeWidth否则无法显示圆环渐变色偏移量offset必须在 0~1 之间且按顺序递增渐变色LinearGradient实现多彩、平滑过渡效果阴影shadow:true增强UI立体感与视觉层次如果这篇文章对你有帮助欢迎点赞、收藏、关注你的支持是持续创作的动力