第九节HarmonyOS 常用基础组件6-progress

1、描述

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

2、接口

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

参数：

备注：type与style实现效果相同，并且style已废弃。

ProgressType说明：

3、属性：

Value：设置当前进度值

Color：设置进度条前景色。

BackgroundColor：设置进度条底色。

4、实例

@Entry
@Component
struct ProgressPage {
  @State message: string = '进度条组件用于显示内容加载或操作处理等进度。'
  @State progressValue: number = 30;

  build() {
    Row() {
      Scroll() {
        Column() {
          Text(this.message)
            .fontSize(20)
            .width('96%')
            .fontWeight(FontWeight.Bold)
          Blank(12)
          Text("默认样式：")
            .fontSize(20)
            .width('96%')
            .fontWeight(FontWeight.Bold)
          Blank(12)
          Progress({ value: 0, total: 100 })
            .width('96%')
            .color(Color.Green)
            .backgroundColor(Color.Red)
          Blank(12)
          Text("设置进度条底部颜色与进度颜色：")
            .fontSize(20)
            .width('96%')
            .fontWeight(FontWeight.Bold)
          Blank(12)
          Progress({ value: 0, total: 100 })
            .value(this.progressValue)
            .width('96%')
            .color(Color.Green)
            .backgroundColor(Color.Red)
          Blank(12)
          Text("默认线性样式：")
            .fontSize(20)
            .width('96%')
            .fontWeight(FontWeight.Bold)
          Blank(12)
          Progress({ value: 0, total: 100, type: ProgressType.Linear })
            .value(this.progressValue)
            .width('96%')
            .height(12)
            .color(Color.Green)
            .backgroundColor(Color.Red)
          Blank(12)
          Text("圆环样式：无刻度")
            .fontSize(20)
            .width('96%')
            .fontWeight(FontWeight.Bold)
          Blank(12)
          Progress({ value: 0, total: 100, type: ProgressType.Ring })
            .value(this.progressValue)
            .width('30%')
            .color(Color.Green)
            .backgroundColor(Color.Red)
          Blank(12)
          Text("圆形样式：类似月圆月缺")
            .fontSize(20)
            .width('96%')
            .fontWeight(FontWeight.Bold)
          Blank(12)
          Progress({ value: 0, total: 100, type: ProgressType.Eclipse })
            .value(this.progressValue)
            .width('30%')
            .color(Color.Green)
            .backgroundColor(Color.Red)
          Blank(12)
          Text("圆环样式：带刻度")
            .fontSize(20)
            .width('96%')
            .fontWeight(FontWeight.Bold)
          Blank(12)
          Progress({ value: 0, total: 100, type: ProgressType.ScaleRing })
            .value(this.progressValue)
            .width('60%')
            .color(Color.Green)
            .backgroundColor(Color.Red)
          Blank(12)
          Text("胶囊样式：进度条两端都是圆弧状")
            .fontSize(20)
            .width('96%')
            .fontWeight(FontWeight.Bold)
          Blank(12)
          Progress({ value: 0, total: 100, type: ProgressType.Capsule })
            .value(this.progressValue)
            .width('96%')
            .height(12)
            .color(Color.Green)
            .backgroundColor(Color.Red)

        }
        .width('100%')
      }
    }
    .padding({ top: 12, bottom: 12 })
  }
}

效果图：