简介
前两天需要接到一个需求需要做一个好看的进度条,在网上搜了一圈发现要不然就是不符合我的需求要不然就是没有源码,最后找到一个大佬写的有部分源码的,自己也折腾了一个(原文链接)。
效果图
思路
主要就是重写了QProcessBar的paintEvent事件,让其先执行完QProcessBar自己的绘制事件,在绘制一层光效在上面。
在内存中维护一个变量m_currvalue用来决定当前需要绘制的区域,m_currvalue不能大于进度条当前的值,然后定一个定时器QTimer,让其每隔一段时间自增一次,达到光效前进的效果,当其与进度条当前的值相等时又置为零。
关键代码
void MyProcessBar::paintEvent(QPaintEvent *e)
{
QProgressBar::paintEvent(e);
QStyleOptionProgressBar opt;
initStyleOption(&opt);
if (m_currvalue != 0)
{
QPainter painter(this);
QRect rect1 = style()->subElementRect(QStyle::SE_ProgressBarContents, &opt, this);
//QRectF rect1=this->rect();
double _width=static_cast<double>(m_currvalue)/static_cast<double>(m_maxvalue)*rect1.width();
QLinearGradient gradient(0,0,_width,rect1.height());
gradient.setColorAt(0,Qt::red);
gradient.setColorAt(1,Qt::blue);
painter.setBrush(gradient);
QRectF rect2=QRectF(rect1.topLeft(),QSize(static_cast<int>(_width),static_cast<int>(rect1.height())));
rect2.adjust(0,0.8,0,-2);
painter.drawRoundedRect(rect2, 10, 10);
//painter.drawRect(rect);
}
}
完整代码链接