基于Qml的ProgressBar控件修改而成。
![b17095aae0331f0f450120171db1b4bc.png](https://i-blog.csdnimg.cn/blog_migrate/16b69a62d85a42e06aa8b60a12337489.png)
进度条代码
import QtQuick 2.0
import QtQuick.Controls 2.0
ProgressBar {
id: root
property color color: "#3498DB"
value: 0.5
background: Rectangle {
implicitWidth: 200
implicitHeight: 12
color: "#EBEDEF"
}
contentItem: Item {
implicitWidth: root.background.implicitWidth
implicitHeight: root.background.implicitHeight
Rectangle {
width: root.visualPosition * parent.width
height: parent.height
color: root.color
}
}
}
进度条样式代码
![d47a12109a63703a4bb6e09f9ed76e72.png](https://i-blog.csdnimg.cn/blog_migrate/b96b9bdaac65180e877ca051afdd4333.png)
GridLayout {
width: root.width
rows: 3
columns: 3
Repeater {
model: ["#727CF5", "#0ACF97", "#F9375E",
"#FFBC00", "#2B99B9", "#5A6268",
"#EEF2F7", "#212730", "#3498DB"]
ProgressBar {
color: modelData
value: Math.random()
}
}
}
- 更多精彩内容请关注公众号Qt君。