【鸿蒙学习笔记】基础组件Progress：进度条组件

官方文档：Progress

目录标题

• 作用
• 最全属性迭代
• 进度赋值
• 风格样式

作用

进度条组件

最全属性迭代

Progress({ value: 20, total: 100, type: ProgressType.Linear })
  .color(Color.Green)// 颜色
  .width(200)// 大小
  .height(50)// 高度
  .value(50)// 进度可更新,20% → 50%
  .style({ strokeWidth: 10, scaleCount: 30, scaleWidth: 6, shadow: true }) // 设置进度条宽度,设置环形进度条总刻度数,设置环形进度条刻度粗细

进度赋值

Progress({ value: 20, type: ProgressType.Linear }).width(200) // 默认总数为100,20%
Progress({ value: 40, total: 200, type: ProgressType.Linear }).color(Color.Green).width(200) // 指定总数,20%
Progress({ value: 20, total: 100, type: ProgressType.Linear }).color(Color.Green).width(200).value(50) // 进度可更新,20% → 50%

风格样式

Column({ space: 15 }) {
  Text('Linear ').fontSize(15).fontColor(Color.Black).width('90%')
  Progress({ value: 20, type: ProgressType.Linear }).width(100)
  Text('Eclipse ').fontSize(15).fontColor(Color.Black).width('90%')
  Row({ space: 40 }) {
    Progress({ value: 10, type: ProgressType.Eclipse }).width(100)
  }
  Text('ScaleRing ').fontSize(15).fontColor(Color.Black).width('90%')
  Row({ space: 40 }) {
    Progress({ value: 50, type: ProgressType.ScaleRing }).width(100).style({ strokeWidth: 20, scaleCount: 30, scaleWidth: 9 })
  }
  Text('Ring ').fontSize(15).fontColor(Color.Black).width('90%')
  Row({ space: 40 }) {
    Progress({ value: 50, type: ProgressType.Ring }).width(100).style({ strokeWidth: 8})
  }
  Text('Capsule ').fontSize(15).fontColor(Color.Black).width('90%')
  Row({ space: 40 }) {
    Progress({ value: 50, type: ProgressType.Capsule }).width(100)
  }
}.width('100%').margin({ top: 30 })