플랫 스타일의 진행률 표시 줄 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는 년 6 월 .