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