当前位置：首页 > news >正文

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

news 2025/7/20 13:51:37

官方文档：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 })