codecamp

进度条组件

进度条组件,用于显示内容加载或操作处理等进度。

说明

该组件从API version7开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。

子组件

接口

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

创建进度组件,用于显示内容加载或操作处理进度。

从API version 9开始,该接口支持在ArkTS卡片中使用。

参数:

参数名

参数类型

必填

参数描述

value

number

指定当前进度值。设置小于0的数值时置为0,设置大于total的数值时置为total。

从API version 9开始,该接口支持在ArkTS卡片中使用。

total

number

指定进度总长。

默认值:100

从API version 9开始,该接口支持在ArkTS卡片中使用。

type8+

ProgressType

指定进度条类型。

默认值:ProgressType.Linear

从API version 9开始,该接口支持在ArkTS卡片中使用。

styledeprecated

ProgressStyle

指定进度条样式。

该参数从API version8开始废弃,建议使用type替代。

默认值:ProgressStyle.Linear

ProgressType枚举说明

从API version 9开始,该接口支持在ArkTS卡片中使用。

名称

描述

Linear

线性样式。从API version9开始,高度大于宽度的时候自适应垂直显示。

Ring8+

环形无刻度样式,环形圆环逐渐显示至完全填充效果。

Eclipse8+

圆形样式,显示类似月圆月缺的进度展示效果,从月牙逐渐变化至满月。

ScaleRing8+

环形有刻度样式,显示类似时钟刻度形式的进度展示效果。从API version9开始,刻度外圈出现重叠的时候自动转换为环形无刻度进度条。

Capsule8+

胶囊样式,头尾两端圆弧处的进度展示效果与Eclipse相同;中段处的进度展示效果与Linear相同。高度大于宽度的时候自适应垂直显示。

ProgressStyle枚举说明

从API version 9开始,该接口支持在ArkTS卡片中使用。

名称

描述

Linear

线性样式。

Ring

环形无刻度样式,环形圆环逐渐显示至完全填充效果。

Eclipse

圆形样式,显示类似月圆月缺的进度展示效果,从月牙逐渐变化至满月。

ScaleRing

环形有刻度样式,显示类似时钟刻度形式的进度展示效果。

Capsule

胶囊样式,头尾两端圆弧处的进度展示效果与Eclipse相同;中段处的进度展示效果与Linear相同。高度大于宽度的时候自适应垂直显示。

属性

名称

参数类型

描述

value

number

设置当前进度值。设置小于0的数值时置为0,设置大于total的数值时置为total。非法数值不生效。

从API version 9开始,该接口支持在ArkTS卡片中使用。

color

ResourceColor

设置进度条前景色。

默认值:'#ff007dff'

从API version 9开始,该接口支持在ArkTS卡片中使用。

backgroundColor

ResourceColor

设置进度条底色。

默认值:'#19182431'

从API version 9开始,该接口支持在ArkTS卡片中使用。

style8+

{

strokeWidth?: Length,

scaleCount?: number,

scaleWidth?: Length

}

定义组件的样式。

- strokeWidth: 设置进度条宽度(不支持百分比设置)。从API version9开始,环形进度条设置宽度大于等于半径时,默认修改宽度至半径值的二分之一。

默认值:4.0Vp

- scaleCount: 设置环形进度条总刻度数。

默认值:120

- scaleWidth: 设置环形进度条刻度粗细(不支持百分比设置),刻度粗细大于进度条宽度时,为系统默认粗细。

默认值:2.0Vp

从API version 9开始,该接口支持在ArkTS卡片中使用。

事件

支持通用事件

示例

  1. // xxx.ets
  2. @Entry
  3. @Component
  4. struct ProgressExample {
  5. build() {
  6. Column({ space: 15 }) {
  7. Text('Linear Progress').fontSize(9).fontColor(0xCCCCCC).width('90%')
  8. Progress({ value: 10, type: ProgressType.Linear }).width(200)
  9. Progress({ value: 20, total: 150, type: ProgressType.Linear }).color(Color.Grey).value(50).width(200)
  10. Text('Eclipse Progress').fontSize(9).fontColor(0xCCCCCC).width('90%')
  11. Row({ space: 40 }) {
  12. Progress({ value: 10, type: ProgressType.Eclipse }).width(100)
  13. Progress({ value: 20, total: 150, type: ProgressType.Eclipse }).color(Color.Grey).value(50).width(100)
  14. }
  15. Text('ScaleRing Progress').fontSize(9).fontColor(0xCCCCCC).width('90%')
  16. Row({ space: 40 }) {
  17. Progress({ value: 10, type: ProgressType.ScaleRing }).width(100)
  18. Progress({ value: 20, total: 150, type: ProgressType.ScaleRing })
  19. .color(Color.Grey).value(50).width(100)
  20. .style({ strokeWidth: 15, scaleCount: 15, scaleWidth: 5 })
  21. }
  22. // scaleCount和scaleWidth效果对比
  23. Row({ space: 40 }) {
  24. Progress({ value: 20, total: 150, type: ProgressType.ScaleRing })
  25. .color(Color.Grey).value(50).width(100)
  26. .style({ strokeWidth: 20, scaleCount: 20, scaleWidth: 5 })
  27. Progress({ value: 20, total: 150, type: ProgressType.ScaleRing })
  28. .color(Color.Grey).value(50).width(100)
  29. .style({ strokeWidth: 20, scaleCount: 30, scaleWidth: 3 })
  30. }
  31. Text('Ring Progress').fontSize(9).fontColor(0xCCCCCC).width('90%')
  32. Row({ space: 40 }) {
  33. Progress({ value: 10, type: ProgressType.Ring }).width(100)
  34. Progress({ value: 20, total: 150, type: ProgressType.Ring })
  35. .color(Color.Grey).value(50).width(100)
  36. .style({ strokeWidth: 20, scaleCount: 30, scaleWidth: 20 })
  37. }
  38. Text('Capsule Progress').fontSize(9).fontColor(0xCCCCCC).width('90%')
  39. Row({ space: 40 }) {
  40. Progress({ value: 10, type: ProgressType.Capsule }).width(100).height(50)
  41. Progress({ value: 20, total: 150, type: ProgressType.Capsule })
  42. .color(Color.Grey)
  43. .value(50)
  44. .width(100)
  45. .height(50)
  46. }
  47. }.width('100%').margin({ top: 30 })
  48. }
  49. }

图案密码锁组件
用于显示单个二维码的组件
温馨提示
下载编程狮App,免费阅读超1000+编程语言教程
取消
确定
目录

媒体组件

像素

枚举

类型

接口

关闭

MIP.setData({ 'pageTheme' : getCookie('pageTheme') || {'day':true, 'night':false}, 'pageFontSize' : getCookie('pageFontSize') || 20 }); MIP.watch('pageTheme', function(newValue){ setCookie('pageTheme', JSON.stringify(newValue)) }); MIP.watch('pageFontSize', function(newValue){ setCookie('pageFontSize', newValue) }); function setCookie(name, value){ var days = 1; var exp = new Date(); exp.setTime(exp.getTime() + days*24*60*60*1000); document.cookie = name + '=' + value + ';expires=' + exp.toUTCString(); } function getCookie(name){ var reg = new RegExp('(^| )' + name + '=([^;]*)(;|$)'); return document.cookie.match(reg) ? JSON.parse(document.cookie.match(reg)[2]) : null; }