Qt Quick 进度条的使用

本例子为Qt Quick 核心编程中的一个小例子，本例子讲述了基本使用ProgressBar的使用：

 

代码：

import QtQuick 2.12
import QtQuick.Window 2.12
import QtQuick.Controls 1.2
import QtQuick.Controls.Styles 1.2
Window {
    visible: true
    width: 640
    height: 480
    color: "#a0a0a0"
    title: qsTr("进度条")
    Row{
        anchors.fill: parent;
        anchors.margins: 10;
        spacing: 8;
        //第一个滑动块
        ProgressBar{
            maximumValue: 100;
            minimumValue: 0;
            value: 40;
            width: 150;
            height: 20;
            Timer{
                interval: 1000; //1S 时间
                repeat: true;
                running: true;
                onTriggered: {
                    if(parent.value<99.1)
                    {
                        parent.value+=1;
                    }
                    else{
                        stop();
                    }
                }

            }
        }

        //方向垂直方向
        ProgressBar{
        orientation: Qt.Vertical; //垂直方向
            minimumValue: 0;
            maximumValue: 1;
            value: 0.2;
            width: 20;
            height: 200;
            Timer{
                interval: 2000;
                repeat: true;
                running: true;
                onTriggered: {
                    parent.value = Math.random();
                }
            }

        }

        //第3个进度条
        ProgressBar{
            minimumValue: 0;
            maximumValue: 1;
            value: 0.2;
            width: 80;
            height: 16;
            indeterminate: true;//模糊方式
        }


        //第4与5个进度条

        Item{
            width: 180;
            height: parent.height;

            ProgressBar{
                id:customProgress;
                anchors.centerIn: parent;
                minimumValue: 0
                maximumValue: 1;
                value: 0.2;
                height: 20;
                width: 160;
                style: ProgressBarStyle{
                    background: Rectangle{
                        implicitHeight: 200;
                        implicitWidth: 20;
                        border.width: 1;
                        border.color: control.hovered?"green":"gray";
                        color: "lightgray";
                    }
                    progress: Rectangle{
                        color: "#208020"
                    }
                }

            }

            ProgressBar{
                id:percentProgress;
                anchors.top: customProgress.bottom;
                anchors.topMargin: 4;
                anchors.horizontalCenter: parent.horizontalCenter;
                minimumValue: 0;
                maximumValue: 1;
                value: 0.33;
                width: 160;
                height: 20;
                style: ProgressBarStyle{
                    id:progressStyle;
                    background: Rectangle{
                        border.width: 1;
                        border.color: control.hovered?"green":"gray";
                         color: "lightgray";
                    }

                    progress: Rectangle{
                        color: "#208020";

                    }

                    panel: Item {
                        implicitHeight: 20;
                        implicitWidth: 200;

                        Loader{
                            anchors.fill: parent;
                            sourceComponent: background;

                        }

                        Loader{
                            id:progressLoader;
                            anchors.top: parent.top;
                            anchors.left: parent.left;
                            anchors.bottom: parent.bottom;
                            anchors.margins: 3
                            z:1;
                            width:currentProgress * (parent.width - 6)
                            sourceComponent: progressStyle.progress;

                        }
                        Text {
                            color: "blue"
                            text: currentProgress *100 +"%";
                            z:2;
                            anchors.centerIn: parent;
                        }
                    }
                }

            }
        }

    }

}