鸿蒙 Next 进度条组件 Progress 的使用

2025-06-25
北京
本文字数：1559 字
阅读完需：约 5 分钟

进度条组件，用于显示内容加载或操作处理等进度

官方提供了 5 种类型的进度条，看一下演示效果：

注意：只有环形进度条 Ring 支持设置渐变色

1.设置 ProgressOptions

3.详细看代码中注释


@Entry@ComponentV2struct ProgressTest{  public linearColor: LinearGradient = new LinearGradient([{ color: "#65ff00dd", offset: 0.3 }, { color: "#6500ff99", offset: 0.6 }, { color: "#6595ff00", offset: 0.9 }, { color: "#650099ff", offset: 1 }])  public linearColor2: LinearGradient = new LinearGradient([{ color: Color.Yellow, offset: 0.5 }, { color: Color.Green, offset: 1 }])  @Local progress: number = 50;  build() {    Column({space:10}){      Text('ProgressType枚举: total取值范围:[0, 2147483647)')
      Text('Linear线性样式')      Progress({ value: this.progress, total: 150, type: ProgressType.Linear  })        .style({  //LinearStyleOptions          strokeWidth:8,  //设置进度条宽度          strokeRadius:4 //圆角半径        })        .color(Color.Orange)        .width(200)      Text('Ring环形无刻度样式')      Row({space:10}){        Progress({ value: this.progress, total: 150, type: ProgressType.Ring })          .color(this.linearColor2).width(80).height(80)          .style({  //RingStyleOptions            strokeWidth: 10, //设置进度条宽度            shadow:true   //进度条阴影开关
          })        Progress({ value: this.progress, total: 150, type: ProgressType.Ring })          .color(this.linearColor).width(80).height(80)          .style({            strokeWidth: 5, //设置进度条宽度            shadow:false
          })      }
      Text('Eclipse圆形样式')      Progress({ value: this.progress, type: ProgressType.Eclipse }).width(50)      Text('ScaleRing环形有刻度样式')      Row({space:20}){        Progress({ value: this.progress, total: 150, type: ProgressType.ScaleRing })          .color(Color.Red).width(50)          .style({   //ScaleRingStyleOptions            strokeWidth: 15, //设置进度条宽度            scaleCount: 5,  //设置进度条宽度            scaleWidth: 5   //设置环形进度条刻度粗细          })        Progress({ value: this.progress, total: 150, type: ProgressType.ScaleRing })          .color(Color.Blue).width(50)          .style({ strokeWidth: 15, //设置进度条宽度            scaleCount: 10,  //设置进度条宽度            scaleWidth: 5   //设置环形进度条刻度粗细          })      }
      Text('Capsule胶囊样式')      Progress({ value: this.progress, total: 150, type: ProgressType.Capsule })        .color("#007dff")        .width(100)        .height(50)        .style({  //ScaleRingStyleOptions          borderColor: "#33007dff", //内描边颜色          borderWidth:4,//内描边宽度          content:'内容',          font:{size:10}  //文本样式。        })

      Slider({        value: this.progress,        min: 0,        max: 100,        style: SliderStyle.OutSet      })        .onChange((value: number) => {          this.progress = value;        })    }.padding({ left: 20, right: 20 })  }}