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

发布于 2022-7-1 13:32
浏览
1收藏

今天来学习一下两个简单易用的图表组件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.10 Progress组件和DataPanel组件-开源基础软件社区

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

3.10 Progress组件和DataPanel组件-开源基础软件社区

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

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

3.10 Progress组件和DataPanel组件-开源基础软件社区

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

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

3.10 Progress组件和DataPanel组件-开源基础软件社区

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

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

3.10 Progress组件和DataPanel组件-开源基础软件社区

最后,我想利用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)

运行效果如下:

3.10 Progress组件和DataPanel组件-开源基础软件社区

其实我没想到鸿蒙官方提供了日食风格的进度条,我以为它会提供环形进度条的样式。下面,我们通过另一个图标组件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%。效果如下:

3.10 Progress组件和DataPanel组件-开源基础软件社区

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

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

效果如下:

3.10 Progress组件和DataPanel组件-开源基础软件社区

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

©著作权归作者所有,如需转载,请注明出处,否则将追究法律责任
1
收藏 1
回复
举报
回复
添加资源
添加资源将有机会获得更多曝光,你也可以直接关联已上传资源 去关联
    相关推荐