一、组件介绍

LoadingProgress组件是HarmonyOS NEXT中用于显示加载进度的专用组件。它提供了丰富的加载动画效果和进度展示方式，可以为用户提供清晰的加载状态反馈。

二、基本概念

1. 组件定位

LoadingProgress是一个用于展示加载状态的组件，它具有以下特点：

• 提供多种加载动画样式
• 支持自定义加载效果
• 可控制加载状态
• 适配不同场景需求

2. 应用场景

• 数据加载过程
• 页面切换等待
• 操作执行反馈
• 网络请求状态
• 资源加载提示

三、属性说明

1. 基础属性

• color: 设置加载动画的颜色
• width: 设置组件宽度
• height: 设置组件高度
• visibility: 控制组件显示状态

2. 动画属性

• duration: 设置动画持续时间
• style: 设置加载动画样式
• iterations: 设置动画重复次数

3. 状态属性

• isLoading: 控制加载状态
• progress: 设置加载进度值

四、使用方法

1. 基本用法

Column() {
  LoadingProgress()
    .width(24)
    .height(24)
    .color('#2196F3')
}

2. 自定义样式

Column() {
  LoadingProgress()
    .width(32)
    .height(32)
    .color('#4CAF50')
    .duration(2000)
}

3. 状态控制

Column() {
  LoadingProgress()
    .width(28)
    .height(28)
    .visibility(this.isLoading ? Visibility.Visible : Visibility.None)
}

五、布局技巧

1. 居中布局

• 使用Flex布局居中
• 控制组件大小适中
• 注意与其他元素的间距

2. 组合使用

• 配合文字说明
• 结合容器背景
• 适应父容器大小

3. 响应式处理

• 根据屏幕大小调整
• 适配不同设备
• 保持视觉协调

六、代码示例

1. 全屏加载

Stack() {
  // 主要内容
  Column() {
    Text('页面内容')
  }
  .width('100%')
  
  // 加载遮罩
  Column() {
    LoadingProgress()
      .width(48)
      .height(48)
      .color('#2196F3')
  }
  .width('100%')
  .height('100%')
  .backgroundColor('rgba(0, 0, 0, 0.5)')
  .justifyContent(FlexAlign.Center)
  .visibility(this.isLoading ? Visibility.Visible : Visibility.None)
}

2. 按钮加载

Button() {
  Row() {
    if (this.isLoading) {
      LoadingProgress()
        .width(20)
        .height(20)
        .color(Color.White)
        .margin({ right: 8 })
    }
    Text(this.isLoading ? '加载中...' : '提交')
  }
}
.width(120)
.height(40)
.backgroundColor(this.isLoading ? '#BDBDBD' : '#2196F3')
.enabled(!this.isLoading)

七、总结

本文详细介绍了 HarmonyOS NEXT 中的 LoadingProgress 组件及其使用方法。LoadingProgress 组件通过丰富的属性配置，提供了多种加载动画样式和进度展示方式，能够为用户提供清晰的加载状态反馈。通过基本用法、自定义样式和状态控制等示例，展示了如何在实际开发中灵活使用该组件。这种组件适用于数据加载、页面切换等待等场景，能够为用户提供直观且动态的加载提示。