Qlabel in front of a QGridLayout

Question

I am trying to make a QLabel appear over a QGridLayout, but I cannot figure how to do it.

This is a sample code:

from PyQt5.QtWidgets import QWidget, QApplication, QGridLayout, QFrame, QLabel
import sys

class Foo(QWidget):

    def __init__(self):
        super().__init__()



        grid_layout = QGridLayout()

        rect1 = QLabel('RECT1')
        rect1.setStyleSheet("color: green;")
        grid_layout.addWidget(rect1, 0, 1)

        rect2 = QLabel('RECT2')
        rect2.setStyleSheet("color: blue;")
        grid_layout.addWidget(rect2, 0, 2)

        self.setLayout(grid_layout)
        self.show()

app = QApplication(sys.argv)
foo = Foo()
sys.exit(app.exec_())

which produces the following output:

For instance, I want to create another QLabel in red, and display it over them, in the center of the image:

red_label = QLabel('red')
red_labe.setStyleSheet("font-size:20pt; color: red;");

Something like this:

How can I achieve that?

eyllanesc · Accepted Answer · 2019-06-09T00:24:11.397

A possible solution is to make red_label son of the QWidget for it you must pass the self parameter when the object is created. In addition to this the QLabel must change size when the window does, emulating the layout task for it will create a signal that will be emited in the resizeEvent event:

import sys

from PyQt5 import QtCore, QtWidgets


class Foo(QtWidgets.QWidget):
    sizeChanged = QtCore.pyqtSignal(QtCore.QSize)

    def __init__(self):
        super().__init__()
        grid_layout = QtWidgets.QGridLayout(self)

        rect1 = QtWidgets.QLabel("RECT1")
        rect1.setStyleSheet("color: green;")
        grid_layout.addWidget(rect1, 0, 1)

        rect2 = QtWidgets.QLabel("RECT2")
        rect2.setStyleSheet("color: blue;")
        grid_layout.addWidget(rect2, 0, 2)

        red_label = QtWidgets.QLabel("red", self)
        red_label.setAlignment(QtCore.Qt.AlignCenter)
        red_label.setStyleSheet("font-size: 20pt; color: red;")

        self.sizeChanged.connect(red_label.resize)

    def resizeEvent(self, event):
        self.sizeChanged.emit(event.size())
        super().resizeEvent(event)


if __name__ == "__main__":
    app = QtWidgets.QApplication(sys.argv)
    foo = Foo()
    foo.show()
    sys.exit(app.exec_())

score 1 · Answer 2 · answered Feb 22 '18 at 20:55

This may be a little less elegant of a solution, but it does keep the red labeled centered as the window is resized.

class Foo(QWidget):

    def __init__(self):
        super().__init__()


        grid_layout = QGridLayout()

        rect1 = QLabel('RECT1')
        rect1.setStyleSheet("color: green;")
        grid_layout.addWidget(rect1, 0, 0)

        rect2 = QLabel('RECT2')
        rect2.setStyleSheet("color: blue;")
        grid_layout.addWidget(rect2, 0, 2)


        grid_layout_two = QGridLayout()

        blank_label = QLabel()

        red_label = QLabel('red')
        red_label.setStyleSheet("font-size:20pt; color: red;")
        grid_layout_two.addWidget(blank_label, 0, 0)
        grid_layout_two.addWidget(red_label, 0, 1)
        grid_layout_two.addWidget(blank_label, 0, 2)

        grid_layout_three = QGridLayout()
        grid_layout_three.addItem(grid_layout, 0, 0)
        grid_layout_three.addItem(grid_layout_two, 0, 0)

        self.setLayout(grid_layout_three)
        self.show()

app = QApplication(sys.argv)
foo = Foo()
sys.exit(app.exec_())

Basically making three grid layouts, positioning the elements so that the red label is in the center of the other two labels but in a grid layout that is in front of the other labels layout.

Qlabel in front of a QGridLayout

2 Answers2