控件 qml_Flat风格的Qml进度条

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
        }
    }
}

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()
        }
    }
}