在QML中原声的进度条为水平或垂直的直线型进度条,可以用ProgressBar配合style: ProgressBarStyle{}进行实现,代码如下:
import QtQuick 2.4
import QtQuick.Controls 1.3
import QtQuick.Controls.Styles 1.2
import QtGraphicalEffects 1.0
import QtQml 2.2
Rectangle {
id:root;
color: "white";
visible: true;
width: 600;
height: 600;
Timer{
interval: 300;
running: true;
repeat: true;
onTriggered: {
if(progressBar3.value >= 1)
progressBar3.value = 0;
progressBar3.value += 0.05;
if(progressBar4.value >= 1)
progressBar4.value = 0;
progressBar4.value += 0.05;
}
}
ProgressBar {
id: progressBar3
x: 83
y: 226
width: 397
height: 23
value: 0.01;
style: ProgressBarStyle{
id:progressBar3Style;
background: Rectangle{
border.width: 1;
border.color: control.hovered?"green":"#25b1e8";
color:"lightgray";
Text {
anchors.right: parent.right;
anchors.rightMargin: 5;
anchors.verticalCenter: parent.verticalCenter;
text: Math.round(currentProgress*100) + "%";
color: "#25b1e8"
}
}
progress: Rectangle{
color: "#25b1e8";//
clip: true;
Rectangle{
anchors.left: parent.left;
//anchors.top: parent.top;
//anchors.bottom: parent.bottom;
height: progressBar3.width;
width: progressBar3.width;
LinearGradient{
anchors.fill: par