部落战争中的一种进度条如图所示：
这种进度条背景是黑色的，前景是绿色的，有类似光照的效果，使用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 } } } }
