树莓派Qt系列教程13：进度条ProgressBar

2020-7-30 10:11| 发布者: dasi| 查看: 9352| 评论: 0|原作者: dasi

摘要: 这一节我们将学习进度条ProgressBar的内容......

前言

不知道大家注意没有，当下载一首歌曲或者安装某个软件的时候，通常界面上会显示一个进度条，提示现在的下载或者是安装进度。我们这一节要讲的ProgressBar，也是这样的一种用途。

ProgressBar的概念

ProgressBar表示操作的进度。进度由value定期更新，范围有from和to定义，两者都可以包含任何值。因为ProgressBar属于控件，所以我们在使用时，需要导入控件类。

`1`	`import QtQuick.Controls 2.3`

ProgressBar还可以支持特殊的indeterminate模式，当无法确定正在下载的项目大小，或者由于网络断开而导致下载进度中断时，这种模式很有用。这样说大家可能不太能够理解，没有关系，后面我们会给出例程。

ProgressBar的属性

from:(real,默认为0.0)，范围的起始值
to:(real,默认为1.0)，范围的结束值
value:(real,默认为0.0)
indeterminate:(bool,默认为false)
此属性保存进度条是否处于不确定模式，不确定模式下的进度条显示操作正在进行，但未显示已经进行了多少进度。
position:(real)
只读属性，控制进度条的逻辑位置，范围0.0-1.0
visualPosition:(real)
只读属性，控制进度条的视觉位置，范围0.0-1.0

例程练习

结合上一节讲的布局管理，我们在界面上展示几种不同的ProgressBar，首先，先来一种最简单的，静态ProgressBar。新建一个工程，输入以下代码。

01Column{
02        anchors.centerIn: parent
03        anchors.margins: 50
04        spacing: 50
05        //进度条1
06        ProgressBar{
07            from: 0.0
08            to:0.6
09            value: 0.3
10            width: 100
11            height: 20
12        }
13    }

在Column定位器中先放置第一种进度条，长度为100，范围从0.0-0.6，进度值为0.3，所以效果应该是一个50%的进度条。如下图所示。

这种属于静态的进度条，那么动态的如何实现呢？这就需要结合之前学过的定时器事件了，可以通过1s更新一次value值的方式实现一个动态的进度条。还是在Column定位器中添加第二种进度条。

01//进度条2
02ProgressBar{
03    value: 0.1
04    width: 100
05    height: 2
06    Timer{
07       interval: 1000
08       repeat: true
09       running: true
10       onTriggered: {
11            if(parent.value < 1.0){
12                parent.value += 0.1
13            }else{
14                stop()
15            }
16       }
17    }
18}

设置一个1s触发一次的定时器，每次触发时，判断当前的进度值是否大于最大值1.0，大于1.0就停止定时器，没有的话进度值就一直累加，实现一个1s变化一次的进度条。实现效果如下。

前面说到，ProgressBar还支持特殊的indeterminate模式。当我们无法确定项目下载的进度值是多少时，盲目的等待只会加重用户的焦躁，而这种模式正是为了减缓焦虑感的。实现方法也很简单，只需要将indeterminate属性设置为true即可。

1//进度条3
2            ProgressBar{
3                value: 0.2
4                width: 100
5                height: 20
6                //当indeterminte设置为真实， ProcessBar变成了BusyIndicator了
7                indeterminate: true
8             }

运行程序，效果如下。

最后一种当然就是我们的自定义的进度条控件了，可以设置进度条的颜色和样式，这里我们通过官方例程来讲解一下。

01//进度条4
02  ProgressBar{
03      id:control
04      value: 0.2
05      width: 100
06      height: 2
07      background: Rectangle {
08          implicitWidth: control.width
09          implicitHeight: control.height
10          color: "orange"
11          radius: 3
12      }
13       
14      contentItem: Item {
15          Rectangle {
16              width: control.visualPosition * control.width
17              height: control.height
18              radius: 2
19              color: "green"
20          }
21      }
22   }

ProgressBar也有两个可视项：background和contentitem，先来设置background背景项，其宽和高等于ProgressBar的宽和高，颜色为orange，圆滑度为3。大家可以先运行看看，ProgressBar变成了橘黄色的矩形。然后再来设置contentitem内容项，宽度的计算公式为ProgressBar的视觉位置*ProgressBar的宽度。高度随便，颜色和平滑度也可以自行设置。OK！运行效果看一下

注：效果可能因为qt的版本有轻微的差别。