Flat风格的Qml进度条

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

main_page

进度条代码

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

进度条样式代码

main_page2.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君。