HarmonyOS 鸿蒙Next中Progress 进度条与加载状态

HarmonyOS 鸿蒙Next中Progress 进度条与加载状态 ArkUI 提供了哪些进度展示组件？如何实现线性进度条、环形进度条？如何自定义进度条样式？如何实现加载动画？（问题来源项目案例整理:https://github.com/heqiyuan35-creator/HydroQuiz.git）

3 回复

ArkUI 提供了 Progress 和 LoadingProgress 组件用于展示进度和加载状态。

线性进度条：

// 基础进度条
Progress({ value: this.progress, total: 100, type: ProgressType.Linear })
  .width('100%')
  .height(8)
  .color('#1890FF')
  .backgroundColor('#E8E8E8')

// 带文字的进度条
Row() {
  Progress({ value: this.progress, total: 100, type: ProgressType.Linear })
    .width('80%')
    .height(8)

  Text(`${this.progress}%`)
    .fontSize(12)
    .margin({ left: 8 })
}

环形进度条：

Progress({ value: this.progress, total: 100, type: ProgressType.Ring })
  .width(100)
  .height(100)
  .color('#1890FF')
  .style({ strokeWidth: 8 })

胶囊进度条：

Progress({ value: this.progress, total: 100, type: ProgressType.Capsule })
  .width(200)
  .height(40)
  .color('#1890FF')

加载动画：

// 系统加载动画
LoadingProgress()
  .width(48)
  .height(48)
  .color('#1890FF')

// 自定义加载状态
@State isLoading: boolean = true;

Stack() {
  // 内容
  ContentView()
    .visibility(this.isLoading ? Visibility.Hidden : Visibility.Visible)

  // 加载遮罩
  if (this.isLoading) {
    Column() {
      LoadingProgress()
        .width(48)
        .height(48)
      Text('加载中...')
        .fontSize(14)
        .margin({ top: 12 })
    }
    .width('100%')
    .height('100%')
    .justifyContent(FlexAlign.Center)
    .backgroundColor('rgba(255,255,255,0.9)')
  }
}

更多关于HarmonyOS 鸿蒙Next中Progress 进度条与加载状态的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


HarmonyOS Next的Progress组件提供线性、环形和刻度三种进度条样式，支持动态进度展示与加载状态管理。开发者可通过ProgressOptions配置进度值、最大值、样式类型及颜色。加载状态通过ProgressStatus枚举控制，包括初始、加载中、加载成功和加载失败四种状态。组件支持事件监听，如onChange用于进度变化回调。

在HarmonyOS Next的ArkUI中，进度展示主要通过Progress组件实现，它支持线性和环形两种形态，并能方便地定制样式与结合加载动画。

1. 核心组件：Progress Progress组件是展示操作进度的核心，通过value属性设置当前进度值（0到100之间），type属性指定进度条类型。

2. 实现线性进度条 将type设置为ProgressType.Linear即可创建水平线性进度条。你可以通过style属性自定义其高度、颜色等。

// 基础线性进度条（进度为40%）
Progress({ value: 40, type: ProgressType.Linear })
  .width('80%')
  .height(10)

// 自定义样式的线性进度条
Progress({ value: 60, type: ProgressType.Linear })
  .width('90%')
  .height(12)
  .color(Color.Blue) // 设置进度条颜色
  .backgroundColor('#E5E5E5') // 设置背景色

3. 实现环形进度条 将type设置为ProgressType.Ring或ProgressType.ScaleRing（带刻度）即可创建环形进度条。环形进度条支持更丰富的样式定制。

// 基础环形进度条
Progress({ value: 70, type: ProgressType.Ring })
  .width(100)
  .height(100)

// 带刻度的环形进度条与自定义样式
Progress({ value: 80, type: ProgressType.ScaleRing })
  .width(120)
  .height(120)
  .color(Color.Green)
  .style({ strokeWidth: 10, scaleCount: 50, scaleWidth: 3 }) // 设置环形宽度、刻度数量与宽度

4. 自定义进度条样式 除了上述示例中的基础样式属性（color, backgroundColor, width, height），你还可以通过以下方式深度定制：

  • 线性进度条：使用ProgressStyle的strokeWidth设置线条粗细。
  • 环形进度条：使用ProgressStyle的strokeWidth设置环的粗细，shadow属性添加阴影效果，scaleCount和scaleWidth控制刻度（仅对ScaleRing有效）。
// 高度定制的环形进度条
Progress({ value: 90, type: ProgressType.Ring })
  .width(150)
  .height(150)
  .style({
    strokeWidth: 15,
    shadow: {
      radius: 10,
      color: Color.Grey
    }
  })

5. 实现加载动画 对于不确定进度的等待场景（如下拉刷新），可以将Progress组件的value属性设置为undefined，此时进度条会显示循环动画。

// 线性加载动画（无限循环）
Progress({ value: undefined, type: ProgressType.Linear })
  .width('80%')
  .height(8)

// 环形加载动画（无限循环）
Progress({ value: undefined, type: ProgressType.Ring })
  .width(80)
  .height(80)

你还可以通过Progress组件的controller属性，结合animateTo方法，实现进度值从当前值到目标值的平滑动画过渡。

总结：ArkUI的Progress组件功能全面，通过type切换线性和环形，通过value控制进度或启动加载动画，并通过丰富的样式属性及ProgressStyle实现高度自定义的视觉效果，能满足绝大多数进度展示需求。

回到顶部