鸿蒙(HarmonyOS)项目方舟框架(ArkUI)之Progress进度条组件

鸿蒙(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%')
  }
}

好了就写到这吧!

你有时间常去我家看看我在这里谢谢你啦...

我家地址:亚丁号

最后送大家一首诗:

山高路远坑深,

大军纵横驰奔,

谁敢横刀立马?

惟有点赞加关注大军。

相关推荐
前端菜鸟日常1 小时前
鸿蒙版(ArkTs) 贪吃蛇,包含无敌模式 最高分 暂停和继续功能
华为·harmonyos
鸿蒙布道师7 小时前
鸿蒙NEXT开发数值工具类(TS)
android·ios·华为·harmonyos·arkts·鸿蒙系统·huawei
塞尔维亚大汉11 小时前
鸿蒙南向开发 ——轻量系统芯片移植指南(二)
物联网·嵌入式·harmonyos
别说我什么都不会13 小时前
OpenHarmony内核系统调用hats测试用例编写指南
物联网·嵌入式·harmonyos
90后的晨仔14 小时前
鸿蒙ArkTS是如何实现并发的?
harmonyos
鸿蒙布道师16 小时前
鸿蒙NEXT开发日期工具类(ArkTs)
android·ios·华为·harmonyos·arkts·鸿蒙系统·huawei
HMSCore17 小时前
在应用内购票、寄件时,如何一键填充所需信息?
harmonyos
HarmonyOS_SDK18 小时前
在应用内购票、寄件时,如何一键填充所需信息?
harmonyos
枫叶丹419 小时前
【HarmonyOS Next之旅】DevEco Studio使用指南(十一)
华为·harmonyos·deveco studio·harmonyos next
H_MY19 小时前
鸿蒙 —— 系统图标大全
harmonyos