官方文檔: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 })