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

进度条组件，用于显示内容加载或操作处理等进度
官方提供了5种类型的进度条，看一下演示效果：

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

2.style(value: ProgressStyleOptions | CapsuleStyleOptions | RingStyleOptions | LinearStyleOptions | ScaleRingStyleOptions | EclipseStyleOptions)
3.详细看代码中注释

@Entry
@ComponentV2
struct 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 })
  }
}