qml简易进度条的实现方法

在qml的界面中，经常需要得到内部的一些内存、cup等显示的情况，然后我们需要将它做成进度条的形式，此篇就是做出一个简易的进度条。
上图：

就这种简单的进度条，实现方法如下：
我们的触发方式，是用时间中断来触发的，一秒钟获取一次信息来进行进度条的更新
我们用定义一个ProgressBar 的组件，来显示进度条
ProgressBar {
id: progressBar1
width: parent.width*0.5
height: 15
maximumValue: 100
minimumValue: 0
anchors.verticalCenter: parent.verticalCenter
style: ProgressBarStyle{
background: Rectangle{
color:"#e1e1e1";
}
progress: Rectangle{
color: “#8e7cc3”
Text {
id: progressBar1Text
anchors.left: parent.right;
anchors.leftMargin: 10
anchors.verticalCenter: parent.verticalCenter;
text: (progressBar1.value).toFixed(1)+"%";
color: “#345684”
font.pointSize: selfFontSize
}
}

        }
    }

设置好样式，大小和属性之后，我们就可以在中断里面来写它的方法了
Connections{
target: timeS
onCurrentTime:{
var cpudata = [0,0,0,0,0,0];
cpudata[0] = cpudata[1]
cpudata[1] = cpudata[2]
cpudata[2] = cpudata[3]
cpudata[3] = cpudata[4]
cpudata[4] = cpudata[5]
//ChartsData.cpudata[5] = Math.random()*100
cpudata[5] = 33
progressBar1.value = cpudata[5]
}

    }

用时间触发中断，定义一个数组来变动进度条，此处用的是测试例子，所以我直接设了个33，如果需要变动的数据，只需更改那里即可，然后定时器的实现，和qml数据和c++的交互请参考我的另外几篇文章。
qml交互的例子
https://blog.csdn.net/ZuiRen_Xiang/article/details/99451570
显示时间的例子
https://blog.csdn.net/ZuiRen_Xiang/article/details/100011846