Quick控件--8.progress bar

1 效果

2 简介

progress bar控件常用，自定义备用。

3 控件代码

3.1 SenProgressBar .qml

import QtQuick 2.12
import QtQuick.Controls 1.4
import QtQuick.Controls.Styles 1.4

Rectangle {
    property int formWidth: 80
    property int formHeight: 20
    property real minValue: 0
    property real maxValue: 100

    width: formWidth
    height: formHeight
    border.width: 1
    border.color: "black"

    ProgressBar {
        id: proBarId
        width: formWidth - 2
        height: formHeight - 2
        anchors {
            verticalCenter: parent.verticalCenter
            horizontalCenter: parent.horizontalCenter
        }

        minimumValue: minValue
        maximumValue: maxValue
        style: ProgressBarStyle {
            background: Rectangle {
                color: "white"
            }
            progress: Rectangle {
                color: "lightgrey"

            }
        }
        value: 20
    }
}

3.2 main.qml

import QtQuick 2.12
import QtQuick.Window 2.12
import "./common" as SenCom

Window {
    visible: true
    width: 640
    height: 480
    title: qsTr("Hello World")

    SenCom.SenProgressBar {
        anchors.centerIn: parent
    }
}