鸿蒙ArkTS声明式组件：Progress

jf_46214456 2024-06-27 129

电子说

1.2w人已加入

描述

Progress

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

说明：
开发前请熟悉鸿蒙开发指导文档 ：[gitee.com/li-shizhen-skin/harmony-os/blob/master/README.md]
该组件从API version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。

子组件

无

接口

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

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

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

参数:

参数名参数类型必填参数描述
valuenumber是指定当前进度值。设置小于0的数值时置为0，设置大于total的数值时置为total。 从API version 9开始，该接口支持在ArkTS卡片中使用。
totalnumber否指定进度总长。 默认值：100 从API version 9开始，该接口支持在ArkTS卡片中使用。
type8+[ProgressType]否指定进度条类型。 默认值：ProgressType.Linear 从API version 9开始，该接口支持在ArkTS卡片中使用。

ProgressType枚举说明

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

名称描述
Linear线性样式。从API version9开始，高度大于宽度的时候自适应垂直显示。
Ring8+环形无刻度样式，环形圆环逐渐显示至完全填充效果。
Eclipse8+圆形样式，显示类似月圆月缺的进度展示效果，从月牙逐渐变化至满月。
ScaleRing8+环形有刻度样式，显示类似时钟刻度形式的进度展示效果。从API version9开始，刻度外圈出现重叠的时候自动转换为环形无刻度进度条。
Capsule8+胶囊样式，头尾两端圆弧处的进度展示效果与Eclipse相同；中段处的进度展示效果与Linear相同。高度大于宽度的时候自适应垂直显示。

属性

除支持[通用属性]外，还支持以下属性：

名称参数类型描述
valuenumber设置当前进度值。设置小于0的数值时置为0，设置大于total的数值时置为total。非法数值不生效。 从API version 9开始，该接口支持在ArkTS卡片中使用。
color[ResourceColor][LinearGradient10+]
backgroundColor[ResourceColor]设置进度条底色。 默认值（API version 9）：'#19182431' 默认值（API version 10）： - Capsule：'#33ffffff' - Ring：'#08182431' - 其他样式：'#19182431' 从API version 9开始，该接口支持在ArkTS卡片中使用。**说明：**当设置[通用属性backgroundColor]时，生效的是进度条的底色，而不是整个Progress组件的背景色。
style8+[ProgressStyleOptions][CapsuleStyleOptions10+]

ProgressStyleOptions

名称参数类型必填描述
strokeWidth[Length]否设置进度条宽度（不支持百分比设置）。 默认值：4.0vp
scaleCountnumber否设置环形进度条总刻度数。 默认值：120
scaleWidth[Length]否设置环形进度条刻度粗细（不支持百分比设置），刻度粗细大于进度条宽度时，为系统默认粗细。 默认值：2.0vp
enableSmoothEffect10+boolean否进度平滑动效的开关。开启平滑动效后设置进度，进度会从当前值渐变至设定值，否则进度从当前值突变至设定值。 默认值：true

CapsuleStyleOptions10+

名称参数类型必填描述
borderColor[ResourceColor]否内描边颜色。 默认值：'#33006cde'
borderWidth[Length]否内描边宽度（不支持百分比设置）。 默认值：1vp
contentstring否文本内容，应用可自定义。
font[Font]否文本样式。 默认值： - 文本大小（不支持百分比设置）：12fp 其他文本参数跟随text组件的主题值。
fontColor[ResourceColor]否文本颜色。 默认值：'#ff182431'
enableScanEffectboolean否扫光效果的开关。 默认值：false
showDefaultPercentageboolean否显示百分比文本的开关，开启后会在进度条上显示当前进度的百分比。设置了content属性时该属性不生效。 默认值：false
enableSmoothEffectboolean否进度平滑动效的开关。开启平滑动效后设置进度，进度会从当前值渐变至设定值，否则进度从当前值突变至设定值。 默认值：true

RingStyleOptions10+

名称参数类型必填描述
strokeWidth[Length]否设置进度条宽度（不支持百分比设置），宽度大于等于半径时，默认修改宽度至半径值的二分之一。 默认值：4.0vp
shadowboolean否进度条阴影开关。 默认值：false
status[ProgressStatus10+]否进度条状态，当设置为LOADING时会开启检查更新动效，此时设置进度值不生效。当从LOADING设置为PROGRESSING，检查更新动效会执行到终点再停止。 默认值： ProgressStatus.PROGRESSING
enableScanEffectboolean否进度条扫光效果的开关。 默认值： false
enableSmoothEffectboolean否进度平滑动效的开关。开启平滑动效后设置进度，进度会从当前值渐变至设定值，否则进度从当前值突变至设定值。 默认值：true

LinearStyleOptions10+

名称参数类型必填描述
strokeWidth[Length]否设置进度条宽度（不支持百分比设置）。 默认值：4.0vp
strokeRadius[PX][VP][LPX]
enableScanEffectboolean否进度条扫光效果的开关。 默认值： false
enableSmoothEffectboolean否进度平滑动效的开关。开启平滑动效后设置进度，进度会从当前值渐变至设定值，否则进度从当前值突变至设定值。 默认值：true

ScaleRingStyleOptions10+

名称参数类型必填描述
strokeWidth[Length]否设置进度条宽度（不支持百分比设置）。 默认值：4.0vp
scaleCountnumber否设置环形进度条总刻度数。 默认值：120
scaleWidth[Length]否设置环形进度条刻度粗细（不支持百分比设置），刻度粗细大于进度条宽度时，为系统默认粗细。 默认值：2.0vp
enableSmoothEffectboolean否进度平滑动效的开关。开启平滑动效后设置进度，进度会从当前值渐变至设定值，否则进度从当前值突变至设定值。 默认值：true

ProgressStatus10+枚举说明

名称描述
LOADING加载中。
PROGRESSING进度更新中。

事件

支持[通用事件]。
HarmonyOS与OpenHarmony鸿蒙文档籽料：mau123789是v直接拿

组件

示例

示例1

各进度条基础属性效果

// xxx.ets
@Entry
@Component
struct ProgressExample {
  build() {
    Column({ space: 15 }) {
      Text('Linear Progress').fontSize(9).fontColor(0xCCCCCC).width('90%')
      Progress({ value: 10, type: ProgressType.Linear }).width(200)
      Progress({ value: 20, total: 150, type: ProgressType.Linear }).color(Color.Grey).value(50).width(200)


      Text('Eclipse Progress').fontSize(9).fontColor(0xCCCCCC).width('90%')
      Row({ space: 40 }) {
        Progress({ value: 10, type: ProgressType.Eclipse }).width(100)
        Progress({ value: 20, total: 150, type: ProgressType.Eclipse }).color(Color.Grey).value(50).width(100)
      }

      Text('ScaleRing Progress').fontSize(9).fontColor(0xCCCCCC).width('90%')
      Row({ space: 40 }) {
        Progress({ value: 10, type: ProgressType.ScaleRing }).width(100)
        Progress({ value: 20, total: 150, type: ProgressType.ScaleRing })
          .color(Color.Grey).value(50).width(100)
          .style({ strokeWidth: 15, scaleCount: 15, scaleWidth: 5 })
      }

      // scaleCount和scaleWidth效果对比
      Row({ space: 40 }) {
        Progress({ value: 20, total: 150, type: ProgressType.ScaleRing })
          .color(Color.Grey).value(50).width(100)
          .style({ strokeWidth: 20, scaleCount: 20, scaleWidth: 5 })
        Progress({ value: 20, total: 150, type: ProgressType.ScaleRing })
          .color(Color.Grey).value(50).width(100)
          .style({ strokeWidth: 20, scaleCount: 30, scaleWidth: 3 })
      }

      Text('Ring Progress').fontSize(9).fontColor(0xCCCCCC).width('90%')
      Row({ space: 40 }) {
        Progress({ value: 10, type: ProgressType.Ring }).width(100)
        Progress({ value: 20, total: 150, type: ProgressType.Ring })
          .color(Color.Grey).value(50).width(100)
          .style({ strokeWidth: 20 })
      }

      Text('Capsule Progress').fontSize(9).fontColor(0xCCCCCC).width('90%')
      Row({ space: 40 }) {
        Progress({ value: 10, type: ProgressType.Capsule }).width(100).height(50)
        Progress({ value: 20, total: 150, type: ProgressType.Capsule })
          .color(Color.Grey)
          .value(50)
          .width(100)
          .height(50)
      }
    }.width('100%').margin({ top: 30 })
  }
}

组件

示例2

环形进度条视觉属性

@Entry
@Component
struct ProgressExample {
  private gradientColor: LinearGradient = new LinearGradient([{ color: Color.Yellow, offset: 0.5 },
                                                              { color: Color.Orange, offset: 1.0 }])
  build() {
    Column({ space: 15 }) {
      Text('Gradient Color').fontSize(9).fontColor(0xCCCCCC).width('90%')
      Progress({ value: 70, total: 100, type: ProgressType.Ring })
        .width(100).style({ strokeWidth: 20 })
        .color(this.gradientColor)

      Text('Shadow').fontSize(9).fontColor(0xCCCCCC).width('90%')
      Progress({ value: 70, total: 100, type: ProgressType.Ring })
        .width(120).color(Color.Orange)
        .style({ strokeWidth: 20, shadow: true })
    }.width('100%').padding({ top: 5 })
  }
}

组件

示例3

环形进度条动效

@Entry
@Component
struct ProgressExample {
  private gradientColor: LinearGradient = new LinearGradient([{ color: Color.Yellow, offset: 0.5 },
                                                              { color: Color.Orange, offset: 1.0 }])
  build() {
    Column({ space: 15 }) {
      Text('Loading Effect').fontSize(9).fontColor(0xCCCCCC).width('90%')
      Progress({ value: 0, total: 100, type: ProgressType.Ring })
        .width(100).color(Color.Blue)
        .style({ strokeWidth: 20, status: ProgressStatus.LOADING })

      Text('Scan Effect').fontSize(9).fontColor(0xCCCCCC).width('90%')
      Progress({ value: 30, total: 100, type: ProgressType.Ring })
        .width(100).color(Color.Orange)
        .style({ strokeWidth: 20, enableScanEffect: true })
    }.width('100%').padding({ top: 5 })
  }
}

组件

示例4

胶囊形进度条视觉属性

@Entry
@Component
struct ProgressExample {

  build() {
    Column({ space: 15 }) {
      Row({ space: 40 }) {
        Progress({ value: 100, total: 100,type: ProgressType.Capsule }).width(100).height(50)
          .style({borderColor: Color.Blue, borderWidth: 1, content: 'Installing...',
                  font: {size: 13, style: FontStyle.Normal}, fontColor: Color.Gray,
                  enableScanEffect: false, showDefaultPercentage: false})
      }
    }.width('100%').padding({ top: 5 })
  }
}

组件

示例5

进度平滑动效

@Entry
@Component
struct Index {
  @State value: number = 0

  build() {
    Column({space: 10}) {
      Text('enableSmoothEffect: true').fontSize(9).fontColor(0xCCCCCC).width('90%').margin(5)
        .margin({top: 20})
      Progress({value: this.value, total: 100, type:ProgressType.Linear})
        .style({strokeWidth: 10, enableSmoothEffect: true})

      Text('enableSmoothEffect: false').fontSize(9).fontColor(0xCCCCCC).width('90%').margin(5)
      Progress({value: this.value, total: 100, type:ProgressType.Linear})
        .style({strokeWidth: 10, enableSmoothEffect: false})

      Button('value +10').onClick(() = > {
        this.value += 10
      })
        .width(75)
        .height(15)
        .fontSize(9)
    }
    .width('50%')
    .height('100%')
    .margin({left:20})
  }
}

组件

审核编辑 黄宇

打开APP阅读更多精彩内容
声明：本文内容及配图由入驻作者撰写或者入驻合作网站授权转载。文章观点仅代表作者本人，不代表电子发烧友网立场。文章及其配图仅供工程师学习之用，如有内容侵权或者其他违规问题，请联系本站处理。 举报投诉

全部0条评论

快来发表一下你的评论吧 !

下载APP
|投诉反馈|电子发烧友网
© 2021 elecfans.com
湘ICP备2023018690号
×
20
完善资料，
赚取积分