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

1、描述

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

2、接口

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

参数：

参数名	参数类型	必填	参数描述
value	number	是	指定当前进度值。设置小于0的数值时置为0，设置大于total的数值时置为total。
total	number	否	指定进度总长。默认值为100。
type	ProgressType	否	指定进度条类型。默认值：ProgressType.Linear
Style	ProgressStyle	否	指定进度条样式。默认值： ProgressStyle.Linear

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

ProgressType说明：

名称	描述
Linear	线性样式。
Ring	环形无刻度样式，环形圆环逐渐显示至完全填充效果。
Eclipse	圆形样式，显示类似月圆月缺的进度展示效果，从月缺逐渐至月满。
ScaleRing	环形有刻度样式，显示类似时钟刻度效果。
Capsule	胶囊样式，头尾两端都有弧度。

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 })
  }
}

效果图：