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

好了就写到这吧!

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

我家地址:亚丁号

最后送大家一首诗:

山高路远坑深,

大军纵横驰奔,

谁敢横刀立马?

惟有点赞加关注大军。

相关推荐
coder_pig8 小时前
跟🤡杰哥一起学Flutter (三十四、玩转Flutter手势✋)
前端·flutter·harmonyos
simple丶8 小时前
【HarmonyOS】鸿蒙蓝牙连接与通信技术
harmonyos·arkts·arkui
前端世界10 小时前
HarmonyOS开发实战:鸿蒙分布式生态构建与多设备协同发布全流程详解
分布式·华为·harmonyos
Jalor11 小时前
Flutter + 鸿蒙 | Flutter 跳转鸿蒙原生界面
flutter·harmonyos
zhanshuo12 小时前
开发者必看!如何在HarmonyOS中快速调用摄像头功能
harmonyos
HMSCore12 小时前
借助HarmonyOS SDK,《NBA巅峰对决》实现“分钟级启动”到“秒级进场”
harmonyos
zhanshuo12 小时前
鸿蒙UI开发全解:JS与Java双引擎实战指南
前端·javascript·harmonyos
HarmonyOS小助手12 小时前
闯入鸿蒙:浪漫、理想与「草台班子」
harmonyos·鸿蒙·harmonyos next·鸿蒙生态
xq952713 小时前
flutter 鸿蒙化插件开发横空出世
harmonyos
HarmonyOS_SDK13 小时前
借助HarmonyOS SDK,《NBA巅峰对决》实现“分钟级启动”到“秒级进场”
harmonyos