如何将 QLineEdit() 和 QPushButton 带到登录窗口的中心?

问题描述

我正在创建一个 LoginWindow 并使用 QLineEdit 以便为我的用户提供一个输入他们的详细信息的地方。现在,我专注于创建 GUI。如图所示,考虑到我如何将 setAlignmentAlignCenter,我不确定为什么布局看起来像那样。这也适用于 QPushButton。是否有我不知道的课程可以解决此格式问题?

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_())

enter image description here

解决方法

针对这种情况有很多解决方案,但其中之一是使用一个最小尺寸的容器来显示所有小部件,并通过 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)
        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)

enter image description here

,

只需为 mainLayout 做对齐:

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