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

官方文档：Progress

Progress：进度条组件

进度赋值

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

风格样式

@Entry
@Component
struct Progress_page {
  @State message: string = 'Hello World';

  build() {
    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 })
  }
}