ArkUI-进度条(Progress)

项目案例 (opens new window)

arkts-common-components-progress-indicator.md

• 进度条样式:线性,环形无刻度,环形有刻度,圆形,胶囊

案例一

@Entry
@Component
struct ProgressCase1 {
  @State progressValue: number = 0 // 设置进度条初始值为0
  build() {
    Column() {
      Column() {
        Progress({value:0, total:100, type:ProgressType.Capsule})
          .width(200)
          .height(50)
          .value(this.progressValue)

        Row().width('100%').height(5)

        Button("进度条+5")
          .onClick(()=>{
            this.progressValue += 5
            if (this.progressValue > 100){
              this.progressValue = 0
            }
          })

        // 线性样式进度条（默认类型）
        // 创建一个进度总长为100，初始进度值为24的线性进度条
        Progress({ value: this.progressValue, total: 100, type: ProgressType.Linear }).margin(20)

        // 环形无刻度样式进度条
        // 从左往右，1号环形进度条，默认前景色为蓝色渐变，默认strokeWidth进度条宽度为2.0vp
        Progress({ value: this.progressValue, total: 150, type: ProgressType.Ring }).width(100).height(100).margin(20)
        // 从左往右，2号环形进度条
        Progress({ value: this.progressValue, total: 150, type: ProgressType.Ring }).width(100).height(100).margin(20)
          .color(Color.Grey) // 进度条前景色为灰色
          .style({ strokeWidth: 15}) // 设置strokeWidth进度条宽度为15.0vp

        // 环形有刻度样式进度条
        // 圆形样式进度条
        // 胶囊样式进度条
      }
    }.width('100%').height('100%')
  }
}