進(jìn)度條（Progress）

Progress是進(jìn)度條顯示組件，顯示內(nèi)容通常為某次目標(biāo)操作的當(dāng)前進(jìn)度。具體用法請參考Progress。

Progress(options: {value: number, total?: number, type?: ProgressType})

該接口用于創(chuàng)建type樣式的進(jìn)度條，其中value用于設(shè)置初始進(jìn)度值，total用于設(shè)置進(jìn)度總長度，type決定Progress樣式。

Progress({ value: 24, total: 100, type: ProgressType.Linear }) // 創(chuàng)建一個進(jìn)度總長為100，初始進(jìn)度值為24的線性進(jìn)度條

• 線性樣式進(jìn)度條（默認(rèn)類型）
  說明

  從API version9開始，組件高度大于寬度的時候自適應(yīng)垂直顯示，相等時仍然保持水平顯示。

  Progress({ value: 20, total: 100, type: ProgressType.Linear }).width(200).height(50)
  Progress({ value: 20, total: 100, type: ProgressType.Linear }).width(50).height(200)

  

• 環(huán)形無刻度樣式進(jìn)度條

  // 從左往右，1號環(huán)形進(jìn)度條，默認(rèn)前景色為藍(lán)色，默認(rèn)strokeWidth進(jìn)度條寬度為2.0vp
  Progress({ value: 40, total: 150, type: ProgressType.Ring }).width(100).height(100)
  // 從左往右，2號環(huán)形進(jìn)度條
  Progress({ value: 40, total: 150, type: ProgressType.Ring }).width(100).height(100)
      .color(Color.Grey)    // 進(jìn)度條前景色為灰色
      .style({ strokeWidth: 15})    // 設(shè)置strokeWidth進(jìn)度條寬度為15.0vp

  

• 環(huán)形有刻度樣式進(jìn)度條

  Progress({ value: 20, total: 150, type: ProgressType.ScaleRing }).width(100).height(100)
      .backgroundColor(Color.Black)
      .style({ scaleCount: 20, scaleWidth: 5 })    // 設(shè)置環(huán)形有刻度進(jìn)度條總刻度數(shù)為20，刻度寬度為5vp
  Progress({ value: 20, total: 150, type: ProgressType.ScaleRing }).width(100).height(100)
      .backgroundColor(Color.Black)
      .style({ strokeWidth: 15, scaleCount: 20, scaleWidth: 5 })    // 設(shè)置環(huán)形有刻度進(jìn)度條寬度15，總刻度數(shù)為20，刻度寬度為5vp
  Progress({ value: 20, total: 150, type: ProgressType.ScaleRing }).width(100).height(100)
      .backgroundColor(Color.Black)
      .style({ strokeWidth: 15, scaleCount: 20, scaleWidth: 3 })    // 設(shè)置環(huán)形有刻度進(jìn)度條寬度15，總刻度數(shù)為20，刻度寬度為3vp

  

• 圓形樣式進(jìn)度條

  // 從左往右，1號圓形進(jìn)度條，默認(rèn)前景色為藍(lán)色
  Progress({ value: 10, total: 150, type: ProgressType.Eclipse }).width(100).height(100)
  // 從左往右，2號圓形進(jìn)度條，指定前景色為灰色
  Progress({ value: 20, total: 150, type: ProgressType.Eclipse }).color(Color.Grey).width(100).height(100)

  

• 膠囊樣式進(jìn)度條
  說明

  1、頭尾兩端圓弧處的進(jìn)度展示效果與ProgressType.Eclipse樣式相同；

  2、中段處的進(jìn)度展示效果為矩形狀長條，與ProgressType.Linear線性樣式相似；

  3、組件高度大于寬度的時候自適應(yīng)垂直顯示。

  Progress({ value: 10, total: 150, type: ProgressType.Capsule }).width(100).height(50)
  Progress({ value: 20, total: 150, type: ProgressType.Capsule }).width(50).height(100).color(Color.Grey)
  Progress({ value: 50, total: 150, type: ProgressType.Capsule }).width(50).height(100).backgroundColor(Color.Black)

  

@Entry
@Component
struct ProgressCase1 { 
  @State progressValue: number = 0    // 設(shè)置進(jìn)度條初始值為0
  build() {
    Column() {
      Column() {
        Progress({value:0, total:100, type:ProgressType.Capsule}).width(200).height(50)
          .style({strokeWidth:50}).value(this.progressValue)
        Row().width('100%').height(5)
        Button("進(jìn)度條+5")
          .onClick(()=>{
            this.progressValue += 5
            if (this.progressValue > 100){
              this.progressValue = 0
            }
          })
      }
    }.width('100%').height('100%')
  }
}