Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Set background colour for a custom QWidget

I am attempting to create a custom QWidget (from PyQt5) whose background colour can change. However, all the standard methods of setting the background colour do not seem to work for a custom QWidget class

So far I have attempted to change the colour through QSS stylesheet and by setting the palette. This works for a regular QWidget but for some reason not a custom widget.

I have found reference custom QWidgets requiring a paintEvent() function in the C++ documentation https://wiki.qt.io/How_to_Change_the_Background_Color_of_QWidget and an did find one reference to it in Python. However, implementing the linked paintevent fails because QStyleOption does not seem to exist in PyQt5.

Below shows a high level of the QWidget class I created (it also contains a bunch of labels) and the QSS I used for the Widget (style has been set in a parent widget but have tried setting it directly)

class AlarmWidget(QWidget):
    def __init__(self, alarm, parent=None):
        super(AlarmWidget, self).__init__(parent)
        self.setFixedHeight(200)
        self.setProperty("active", True)

        self.setAutoFillBackground(True)
        p = self.palette()
        p.setColor(self.backgroundRole(), PyQt5.QtCore.Qt.red)
        self.setPalette(p)
AlarmWidget {
  background-color: red
}

Overall, no matter what I do, it does not let me set the background colour for the custom QWidget so would really appreciate help

like image 791
rmasp98 Avatar asked Sep 03 '19 20:09

rmasp98


People also ask

How do you change the background image on Qwidget?

You can add a background image to your MainWindow by doing the following: create a QPixmap and give it the path to your image. create a QPalette and set it's QBrush with your pixmap and it's ColorRole to QPalette::Background . set your MainWindow palette to the palette you created.

How do I change the background color of Qframe?

ui->frame->setStyleSheet(""); ui->frame->setStyleSheet("background-color: rgb(255,255,255)");


2 Answers

The simplest fix is this:

class AlarmWidget(QWidget):
    def __init__(self, alarm, parent=None):
    ...
    self.setAttribute(QtCore.Qt.WA_StyledBackground, True)
    self.setStyleSheet('background-color: red')

This issue happens whenever a stylesheet is applied to a custom widget or to one of its ancestor widgets. To quote from the QWidget.setPalette documentation:

Warning: Do not use this function in conjunction with Qt Style Sheets. When using style sheets, the palette of a widget can be customized using the "color", "background-color", "selection-color", "selection-background-color" and "alternate-background-color".

What this fails to mention, however, is that for performance reasons custom widgets have stylesheet support disabled by default. So to get your example to work properly, you must (1) set the background colour via a stylesheet, and (2) explicitly enable stylesheet support using the WA_StyledBackground widget attribute.

A minimal example that demonstrates this is shown below:

import sys
from PyQt5 import QtCore, QtWidgets

class AlarmWidget(QtWidgets.QWidget):
    def __init__(self, alarm, parent=None):
        super(AlarmWidget, self).__init__(parent)
        self.setFixedHeight(200)
#         self.setAutoFillBackground(True)
#         p = self.palette()
#         p.setColor(self.backgroundRole(), QtCore.Qt.red)
#         self.setPalette(p)
        self.setAttribute(QtCore.Qt.WA_StyledBackground, True)
        self.setStyleSheet('background-color: red')

class Window(QtWidgets.QWidget):
    def __init__(self):
        super(Window, self).__init__()
        self.setStyleSheet('background-color: green')
        self.widget = AlarmWidget('')
        layout = QtWidgets.QVBoxLayout(self)
        layout.addWidget(self.widget)

if __name__ == '__main__':

    app = QtWidgets.QApplication(sys.argv)
    window = Window()
    window.setWindowTitle('BG Colour Test')
    window.setGeometry(600, 100, 300, 200)
    window.show()
    sys.exit(app.exec_())

This should show a window containing a red rectangle with a green border, like this:

screenshot

To test things further, set only the palette in the AlarmWidget class, but without setting a stylesheet in the Window class. This should show a red rectangle with no green border. Finally, set only the stylesheet in both classes - but without the setAttribute line. This should show a plain green rectangle with no inner red rectangle (i.e. the stylesheet on the custom widget is no longer applied).

like image 133
ekhumoro Avatar answered Oct 21 '22 18:10

ekhumoro


All methods work for me but if you want to implement paintEvent then the translation to PyQt5 is:

class AlarmWidget(QtWidgets.QWidget):
    # ...

    def paintEvent(self, event):
        opt = QtWidgets.QStyleOption()
        opt.initFrom(self)
        p = QtGui.QPainter(self)
        self.style().drawPrimitive(QtWidgets.QStyle.PE_Widget, opt, p, self)
like image 36
eyllanesc Avatar answered Oct 21 '22 19:10

eyllanesc