鸿蒙（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%')
}
}
好了就写到这吧！
你有时间常去我家看看我在这里谢谢你啦...
我家地址:亚丁号
最后送大家一首诗:
山高路远坑深,
大军纵横驰奔,
谁敢横刀立马？
惟有点赞加关注大军。
