使用QPushButton实现具有进度展示功能的圆角矩形按钮

结果如图

 

网上也没有找到现成控件，只好自己动手了。

 

基本思路其实就是使用QBitmap绘制一个圆角矩形的笔刷在绘制好的矩形进度条上使用setMask设置遮罩。

 

头文件：

 1 class ProgressButton : public QPushButton {
 2     Q_OBJECT
 3 
 4     void paintEvent(QPaintEvent* event) override;
 5 public:
 6     explicit ProgressButton(QWidget* parent);
 7     int cur_ = 0;
 8 signals:
 9     void sig_finished();
10 public slots:
11     void onProChanged();
12 };

实现：

 1 void ProgressButton::paintEvent(QPaintEvent* event) {
 2     if(cur_ < 1 || cur_ > 99) {
 3         QPushButton::paintEvent(event);
 4         return;
 5     }
 6     QColor backColor(43, 43, 43);
 7     QColor proColor(0, 222, 167);
 8 
 9     // 绘制笔刷，这一部分其实可以放入showEvent里提前绘制好
10     QBitmap pixMask(width(),height());
11 
12     QPainter ipt(&pixMask);
13     ipt.setRenderHint(QPainter::Antialiasing);
14     ipt.fillRect(pixMask.rect(), Qt::white);
15     ipt.setPen(Qt::black);
16     ipt.setBrush(QBrush(Qt::black));
17     ipt.drawRoundedRect(0,0,pixMask.width(),pixMask.height(),20,20);
18 
19     QPainter pt(this);
20     pt.fillRect(rect(),backColor);
21     pt.setPen(proColor);
22     pt.setBrush(QBrush(proColor));
23     pt.drawRect(0,0,width()*cur_/100,height());
24     pt.setPen(Qt::white);
25     pt.drawText(rect(),Qt::AlignCenter,text());
26     setMask(pixMask);
27 }
28 
29 ProgressButton::ProgressButton(QWidget* parent) : QPushButton(parent){
30 
31 }
32 
33 void ProgressButton::onProChanged() {
34     if(cur_>=100) {
35         QTimer* ti = qobject_cast<QTimer*>(sender());
36         ti->stop();
37         //cur_=0;
38         emit sig_finished();
39         return;
40     }
41     cur_ += 1;
42     setText(QString("%1%").arg(cur_));
43     update();
44 }

 

posted @ 2021-07-08 14:10  ╰⋛⊱๑飘遥๑⊰⋚╯  阅读(558)  评论(0)  编辑  收藏  举报