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