Qt Drawing Without Erasing Components - c++

Question

I am using Qt 5.11.1 and Qt Creator to create a project. My code draws several ellipses in the paintEvent function that I have overriden. But because of the paintEvent function's working style the buttons that I have under the ellipses are being erased. I want to have a window that has ellipses at the top and buttons at the bottom of the window. It will roughly seem like this:
Is there any way to do this. Right now, the buttons are being erased and I only have the ellipses. I would be really glad if someone could guide me.
Thanks in advance.
Note: My ellipses are green and my background is black but I have tried by changing the background to white or changing the stylesheet of the buttons, it didn't work.
This is my .h file:
#ifndef MAINWINDOW_H
#define MAINWINDOW_H
#include <QMainWindow>
namespace Ui {
class MainWindow;
}
class MainWindow : public QMainWindow
{
Q_OBJECT
public:
explicit MainWindow(QWidget *parent = 0);
~MainWindow();
private:
Ui::MainWindow *ui;
protected:
void paintEvent(QPaintEvent *e);
void setBackGroundColorToBlack();
};
#endif // MAINWINDOW_H
This is my .cpp file:
#include "mainwindow.h"
#include "ui_mainwindow.h"
#include <QtGui>
MainWindow::MainWindow(QWidget *parent) :
QMainWindow(parent),
ui(new Ui::MainWindow)
{
ui->setupUi(this);
setBackGroundColorToBlack();
}
MainWindow::~MainWindow()
{
delete ui;
}
void MainWindow::paintEvent(QPaintEvent *event) {
setUpdatesEnabled(false);
QPainter painterObj;
painterObj.begin(this);
painterObj.setPen(QPen(Qt::green, 2, Qt::SolidLine, Qt::RoundCap));
painterObj.drawEllipse(0, 0, 318, 390);//456
painterObj.drawEllipse(53, 65, 212, 260);//304
painterObj.drawEllipse(106, 130, 106, 130);//152
painterObj.end();
}
void MainWindow::setBackGroundColorToBlack() {
QPalette pal = palette();
// set black background
pal.setColor(QPalette::Background, Qt::black);
this->setAutoFillBackground(true); // This enables the qt to fill the background before the paint event.
this->setPalette(pal);
//update();
}
This is what I get:
My ui file is like this:

Answer 1

In general - don't use a QMainWindows class. It's for "big" desktop applications that have a menu, a status bar, etc. All you need is to derive from QDialog or even just QWidget. And you can paint the background yourself, so no need to mess with the pallete. The minimal example that should work is below. If the Bar button doesn't show up, then your Qt for the target is broken: the default platform style doesn't work.
// https://github.com/KubaO/stackoverflown/tree/master/questions/painted-with-children-51498155
// This project is compatible with Qt 4 and Qt 5
#include <QtGui>
#if QT_VERSION >= QT_VERSION_CHECK(5,0,0)
#include <QtWidgets>
#endif
QRectF scaled(const QRectF &rect, qreal scale) {
auto const center = rect.center();
auto const w = rect.width()*scale;
auto const h = rect.height()*scale;
return {center.x() - w/2.0, center.y() - h/2.0, w, h};
}
QRectF marginAdded(const QRectF &rect, qreal margin) {
return rect.adjusted(margin, margin, -margin, -margin);
}
const char buttonQSS[] =
"* { background-color: white; border-width: 2px; border-style:solid; border-color: red;"
" border-radius: 3px; padding: 3px; }"
"*:pressed { padding-left: 5px; padding-top: 5px; background-color: lightGray; }";
class MyWindow : public QWidget {
Q_OBJECT
QPushButton m_restoreButton{"Restore Size"};
QPushButton m_otherButton{"Bar"};
QGridLayout m_layout{this};
Q_SLOT void onRestore() { resize(sizeHint()); }
public:
explicit MyWindow(QWidget *parent = {}) : QWidget(parent) {
setAttribute(Qt::WA_OpaquePaintEvent);
m_layout.addItem(new QSpacerItem(0, 100, QSizePolicy::Minimum, QSizePolicy::MinimumExpanding), 0, 0);
m_layout.addWidget(&m_restoreButton, 1, 0);
m_layout.addWidget(&m_otherButton, 1, 1);
m_restoreButton.setStyleSheet(buttonQSS);
connect(&m_restoreButton, SIGNAL(clicked(bool)), SLOT(onRestore()));
}
protected:
void paintEvent(QPaintEvent *) override {
qreal const penWidth = 2.0;
// Cover the area above all the children
QRectF const area = marginAdded(QRect(0, 0, width(), childrenRect().top() - 10), penWidth);
QPainter p(this);
p.fillRect(rect(), Qt::black);
p.setPen({Qt::green, penWidth});
p.drawEllipse(scaled(area, 3./3.));
p.drawEllipse(scaled(area, 2./3.));
p.drawEllipse(scaled(area, 1./3.));
}
QSize sizeHint() const override { return {320, 568}; /* iPhone 5 */ }
};
int main(int argc, char *argv[])
{
QApplication a(argc, argv);
MyWindow w;
w.show();
return a.exec();
}
#include "main.moc"