PyQt5 Laying Properly

Question

I've already looked heavily to see how to properly layer my ui and haven't found out how to layer my windows so it comes off looking somewhat like this:

I want to have my background layer which I have set as a label with an image and then have a qt widget with login centered in the middle of it almost popping out at the user however when I do this it comes out with the widget behind my main window, it doesn't align properly and it also doesnt "follow" the window when I move it around image provided:

import PyQt5.QtWidgets
import sys


class LoginPanel(PyQt5.QtWidgets.QWidget):
    def __init__(self):
        PyQt5.QtWidgets.QWidget.__init__(self)
        self.setFixedSize(600,400)
        self.setWindowFlags(PyQt5.QtCore.Qt.FramelessWindowHint | PyQt5.QtCore.Qt.WindowStaysOnTopHint)
        self.setStyleSheet("""
            QWidget {
                background-color: #CBCAB7;
                border-radius: 50px;
            }
        """) 
        self.show()


class Auth(PyQt5.QtWidgets.QMainWindow):
    def __init__(self):
        super().__init__()
        self.setWindowTitle("Login")

        self.setFixedSize(1200,800)
        self.setWindowFlags(PyQt5.QtCore.Qt.WindowCloseButtonHint | PyQt5.QtCore.Qt.WindowMinimizeButtonHint)
        self.setWindowIcon(PyQt5.QtGui.QIcon("assets\login.ico"))
        self.background = PyQt5.QtWidgets.QLabel("", self) 

        self.layout = PyQt5.QtWidgets.QGridLayout()
        self.layout.addWidget(LoginPanel(), 0, 1)
        self.set_background()
        self.show()
        #self.layout.setAlignment(PyQt5.QtCore.Qt.AlignCenter)
    

    def set_background(self):
        img = PyQt5.QtGui.QPixmap("assets\background.png")
        pixmap = img.scaled(self.width(), self.height())
        self.background.setPixmap(img)
        self.background.resize(self.width(), self.height())


if __name__ == "__main__":
    app = PyQt5.QtWidgets.QApplication(sys.argv) 
    a = Auth()
    sys.exit(app.exec())

Here is my current code, I just wanted some help sense while looking online I was unable to find any great examples or references.

user_6622587 · Answer

My recommendation is not to create a new window but to set it as a child of the window, and to raise it above any other child, you must use raise_() method, also add a QGraphicsDropShadowEffect to establish the floating window effect:

from PyQt5 import QtCore, QtGui, QtWidgets
import sys


class LoginPanel(QtWidgets.QWidget):
    def __init__(self, parent=None):
        super().__init__(parent)
        self.setFixedSize(600, 400)

        self.container = QtWidgets.QWidget(self)
        self.container.setStyleSheet(
            """
            background-color: #CBCAB7;
            border-radius: 50px;
        """
        )

        offset = 30
        self.container.setGeometry(
            self.rect().adjusted(offset, offset, -offset, -offset)
        )
        effect = QtWidgets.QGraphicsDropShadowEffect(
            blurRadius=50, offset=QtCore.QPointF(0, 0)
        )
        self.container.setGraphicsEffect(effect)

        lay = QtWidgets.QFormLayout(self)
        lay.setContentsMargins(2 * offset, 2 * offset, 2 * offset, 2 * offset)
        lay.addRow("Username:", QtWidgets.QLineEdit())
        lay.addRow("Email:", QtWidgets.QLineEdit())


class Auth(QtWidgets.QMainWindow):
    def __init__(self):
        super().__init__()
        self.setWindowTitle("Login")

        self.setFixedSize(1200, 800)
        self.setWindowFlags(
            QtCore.Qt.WindowCloseButtonHint | QtCore.Qt.WindowMinimizeButtonHint
        )
        self.setWindowIcon(QtGui.QIcon("assets\login.ico"))
        self.background = QtWidgets.QLabel(self)
        self.set_background()

        self.panel = LoginPanel(self)
        self.center_panel()

    def set_background(self):
        img = QtGui.QPixmap("assets\background.png")
        pixmap = img.scaled(self.size())
        self.background.setPixmap(pixmap)
        self.background.resize(self.size())

    def resizeEvent(self, event):
        super().resizeEvent(event)
        self.center_panel()

    def center_panel(self):
        g = self.panel.geometry()
        g.moveCenter(self.rect().center())
        self.panel.setGeometry(g)
        self.panel.raise_()


if __name__ == "__main__":
    app = QtWidgets.QApplication(sys.argv)
    a = Auth()
    a.show()
    sys.exit(app.exec())

PyQt5 Laying Properly

1 Answers