QML 自定义进度条样式

QML 自定义进度条样式

此博客始创于：http://blog.csdn.net/lys211

转载请注明出处

修改的进度条样式，可以在此基础上根据期望改成自己喜欢的样子。

效果如下：

(应该是动态图，如果不是，那就奇怪了)

代码比较长，这里粘贴一份，同时会上传一份.

ProgressBarStyleView.qml

import QtQuick 2.4

import QtQuick.Controls 1.3

import QtQuick.Controls.Styles 1.2

import QtGraphicalEffects 1.0

import QtQml 2.2

Rectangle {

    id:root;

    color: "white";

    visible: true;

    width: 600;

    height: 600;

    ProgressBar {

        id: progressBar;

        x: 83

        y: 39

        width: 397;

        height: 23;

        value: 0.2;

        style: ProgressBarStyle{

            background: Rectangle{

                border.width: 1;

                border.color: control.hovered?"green":"#25b1e8";

                color:"lightgray";

            }

            progress: Rectangle{

                color: "#25b1e8"

            }

        }

    }

    ProgressBar {

        id: progressBar1

        x: 83

        y: 101

        width: 397

        height: 23

        value: 0.5;

        style: ProgressBarStyle{

            background: Rectangle{

                border.width: 1;

                border.color: "#25b1e8";

                color:"lightgray";

            }

            progress: Rectangle{

                color: "#25b1e8"

                Text {

                    anchors.right: parent.right;

                    anchors.verticalCenter: parent.verticalCenter;

                    text: progressBar1.value;

                    color: "white"

                }

            }

        }

    }

    ProgressBar {

        id: progressBar2

        x: 83

        y: 167

        width: 397

        height: 23

        value: 0.73;

        style: ProgressBarStyle{

            id:progressBarStyle;

            background: Rectangle{

                border.width: 1;

                border.color: control.hovered?"green":"#25b1e8";

                color:"lightgray";

            }

            progress: Rectangle{

                color: "#25b1e8"

                Text {

                    anchors.right: parent.right;

                    anchors.rightMargin: 5;

                    anchors.verticalCenter: parent.verticalCenter;

                    text: progressBar2.value*100 + "%";

                    color: "white"

                }

            }

            panel: Item{

                implicitHeight: 20;

                implicitWidth: 200;

                Loader{

                    anchors.fill: parent;

                    sourceComponent: background;

                }

                Loader{

                    anchors.top: parent.top;

                    anchors.left: parent.left;

                    anchors.bottom: parent.bottom;

                    anchors.margins: 2;

                    width: currentProgress * (parent.width - 4)

                    sourceComponent: progressBarStyle.progress;

                }

            }

        }

    }

    Timer{

        interval: 300;

        running: true;

        repeat: true;

        onTriggered: {

            if(progressBar3.value >= 1)

                progressBar3.value = 0;

            progressBar3.value += 0.05;

            if(progressBar4.value >= 1)

                progressBar4.value = 0;

            progressBar4.value += 0.05;

        }

    }

    ProgressBar {

        id: progressBar3

        x: 83

        y: 226

        width: 397

        height: 23

        value: 0.01;

        style: ProgressBarStyle{

            id:progressBar3Style;

            background: Rectangle{

                border.width: 1;

                border.color: control.hovered?"green":"#25b1e8";

                color:"lightgray";

                Text {

                    anchors.right: parent.right;

                    anchors.rightMargin: 5;

                    anchors.verticalCenter: parent.verticalCenter;

                    text: Math.round(currentProgress*100) + "%";

                    color: "#25b1e8"

                }

            }

            progress: Rectangle{

                color: "#25b1e8";//

                clip: true;

                Rectangle{

                    anchors.left: parent.left;

                    //anchors.top: parent.top;

                    //anchors.bottom: parent.bottom;

                    height: progressBar3.width;

                    width: progressBar3.width;

                    LinearGradient{

                        anchors.fill: parent;

                        gradient: Gradient {

                            GradientStop {

                                position: 0.00;

                                color: "#ffffff";

                            }

                            GradientStop {

                                position: 1.00;

                                color: "#36d1e8";

                            }

                        }

                        start:Qt.point(0, 0);

                        end: Qt.point(parent.width, 0);

                    }

                }

            }

            panel: Item{

                implicitHeight: 20;

                implicitWidth: 200;

                Loader{

                    anchors.fill: parent;

                    sourceComponent: background;

                }

                Loader{

                    anchors.top: parent.top;

                    anchors.left: parent.left;

                    anchors.bottom: parent.bottom;

                    anchors.margins: 2;

                    width: currentProgress * (parent.width - 4)

                    sourceComponent: progressBar3Style.progress;

                }

            }

        }

    }

    ProgressBar {

        id: progressBar4

        x: 83

        y: 289

        width: 397

        height: 23

        value: 0.01;

        property color colorValue: Qt.rgba(37/255, 177/255, 232/255, 1);

        style: ProgressBarStyle{

            id:progressBar4Style;

            background: Rectangle{

                border.width: 1;

                border.color: control.hovered?"green":"#25b1e8";

                color:"lightgray";

            }

            progress: Rectangle{

                //color: "#25b1e8";//

                //color: Math.round(currentProgress*100);

                color: progressBar4.colorValue;

                onColorChanged: {

                    console.log("onColorChanged")

                }

            }

            panel: Item{

                implicitHeight: 20;

                implicitWidth: 200;

                Loader{

                    anchors.fill: parent;

                    sourceComponent: background;

                }

                Loader{

                    anchors.top: parent.top;

                    anchors.left: parent.left;

                    anchors.bottom: parent.bottom;

                    anchors.margins: 2;

                    width: currentProgress * (parent.width - 4)

                    sourceComponent: progressBar4Style.progress;

                    onWidthChanged: {

                        console.log("onWidthChanged")

                        progressBar4.colorValue = Qt.rgba(1-currentProgress, 1-currentProgress, 1-currentProgress, 1)

                    }

                }

                Text {

                    anchors.right: parent.right;

                    anchors.rightMargin: 5;

                    anchors.verticalCenter: parent.verticalCenter;

                    text: Math.round(currentProgress*100) + "%";

                    color: "#25b1e8"

                }

            }

        }

    }

}

整个文件可下载，地址是：

http://download.csdn.net/detail/lys211/8541135