How to change QPainterPath color after clicking on QPushButton

Question

I subclassed a QPushButton so that I was able to re-implement the paintEvent(QPaintEvent *paint) method also advised by the official documentation.

Below is the sequence of operations:

a) After I launch the application the button is below:

b) This is after I hover on it:

c) then I click the button:

d) and finally I release the mouse

e) go away from the button

However the problem is that the QPainterPath with which I designed the green box it should be red after I release the button. And, of course, it should become green again after I click again the button.

Below the code:

custombutton.h

class CustomButton : public QPushButton
{
    Q_OBJECT
public:
    CustomButton(QWidget *parent = nullptr);
    ~CustomButton();

    QString FirstName = "MACHINE";
    QString LastName = "CONTROL";

protected:
    void paintEvent(QPaintEvent *);
};

custombutton.cpp

CustomButton::CustomButton(QWidget *parent) : QPushButton(parent)
{
    setGeometry(150, 150, 110, 110);
    setAttribute(Qt::WA_TranslucentBackground);
    setStyleSheet(
        "QPushButton{background-color: lightGray;border: 1px solid black; border-radius: 5px;}"
        "QPushButton:hover{background-color: gray;}"
        "QPushButton:pressed{background-color: lightGray;}");
}

CustomButton::~CustomButton()
{

}    

void CustomButton::paintEvent(QPaintEvent *paint)
{
    QPushButton::paintEvent(paint);
    QPainter p(this);
    p.setRenderHint(QPainter::Antialiasing);
    QPainterPath path;
    path.addRoundedRect(QRectF(15, 15, 80, 5), 2, 2);
    QPen pen(Qt::black, 0.3);
    p.setPen(pen);
    p.fillPath(path, Qt::darkGreen);
    p.drawPath(path);
    p.save();

    p.drawText(QPoint(20, 60), FirstName);
    p.drawText(QPoint(20, 80), LastName);
    p.setFont(QFont("Arial", 10));
    p.restore();
}

mainwindow.h

class MainWindow : public QMainWindow
{
    Q_OBJECT

public:
    MainWindow(QWidget *parent = nullptr);
    ~MainWindow();

public slots:
    void onClickedButton();
private:
    Ui::MainWindow *ui;
    CustomButton *newBtn;
};

mainwindow.cpp

MainWindow::MainWindow(QWidget *parent)
    : QMainWindow(parent)
    , ui(new Ui::MainWindow)
{
    ui->setupUi(this);
    newBtn = new CustomButton(this);
    newBtn->show();
    connect(newBtn, &QPushButton::clicked, this, &MainWindow::onClickedButton);

}

MainWindow::~MainWindow()
{
    delete ui;
}

void MainWindow::onClickedButton()
{
    QPushButton* target = qobject_cast<QPushButton*>(sender());
    if (target != nullptr)
    {
        QPainter p;
        p.setRenderHint(QPainter::Antialiasing);
        QPainterPath path;
        path.addRoundedRect(QRectF(15, 15, 80, 5), 2, 2);
        QPen pen(Qt::black, 0.3);
        p.setPen(pen);
        p.fillPath(path, Qt::darkRed);
        p.drawPath(path);
        p.save();
        p.restore();
    }
}

As you see in the MainWindow I created a function onClickedButton() which I thought would have triggered the QPainterPath into red after clicked. And in order to do that I casted it into an object (qobject_cast). But unfortunately it didn't work as expexted.

Answer 1

The solution is to create a flag that indicates the color and call update() for repainting:

#ifndef CUSTOMBUTTON_H
#define CUSTOMBUTTON_H

#include <QPushButton>

class CustomButton : public QPushButton
{
    Q_OBJECT
public:
    CustomButton(QWidget *parent = nullptr);
    ~CustomButton();

    QString FirstName = "MACHINE";
    QString LastName = "CONTROL";
private Q_SLOTS:
    void handleClicked();
protected:
    void paintEvent(QPaintEvent *);
private:
    bool state;
};
#endif // CUSTOMBUTTON_H

#include "custombutton.h"

#include <QPainter>
#include <QPainterPath>


CustomButton::CustomButton(QWidget *parent) : QPushButton(parent), state(true)
{
    setGeometry(150, 150, 110, 110);
    setAttribute(Qt::WA_TranslucentBackground);
    setStyleSheet(
        "QPushButton{background-color: lightGray;border: 1px solid black; border-radius: 5px;}"
        "QPushButton:hover{background-color: gray;}"
        "QPushButton:pressed{background-color: lightGray;}");
    connect(this, &QPushButton::clicked, this, &CustomButton::handleClicked);
}

CustomButton::~CustomButton()
{

}

void CustomButton::handleClicked()
{
    state = !state;
    update();
}

void CustomButton::paintEvent(QPaintEvent *paint)
{
    QPushButton::paintEvent(paint);
    QPainter p(this);
    p.setRenderHint(QPainter::Antialiasing);
    QPainterPath path;
    path.addRoundedRect(QRectF(15, 15, 80, 5), 2, 2);
    QPen pen(Qt::black, 0.3);
    p.setPen(pen);
    p.fillPath(path, state ? Qt::darkGreen: Qt::darkRed);
    p.drawPath(path);

    p.drawText(QPoint(20, 60), FirstName);
    p.drawText(QPoint(20, 80), LastName);
    p.setFont(QFont("Arial", 10));
}