[QtQuick]使用QtQuick制作带有光照效果的进度条

部落战争中的一种进度条如图所示：

这种进度条背景是黑色的，前景是绿色的，有类似光照的效果，使用QtQuick如何做出这种效果呢？

 

先分析这个进度条的组成：背景基调为黑色，上半部叠加了稍浅一些的类灰色的颜色，前景是绿色为基调，上半部叠加了浅绿色，最上层是白色文字。

 

这样整个进度条分为五层：第1层黑色，第2层浅灰，第3层绿，第4层浅绿，第5层文字，按照这个思路设计出类似的效果。

对ProgressBar设置样式，涉及到ProgressBarStyle::background，ProgressBarStyle::progress和ProgressBarStyle::panel。

我做出的效果：

QtQuick代码分享：

// 说明：本文件定义而类似部落冲突的进度条
// 时间：20170228
// 作者：taohe_0 邮箱：taohe_0@163.com ,博客：http://blog.csdn.net/taohe_0
import QtQuick 2.0
import QtQuick.Controls 1.0
import QtQuick.Controls.Styles 1.0

ProgressBar
{
    id: ccProcessBar;
    minimumValue: 0;
    maximumValue: 1;
    value: 0.33;
    width: 160;
    height: 20;
    style: progressBarStyle

    // 运行起来的动画
    PropertyAnimation
    {
        target : ccProcessBar
        property: "value"
        from : 0.0
        to : 1.0
        duration: 5000
        loops: Animation.Infinite
        running: true
    }

    // 定义ProgressBar样式
    Component
    {
        id : progressBarStyle
        ProgressBarStyle
        {
            id: progressStyle
            background: ccProgressBarBackground
            progress : ccProgressStyle
            panel: Item
            {

                //通过panel属性，可以加载  progress Text background等组件
                Loader
                {
                    anchors.fill:  parent;
                    sourceComponent: background;
                }

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

                Text
                {
                    color: "white"
                    text: (currentProgress * 100).toFixed(0) + "/" + 100;
                    font.family: "微软雅黑"
                    z: 2;
                    anchors.centerIn: parent;
                }
            }
        }
        // 定义进度条背景组件
    }

    // 定义进度条背景组件
    Component
    {
        id : ccProgressBarBackground
        Rectangle
        {
            color:"#57504A" // 87,80,74
            radius: 5

            // 上半部分为浅灰色
            Rectangle
            {
                x : 0
                y : 0
                width : parent.width
                height : parent.height / 2
                color:"#655850" // 101,88,80
                radius: 5
                z : 1
            }
        }
    }

    // 定义进度条
    Component
    {
        id : ccProgressStyle
        Rectangle
        {
            color: "#439A15" // 67,154,21
            radius: 5
            Rectangle
            {
                y : 0
                width: parent.width
                height: parent.height / 2
                color:"#95dd3B" // 149,221,59
                radius: 5
            }
        }
    }
}