鸿蒙(HarmonyOS)项目方舟框架(ArkUI)之Progress进度条组件
一、操作环境
操作系统: Windows 10 专业版、IDE:DevEco Studio 3.1、SDK:HarmonyOS 3.1
二、Progress组件
进度条也是UI开发最常用的组件之一,进度条组件,用于显示内容加载或操作处理等进度。
接口
Progress(options: {value: number, total?: number, style?: ProgressStyle, type?: ProgressType})
创建进度组件,用于显示内容加载或操作处理进度。
参数
参数名 | 参数类型 | 必填 | 参数描述 |
---|---|---|---|
value | number | 是 | 指定当前进度值。 |
total | number | 否 | 指定进度总长。 默认值:100 |
type8+ | ProgressType | 否 | 指定进度条类型。 默认值:ProgressType.Linear |
styledeprecated | ProgressStyle | 否 | 指定进度条类型。 该参数从API Version8开始废弃,建议使用type替代。 默认值:ProgressStyle.Linear |
ProgressType枚举说明
名称 | 描述 |
---|---|
Linear | 线性样式。 |
Ring8+ | 环形无刻度样式,环形圆环逐渐显示至完全填充效果。 |
Eclipse | 圆形样式,显示类似月圆月缺的进度展示效果,从月牙逐渐变化至满月。 |
ScaleRing8+ | 环形有刻度样式,显示类似时钟刻度形式的进度展示效果。 |
Capsule8+ | 胶囊样式,头尾两端圆弧处的进度展示效果与Eclipse相同;中段处的进度展示效果与Linear相同。 |
ProgressStyle枚举说明
名称 | 描述 |
---|---|
Linear | 线性样式。 |
Ring | 环形无刻度样式,环形圆环逐渐显示至完全填充效果。 |
Eclipse | 圆形样式,显示类似月圆月缺的进度展示效果,从月牙逐渐变化至满月。 |
ScaleRing | 环形有刻度样式,显示类似时钟刻度形式的进度展示效果。 |
Capsule | 胶囊样式,头尾两端圆弧处的进度展示效果与Eclipse相同;中段处的进度展示效果与Linear相同。 |
属性
名称 | 参数类型 | 描述 |
---|---|---|
value | number | 设置当前进度值。 |
color | ResourceColor | 设置进度条前景色。 |
style8+ | { strokeWidth?: Length, scaleCount?: number, scaleWidth?: Length } | 定义组件的样式。 strokeWidth: 设置进度条宽度。 scaleCount: 设置环形进度条总刻度数。 scaleWidth: 设置环形进度条刻度粗细。 刻度粗细大于进度条宽度时,刻度粗细为系统默认粗细。 |
三、示例
// @ts-nocheck
@Entry
@Component
struct Index {// @ts-ignore@State message: string = 'Hello World'build() {Row() {Column() {Progress({value: 85, // 设置当前进度type: ProgressType.ScaleRing // 设置进度条的样式为环形刻度样式}).size({width: 80, height: 80})Progress({value: 85, // 设置当前进度total: 100, // 设置进度总量type: ProgressType.Capsule // 设置进度条的样式为胶囊样式}).size({width: 120, height: 50})Progress({value: 85, // 设置当前进度total: 100, // 设置进度总量type: ProgressType.Eclipse // 设置进度条的样式为圆形样式}).size({width: 80, height: 80})Progress({value: 85, // 设置当前进度total: 100, // 设置进度总量type: ProgressType.Linear // 设置进度条的样式为条形样式}).size({width: '100%', height: 40})Progress({value: 85, // 设置当前进度total: 100, // 设置进度总量type: ProgressType.Ring // 设置进度条的样式为环形样式}).size({width: 80, height: 80})}.width('100%')}.height('100%')}
}
好了就写到这吧!
你有时间常去我家看看我在这里谢谢你啦...
我家地址:亚丁号
最后送大家一首诗:
山高路远坑深,
大军纵横驰奔,
谁敢横刀立马?
惟有点赞加关注大军。