3.10 Progress组件和DataPanel组件 原创 精华

今天来学习一下两个简单易用的图表组件Progress和DataPanel。

1. Progress组件

Progress是一个进度条组件，用于显示内容加载或操作处理进度。鸿蒙官方文档只给出了其接口和属性的说明，如下：

/**
 * 3.10.1 Progress组件
 * 进度条，用于显示内容加载或操作处理进度。
 *
 * 接口:
 *  Progress(value: {value: number, total?: number, style?: ProgressStyle})
 *    value: number 指定当前进度值。
 *    total: number 默认值100,指定进度总长。
 *    style:ProgressStyle 默认值Linear,指定进度条样式。
 *      ProgressStyle.Linear 线性样式。
 *      ProgressStyle.Eclipse 日食样式。
 *
 * 属性:
 *   .value(number) 设置当前进度值。
 *   .color(Color) 设置进度条前景色。
 */

最简单的调用示范是仅提供接口参数value：

      H8({text: '极简调用'})
      Progress({ value: 35})

进度条样式默认为线性样式，进度总长默认为100，进度条前景色默认为宇宙蓝，进度条宽度默认为父容器的宽度(100%)。所以在以上极简的代码调用中已做到了深色模式/浅色模式适配和横竖屏适配。运行效果如下：

其实学过《3.8 Slider组件》章节的同学应该有印象，当时我使用Slider组件模拟过线性进度条(项目开发进度)的效果：

继续Progress组件的接口参数讲解。接口参数中的进度总长total，默认值100符合进度条的绝大部分使用场景，如果有需要，可以设置为其它正整数的值，最终进度条的完成度取决于value/total的结果，如，将total赋值60，value赋值15，最终结果就是15/60，也就是25%。以下两个进度条组件的运行效果是一致的：

      H8({text: 'total参数设置'})
      Progress({ value: 25})
      Progress({ value: 15, total: 60})

在鸿蒙官方文档中对于进度条样式参数style的说明中只列出了一个线性样式ProgressStyle.Linear。其实，还有一个日食风格的枚举值ProgressStyle.Eclipse未公开，废话不说，上代码看效果：

      H8({text: '日食样式进度条'})
      Progress({ value: 25, style:ProgressStyle.Eclipse})

如果不满足于默认的宇宙蓝色，可以使用属性color设置个性化的进度条前景色，遗憾的是暂时不支持颜色资源(但可以通过下个案例的方式使用颜色资源)。在Progress的属性中还有一个可选的属性value，也是用于当前进度值。接口参数中value参数是必须提供的，这个value属性是可选的，它们有什么区别呢？当这两个值不一致时，value属性的值优先级更高，会覆盖接口参数中的value值的效果，示例代码如下：

      H8({text: '属性的演示'})
      Progress({ value: 35})
        .value(80) // value属性覆盖接口参数value
        .color(Color.Red) // 设置进度条前景色

最后，我想利用value属性让进度条动起来，示范代码如下：

struct ProgressSample {
  @State progressValue: number = 0
  @State progressColor: any = $r("app.color.danger")

  aboutToAppear() {
    var that = this
    setInterval(()=>{
      if(that.progressValue < 100){
        that.progressValue += 5
        if(that.progressValue < 25){
          that.progressColor = $r("app.color.danger")
        }else if (that.progressValue < 50){
          that.progressColor = $r("app.color.warning")
        }else if (that.progressValue < 75){
          that.progressColor = $r("app.color.info")
        }else{
          that.progressColor = $r("app.color.success")
        }
      }
    },500)
  }
    
...此处代码省略...
    
   
      H8({text: '让进度条动起来'})
      Progress({ value: 0})
        .value(this.progressValue)
        .color(this.progressColor)

运行效果如下：

其实我没想到鸿蒙官方提供了日食风格的进度条，我以为它会提供环形进度条的样式。下面，我们通过另一个图标组件DataPanel来实现环形进度条的效果。

2. DataPanel组件

DataPanel组件只有简单的接口调用说明：

/**
 * 3.10.2 DataPanel组件
 * 数据面板组件，用于将多个数据占比情况使用环形占比图进行展示。
 *
 * 接口：
 *  DataPanel(value:{values: number[], max?: number})
 *    values:number[] 数据值列表，最大支持9个数据。
 *    max:number 默认值100,数据的最大值。
 */

我们尝试利用DataPanel组件实现环形进度条效果，由于接口参数values最大支持9个，最后一个元素设置为我们的进度值，前面可以加8个以内的元素，值为0，可变化不同颜色。这里模拟四个环形进度条，代码如下：

      H8({text: '环形进度条'})
      Row(){
        DataPanel({ values: [20] })
          .width(150)
          .height(150)
        Blank()
        DataPanel({ values: [0, 0, 40] })
          .width(150)
          .height(150)
      }.width('100%')
      Row(){
        DataPanel({ values: [0, 0, 0, 0, 0, 0, 60] })
          .width(150)
          .height(150)
        Blank()
        DataPanel({ values: [0, 0, 0, 0, 0, 0, 0, 0, 80] })
          .width(150)
          .height(150)
      }.width('100%')

宽和高这里设置为150vp，如果不设置，默认100%。效果如下：

最后上一个DataPanel组件作为数据面板的“正统”用法，将多个数据占比情况使用环形占比图进行展示，示例代码如下：

      H8({text: '数据面板'})
      DataPanel({ values: [0,20, 60, 35, 42, 17, 60] })
        .height(300)

效果如下：

【源码地址：https://gitee.com/cloudev/harmonyos3/tree/master/3.0/BaseComponent】