Flat風格的Qml進度條

基於Qml的ProgressBar控件修改而成。

進度條代碼

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

• 更多精彩內容請關注公衆號Qt君。