前言不知道大家注意没有，当下载一首歌曲或者安装某个软件的时候，通常界面上会显示一个进度条，提示现在的下载或者是安装进度。我们这一节要讲的ProgressBar，也是这样的一种用途。ProgressBar的概念ProgressBar表示操作的进度。进度由value定期更新，范围有from和to定义，两者都可以包含任何值。因为ProgressBar属于控件，所以我们在使用时，需要导入控件类。import QtQuick.Controls 2.3 ProgressBar还可以支持特殊的indeterminate模式，当无法确定正在下载的项目大小，或者由于网络断开而导致下载进度中断时，这种模式很有用。这样说大家可能不太能够理解，没有关系，后面我们会给出例程。 ProgressBar的属性
例程练习结合上一节讲的布局管理，我们在界面上展示几种不同的ProgressBar，首先，先来一种最简单的，静态ProgressBar。新建一个工程，输入以下代码。Column{
anchors.centerIn: parent
anchors.margins: 50
spacing: 50
//进度条1
ProgressBar{
from: 0.0
to:0.6
value: 0.3
width: 100
height: 20
}
}在Column定位器中先放置第一种进度条，长度为100，范围从0.0-0.6，进度值为0.3，所以效果应该是一个50%的进度条。如下图所示。
这种属于静态的进度条，那么动态的如何实现呢？这就需要结合之前学过的定时器事件了，可以通过1s更新一次value值的方式实现一个动态的进度条。还是在Column定位器中添加第二种进度条。 //进度条2
ProgressBar{
value: 0.1
width: 100
height: 2
Timer{
interval: 1000
repeat: true
running: true
onTriggered: {
if(parent.value < 1.0){
parent.value += 0.1
}else{
stop()
}
}
}
}设置一个1s触发一次的定时器，每次触发时，判断当前的进度值是否大于最大值1.0，大于1.0就停止定时器，没有的话进度值就一直累加，实现一个1s变化一次的进度条。实现效果如下。
前面说到，ProgressBar还支持特殊的indeterminate模式。当我们无法确定项目下载的进度值是多少时，盲目的等待只会加重用户的焦躁，而这种模式正是为了减缓焦虑感的。实现方法也很简单，只需要将indeterminate属性设置为true即可。 //进度条3
ProgressBar{
value: 0.2
width: 100
height: 20
//当indeterminte设置为真实， ProcessBar变成了BusyIndicator了
indeterminate: true
}运行程序，效果如下。
最后一种当然就是我们的自定义的进度条控件了，可以设置进度条的颜色和样式，这里我们通过官方例程来讲解一下。 //进度条4
ProgressBar{
id:control
value: 0.2
width: 100
height: 2
background: Rectangle {
implicitWidth: control.width
implicitHeight: control.height
color: "orange"
radius: 3
}
contentItem: Item {
Rectangle {
width: control.visualPosition * control.width
height: control.height
radius: 2
color: "green"
}
}
}ProgressBar也有两个可视项：background和contentitem，先来设置background背景项，其宽和高等于ProgressBar的宽和高，颜色为orange，圆滑度为3。大家可以先运行看看，ProgressBar变成了橘黄色的矩形。然后再来设置contentitem内容项，宽度的计算公式为ProgressBar的视觉位置*ProgressBar的宽度。高度随便，颜色和平滑度也可以自行设置。OK！运行效果看一下 注：效果可能因为qt的版本有轻微的差别。
总结 |
