文章目录

• • @[toc]
• 1.创建进度条
• 2.设置进度条样式（）
• • （1）ProgressType.`Linear`（线性样式)
  • （2）ProgressType.`Ring`（环形无刻度样式）
  • （3）ProgressType.`ScaleRing`（环形有刻度样式）
  • （3）ProgressType.`Eclipse`（圆形样式）
  • （4）ProgressType.`Capsule`（胶囊样式）
  • 完整代码
• 3、实例

进度条 (Progress)

1.创建进度条

创建进度条(官方文档请点击我！)

Progress通过调用接口来创建，接口调用形式如下：

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

value：用于设置初始进度值
total：用于设置进度总长度
type：用于设置Progress样式。

2.设置进度条样式（）

Progress有5种可选类型，通过ProgressType可以设置进度条样式，

ProgressType类型包括：

（1）ProgressType.Linear（线性样式)

（2）ProgressType.Ring（环形无刻度样式）

（3）ProgressType.ScaleRing（环形有刻度样式）

（3）ProgressType.Eclipse（圆形样式）

（4）ProgressType.Capsule（胶囊样式）

头尾两端圆弧处的进度展示效果与ProgressType.Eclipse样式相同。
中段处的进度展示效果为矩形状长条，与ProgressType.Linear线性样式相似。
组件高度大于宽度的时候自适应垂直显示。

完整代码

@Entry
@Component
struct Index01 {
  build() {
    Column() {
      // （1）ProgressType.Linear（线性样式）
      Row({space:10}){
        Progress({value:20,total:100,type:ProgressType.Linear}).width(200).height(50)
        Progress({value:20,total:100,type:ProgressType.Linear}).width(50).height(200)
      }
      // （2）ProgressType.Ring（环形无刻度样式）
      Row({space:10}){
        Progress({value:40,total:150,type:ProgressType.Ring}).width(200).height(50)
        Progress({value:20,total:100,type:ProgressType.Ring}).width(200).height(50)
          .color(Color.Grey)
          .style({strokeWidth:15})
      }
      // （3）ProgressType.ScaleRing（环形有刻度样式）
      Row({space:10}){
        Progress({value:20, total:150, type:ProgressType.ScaleRing}).width(100).height(100)
          .backgroundColor(Color.Black)
          .style({scaleCount:20,scaleWidth:5})
        Progress({value:20, total:150, type:ProgressType.ScaleRing}).width(100).height(100)
          .backgroundColor(Color.Black)
          .style({strokeWidth:15,scaleCount:15,scaleWidth:20})
        Progress({value:20, total:150, type:ProgressType.ScaleRing}).width(100).height(100)
          .backgroundColor(Color.Black)
          .style({strokeWidth:15,scaleCount:20,scaleWidth:3})
      }
      // （3）ProgressType.Eclipse（圆形样式）
      Row({space:10}){
        Progress({value:10, total:150, type:ProgressType.Eclipse}).width(100).height(100)
        Progress({value:10, total:150, type:ProgressType.Eclipse}).width(100).height(100)
          .color(Color.Grey)
      }

      // （4）ProgressType.Capsule（胶囊样式）
      Row({space:10}){
        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)
          .color(Color.Blue).backgroundColor(Color.Black)
      }

    }
  }
}

3、实例

更新当前进度值，如应用安装进度条，可通过点击Button增加progressValue，value属性将progressValue设置给Progress组件，进度条组件即会触发刷新，更新当前进度。

0

  build() {
    Column() {
      Column({space:20}){
        Progress({
          value: this.num,
          total:100,
          type:ProgressType.Capsule
        }).width(200).height(50)

        Button('进度条加5').onClick((event: ClickEvent) => {
          this.num+=5
          if (this.num > 100) {
            this.num=0
          }
        })
      }
    }.width('100%').height('100%')   } } ~~~