概述

Progress为进度条组件,用于显示各种进度。

参数

Progress组件的参数定义如下

Progress(options: {value: number, total?: number, type?: ProgressType})

value

value属性用于设置当前进度值。

total

total属性用于设置总值。

type

type属性用于设置进度条类型,可通过ProgressType枚举类型进行设置,可选的枚举值如下

ProgressType.Linear : 线性样式
在这里插入图片描述

ProgressType.Ring : 环形无刻度样式
在这里插入图片描述

ProgressType.Eclipse : 月食样式
在这里插入图片描述

ProgressType.ScaleRing : 环形有刻度样式
在这里插入图片描述

ProgressType.Capsule : 胶囊样式
在这里插入图片描述
胶囊样式如果高比宽大的话进度条会立起来,如果不设宽高会和月食样式相近


常用属性

进度条样式

可通过style()调整进度条的样式,例如进度条的宽度,该方法的参数类型定义如下

style({strokeWidth?: string|number|Resource,scaleCount?: number,scaleWidth?: string|number|Resource})

strokeWidth
strokeWidth属性用于设置进度条的宽度,默认值为4vp。该属性可用于Linear、Ring、ScaleRing三种类型,效果如下
在这里插入图片描述
scaleCount
scaleCount属性用于设置ScaleRing的刻度数,默认值为120。效果如下
在这里插入图片描述
scaleWidth
scaleCount属性用于设置ScaleRing的刻度线的宽度,默认值为2vp。效果如下
在这里插入图片描述

进度条颜色

进度条的颜色可通过color()backgroundColor()方法进行设置,其中color()用于设置前景色,backgroundColor()用于设置背景色,例如
在这里插入图片描述

Logo

讨论HarmonyOS开发技术,专注于API与组件、DevEco Studio、测试、元服务和应用上架分发等。

更多推荐