Progress是进度条显示组件,显示内容通常为目标操作的当前进度。具体用法请参考Progress。
创建进度条
Progress通过调用接口来创建,接口调用形式如下:
Progress(options: {value: number, total?: number, type?: ProgressType})
其中,value用于设置初始进度值,total用于设置进度总长度,type用于设置Progress样式。
Progress({
value: 30, //当前进度
total: 100, // 总进度
type: ProgressType.Linear //类型
}).padding(10)
设置进度条样式
Progress有5种可选类型,通过ProgressType可以设置进度条样式,ProgressType类型包括:ProgressType.Linear(线性样式)、 ProgressType.Ring(环形无刻度样式)、ProgressType.ScaleRing(环形有刻度样式)、ProgressType.Eclipse(圆形样式)和ProgressType.Capsule(胶囊样式)。
- 环形无刻度样式进度条
Progress({
value: 25,
total: 100,
type: ProgressType.Ring
}).height(100).width(100).color(Color.Orange) .style({ strokeWidth: 10 }) // 宽度
- 环形有刻度样式进度条
Progress({
value: 25,
total: 100,
type: ProgressType.ScaleRing
}).height(100).width(100).color(Color.Orange)
// 设置环形有刻度进度条总刻度数为50,刻度宽度为5vp
.style({ scaleCount: 50, scaleWidth: 5 })
- 圆形样式进度条
Progress({
value: 90,
total: 100,
type: ProgressType.Eclipse
})
- 胶囊样式进度条
Progress({
value: 30,
total: 100,
type: ProgressType.Capsule
}).width(50).height(100)