鸿蒙（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})

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

参数

ProgressType枚举说明

ProgressStyle枚举说明

属性

三、示例

// @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%')
  }
}

好了就写到这吧！

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

我家地址:亚丁号

最后送大家一首诗:

山高路远坑深,
大军纵横驰奔,

谁敢横刀立马？
惟有点赞加关注大军。