0
  • 聊天消息
  • 系统消息
  • 评论与回复
登录后你可以
  • 下载海量资料
  • 学习在线课程
  • 观看技术视频
  • 写文章/发帖/加入社区
会员中心
创作中心

完善资料让更多小伙伴认识你,还能领取20积分哦,立即完善>

3天内不再提示

鸿蒙ArkTS声明式组件:Progress

jf_46214456 来源:jf_46214456 作者:jf_46214456 2024-06-27 14:48 次阅读

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进度更新中。

事件

支持[通用事件]。
HarmonyOSOpenHarmony鸿蒙文档籽料:mau123789是v直接拿

搜狗高速浏览器截图20240326151450.png

示例

示例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 })
  }
}

progress

示例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 })
  }
}

ringProgressStyleEffect

示例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 })
  }
}

ringProgressAnimation

示例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 })
  }
}

capsuleProgressStyleEffect

示例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})
  }
}

progressSmoothEffect

审核编辑 黄宇

声明:本文内容及配图由入驻作者撰写或者入驻合作网站授权转载。文章观点仅代表作者本人,不代表电子发烧友网立场。文章及其配图仅供工程师学习之用,如有内容侵权或者其他违规问题,请联系本站处理。 举报投诉
  • 组件
    +关注

    关注

    1

    文章

    512

    浏览量

    17813
  • 鸿蒙
    +关注

    关注

    57

    文章

    2339

    浏览量

    42818
收藏 人收藏

    评论

    相关推荐

    HarmonyOS/OpenHarmony应用开发-ArkTS声明开发范式

    轨迹。状态与数据管理状态数据管理作为基于ArkTS声明开发范式的特色,通过功能不同的装饰器给开发者提供了清晰的页面更新渲染流程和管道。状态管理包括UI组件状态和应用程序状态,两者协
    发表于 01-17 15:09

    鸿蒙ArkTS声明组件:Blank

    空白填充组件,在容器主轴方向上,空白填充组件具有自动填充容器空余部分的能力。仅当父组件为Row/Column/Flex时生效。
    的头像 发表于 06-19 16:21 549次阅读
    <b class='flag-5'>鸿蒙</b><b class='flag-5'>ArkTS</b><b class='flag-5'>声明</b><b class='flag-5'>式</b><b class='flag-5'>组件</b>:Blank

    鸿蒙ArkTS声明组件:DataPanel

    数据面板组件,用于将多个数据占比情况使用占比图进行展示。
    的头像 发表于 06-21 09:42 403次阅读
    <b class='flag-5'>鸿蒙</b><b class='flag-5'>ArkTS</b><b class='flag-5'>声明</b><b class='flag-5'>式</b><b class='flag-5'>组件</b>:DataPanel

    鸿蒙ArkTS声明组件:Marquee

    跑马灯组件,用于滚动展示一段单行文本。仅当文本内容宽度超过跑马灯组件宽度时滚动,不超过时不滚动。
    的头像 发表于 06-25 15:52 418次阅读
    <b class='flag-5'>鸿蒙</b><b class='flag-5'>ArkTS</b><b class='flag-5'>声明</b><b class='flag-5'>式</b><b class='flag-5'>组件</b>:Marquee

    鸿蒙ArkTS声明组件:NavDestination

    作为NavRouter组件的子组件,用于显示导航内容区。
    的头像 发表于 06-27 14:05 487次阅读
    <b class='flag-5'>鸿蒙</b><b class='flag-5'>ArkTS</b><b class='flag-5'>声明</b><b class='flag-5'>式</b><b class='flag-5'>组件</b>:NavDestination

    鸿蒙ArkTS声明组件:PatternLock

    图案密码锁组件,以九宫格图案的方式输入密码,用于密码验证场景。手指在PatternLock组件区域按下时开始进入输入状态,手指离开屏幕时结束输入状态完成密码输入。
    的头像 发表于 06-27 09:59 455次阅读
    <b class='flag-5'>鸿蒙</b><b class='flag-5'>ArkTS</b><b class='flag-5'>声明</b><b class='flag-5'>式</b><b class='flag-5'>组件</b>:PatternLock

    鸿蒙ArkTS声明组件:【RichText】

    富文本组件,解析并显示HTML格式文本。
    的头像 发表于 06-29 09:35 713次阅读
    <b class='flag-5'>鸿蒙</b><b class='flag-5'>ArkTS</b><b class='flag-5'>声明</b><b class='flag-5'>式</b><b class='flag-5'>组件</b>:【RichText】

    鸿蒙ArkTS声明组件:ScrollBar

    滚动条组件ScrollBar,用于配合可滚动组件使用,如List、Grid、Scroll。
    的头像 发表于 07-01 15:52 516次阅读
    <b class='flag-5'>鸿蒙</b><b class='flag-5'>ArkTS</b><b class='flag-5'>声明</b><b class='flag-5'>式</b><b class='flag-5'>组件</b>:ScrollBar

    鸿蒙ArkTS声明组件:Span

    作为Text组件的子组件,用于显示行内文本的组件
    的头像 发表于 07-01 09:14 454次阅读
    <b class='flag-5'>鸿蒙</b><b class='flag-5'>ArkTS</b><b class='flag-5'>声明</b><b class='flag-5'>式</b><b class='flag-5'>组件</b>:Span

    鸿蒙ArkTS声明组件:StepperItem

    用作[Stepper]组件的页面子组件
    的头像 发表于 07-02 17:47 405次阅读
    <b class='flag-5'>鸿蒙</b><b class='flag-5'>ArkTS</b><b class='flag-5'>声明</b><b class='flag-5'>式</b><b class='flag-5'>组件</b>:StepperItem

    鸿蒙ArkTS声明组件:TextArea

    多行文本输入框组件,当输入的文本内容超过组件宽度时会自动换行显示。
    的头像 发表于 07-02 15:02 669次阅读
    <b class='flag-5'>鸿蒙</b><b class='flag-5'>ArkTS</b><b class='flag-5'>声明</b><b class='flag-5'>式</b><b class='flag-5'>组件</b>:TextArea

    鸿蒙ArkTS声明组件:TextInput

    单行文本输入框组件
    的头像 发表于 07-03 09:14 947次阅读
    <b class='flag-5'>鸿蒙</b><b class='flag-5'>ArkTS</b><b class='flag-5'>声明</b><b class='flag-5'>式</b><b class='flag-5'>组件</b>:TextInput

    鸿蒙ArkTS声明组件:TextPicker

    滑动选择文本内容的组件
    的头像 发表于 07-03 15:07 467次阅读
    <b class='flag-5'>鸿蒙</b><b class='flag-5'>ArkTS</b><b class='flag-5'>声明</b><b class='flag-5'>式</b><b class='flag-5'>组件</b>:TextPicker

    鸿蒙ArkTS声明组件:TextTimer

    通过文本显示计时信息并控制其计时器状态的组件
    的头像 发表于 07-03 17:06 502次阅读
    <b class='flag-5'>鸿蒙</b><b class='flag-5'>ArkTS</b><b class='flag-5'>声明</b><b class='flag-5'>式</b><b class='flag-5'>组件</b>:TextTimer

    鸿蒙ArkTS声明组件:XComponent

    可用于EGL/OpenGLES和媒体数据写入,并显示在XComponent组件
    的头像 发表于 07-05 09:56 679次阅读
    <b class='flag-5'>鸿蒙</b><b class='flag-5'>ArkTS</b><b class='flag-5'>声明</b><b class='flag-5'>式</b><b class='flag-5'>组件</b>:XComponent