简体   繁体   中英

How to bring QLineEdit() & QPushButton to centre of Login window?

I am creating a LoginWindow and am using QLineEdit in order to make a place for my users to enter their details. Right now, I'm focused on creating the GUI. As shown in the picture, I am not sure why the layout looks like that, considering how I have setAlignment to AlignCenter . This also goes for QPushButton. Is there a class I am not aware to fix this formatting issue?

import sys
from PyQt5 import QtCore
from PyQt5 import QtWidgets
from PyQt5.QtWidgets import QMainWindow, QApplication, QWidget, QPushButton, QLineEdit, QVBoxLayout
import time #For time sleep

class MainWindow(QMainWindow):
    def __init__(self, *args, **kwargs):
        super(MainWindow, self).__init__(*args, **kwargs)
        self.setWindowTitle("MidiScribe - Login Window")
        self.setFixedSize(800,800)
        self.setStyleSheet("""background-color: crimson;
                            border-color: maroon;
                            border: 2.5px outset rgb(128, 128, 128);
                            border-radius: 3px;""")
        container = QWidget()
        self.setCentralWidget(container)
        mainLayout = QVBoxLayout(container)

        self.username = QLineEdit()
        self.username.setFixedWidth(300)
        self.username.setStyleSheet("""background-color: white;""")
        mainLayout.addWidget(self.username)
        self.username.setAlignment(QtCore.Qt.AlignCenter)
        self.setLayout(mainLayout)

        self.password = QLineEdit()
        self.password.setFixedWidth(300)
        self.password.setStyleSheet("""background-color: white""")
        mainLayout.addWidget(self.password)
        self.password.setAlignment(QtCore.Qt.AlignCenter)
        self.setLayout(mainLayout)

        self.loginbutton = QPushButton("Login")
        self.loginbutton.setFixedSize(50,50)
        self.loginbutton.setStyleSheet("QPushButton { background-color: lightcoral }"
                        "QPushButton:Hover { background-color: lightpink }"
                      "QPushButton:pressed { background-color: indianred }" )
        mainLayout.addWidget(self.loginbutton)

app = QApplication(sys.argv)
window = MainWindow()
window.show()
sys.exit(app.exec_())

在此处输入图像描述

There are many solutions for this case, but among them is to use a container that has the minimum size to show all the widgets and that is established through a QGridLayout:

class MainWindow(QMainWindow):
    def __init__(self, *args, **kwargs):
        super(MainWindow, self).__init__(*args, **kwargs)
        self.setWindowTitle("MidiScribe - Login Window")
        self.setFixedSize(800, 800)
        self.setStyleSheet(
            """background-color: crimson;
                            border-color: maroon;
                            border: 2.5px outset rgb(128, 128, 128);
                            border-radius: 3px;"""
        )

        self.username = QLineEdit(alignment=QtCore.Qt.AlignCenter)
        self.username.setFixedWidth(300)
        self.username.setStyleSheet("""background-color: white;""")

        self.password = QLineEdit(alignment=QtCore.Qt.AlignCenter)
        self.password.setFixedWidth(300)
        self.password.setStyleSheet("""background-color: white""")

        self.loginbutton = QPushButton("Login")
        self.loginbutton.setFixedSize(50, 50)
        self.loginbutton.setStyleSheet(
            "QPushButton { background-color: lightcoral }"
            "QPushButton:Hover { background-color: lightpink }"
            "QPushButton:pressed { background-color: indianred }"
        )

        container = QWidget(objectName="container")
        container.setStyleSheet("QWidget#container{border: none}")
        container.setContentsMargins(0, 0, 0, 0)
        lay = QVBoxLayout(container)
        lay.addWidget(self.username, alignment=QtCore.Qt.AlignCenter)
        lay.addWidget(self.password, alignment=QtCore.Qt.AlignCenter)
        lay.addWidget(self.loginbutton, alignment=QtCore.Qt.AlignCenter)
        container.setFixedSize(container.sizeHint())

        central_widget = QWidget()
        self.setCentralWidget(central_widget)

        grid_layout = QGridLayout(central_widget)
        grid_layout.addWidget(container, 1, 1)

在此处输入图像描述

Just do alignment for mainLayout:

mainLayout.addWidget(self.loginbutton, alignment=QtCore.Qt.AlignCenter)
mainLayout.setAlignment(QtCore.Qt.AlignCenter)

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM