QML_进度条ProgressBar

QML_进度条ProgressBar

概述：ProgressBar表示操作的进度。进度由value定期更新，范围有from和to定义，两者都可以包含任何值。因为ProgressBar属于控件，所以我们在使用时，需要导入控件类。
import QtQuick.Controls 2.3
ProgressBar还可以支持特殊的indeterminate模式，当无法确定正在下载的项目大小，或者由于网络断开而导致下载进度中断时，这种模式很有用。这样说大家可能不太能够理解，没有关系，后面我们会给出例程
ProgressBar的属性：
1、from:(real,默认为0.0)，范围的起始值
2、to:(real,默认为1.0)，范围的结束值
3、value:(real,默认为0.0)
4、indeterminate:(bool,默认为false)此属性保存进度条是否处于不确定模式，不确定模式下的进度条显示操作正在进行，但未显示已经进行了多少进度。
5、position:(real)只读属性，控制进度条的逻辑位置，范围0.0-1.0
6、visualPosition:(real)只读属性，控制进度条的视觉位置，范围0.0-1.0

初探最简单的进度条

Window {
    id: window
    visible: true
    width: 800
    height: 480
    title: qsTr("Hello World")

    //进度条1
    ProgressBar {
        from: 0.0  //起始值
        to: 0.6  //终点值
        value: 0.3  //当前进度值
        width: 100  //进度条控件占用长度
        height: 20  //进度条控件占用宽度
    }
}

设置一个1s触发一次的定时器，每次触发时，判断当前的进度值是否大于最大值1.0，大于1.0就停止定时器，没有的话进度值就一直累加，实现一个1s变化一次的进度条

Window {
    id: window
    visible: true
    width: 800
    height: 480
    title: qsTr("Hello World")

    //进度条2
    ProgressBar {
        x: 10
        y: 10
        value: 0.1
        width: 100
        Timer {
            interval: 1000
            repeat: true
            running: true
            onTriggered: {
                if (parent.value < 1.0) {
                    parent.value += 0.1
                } else {
                    stop()
                }
            }
        }
    }
}

进度条当做加载动态显示控件

ProgressBar{
    value: 0.2
    width: 100
    height: 20
    //当indeterminte设置为真实， ProcessBar变成了BusyIndicator了
    indeterminate: true
 }

自定义进度条控件

Window {
    id: window
    visible: true
    width: 800
    height: 480
    title: qsTr("Hello World")

    //进度条4
    ProgressBar {
        id: control
        value: 0.2
        width: 100
        height: 12

        anchors.centerIn: parent
        background: Rectangle {
            implicitWidth: control.width
            implicitHeight: control.height
            color: "orange"
            radius: 3
        }

        contentItem: Item {
            Rectangle {
                width: control.visualPosition * control.width
                height: control.height
                radius: 2
                color: "green"
            }
        }

        Timer {
            interval: 1000
            repeat: true
            running: true
            onTriggered: {
                if (parent.value < 1.0) {
                    parent.value += 0.1
                } else {
                    stop()
                }
            }
        }
    }
}