PyQt5中如何实现QGridLayout内控件整体居中对齐

问题描述 #

使用PyQt5开发桌面GUI时，采用QGridLayout布局管理登录表单控件，仅实现了基础控件摆放，无法让整个登录表单组在窗口中整体居中。

现有实现代码 #

from PyQt5.QtWidgets import *
from PyQt5.QtGui import *
from PyQt5.QtCore import *

class CompanyLogin(QWidget):
    def __init__(self, *args, **kwargs):
        super().__init__()

        self.layout = QGridLayout()

        self.setLayout(self.layout)
        self.setWindowTitle('Window')
        self.setGeometry(0, 0, 1920, 1080)

        self.setupUI()

    def setupUI(self):
        company_note = QLabel(parent=self, text='Company: ')
        self.company = QComboBox(parent=self)
        self.company.addItem('t1')
        self.company.addItem('t2')

        password_note = QLabel(parent=self, text='Password: ')
        self.password = QLineEdit(parent=self)

        submit = QPushButton(parent=self, text='Submit')

        verticalSpacer = QSpacerItem(40, 20, QSizePolicy.Minimum, QSizePolicy.Expanding)
        self.layout.addItem(verticalSpacer, 6, 0, Qt.AlignTop)

        self.layout.addWidget(company_note, 1, 0, Qt.AlignLeft)
        self.layout.addWidget(self.company, 1, 1, Qt.AlignRight)

        self.layout.addWidget(password_note, 2, 0, Qt.AlignLeft)
        self.layout.addWidget(self.password, 2, 1, Qt.AlignRight)

        self.layout.addWidget(submit, 3, 0, 1, 0, Qt.AlignCenter)

当前运行效果 #

预期效果 #

整个登录表单在窗口水平、垂直方向均居中展示：

解决方案 #

现有代码的核心问题有两点：一是仅在底部添加了垂直占位项，没有在表单上下、左右四个方向添加拉伸占位，无法将表单挤到布局中心；二是提交按钮的跨列参数传值错误，会导致布局异常。

调整后完整代码 #

from PyQt5.QtWidgets import *
from PyQt5.QtGui import *
from PyQt5.QtCore import *

class CompanyLogin(QWidget):
    def __init__(self, *args, **kwargs):
        super().__init__()
        self.layout = QGridLayout()
        self.setLayout(self.layout)
        self.setWindowTitle('Window')
        self.setGeometry(0, 0, 1920, 1080)
        self.setupUI()

    def setupUI(self):
        # 创建表单控件
        company_note = QLabel(parent=self, text='Company: ')
        self.company = QComboBox(parent=self)
        self.company.addItem('t1')
        self.company.addItem('t2')
        self.company.setFixedWidth(200) # 固定控件宽度避免拉伸变形

        password_note = QLabel(parent=self, text='Password: ')
        self.password = QLineEdit(parent=self)
        self.password.setFixedWidth(200) # 和下拉框保持宽度一致

        submit = QPushButton(parent=self, text='Submit')
        submit.setFixedWidth(100)

        # 网格列划分：0(左占位)、1(文本标签列)、2(输入控件列)、3(右占位)
        # 添加四个方向的拉伸占位，自动占满表单外的剩余空间
        top_spacer = QSpacerItem(20, 40, QSizePolicy.Minimum, QSizePolicy.Expanding)
        self.layout.addItem(top_spacer, 0, 0, 1, 4) # 顶部垂直占位
        bottom_spacer = QSpacerItem(20, 40, QSizePolicy.Minimum, QSizePolicy.Expanding)
        self.layout.addItem(bottom_spacer, 4, 0, 1, 4) # 底部垂直占位
        left_spacer = QSpacerItem(40, 20, QSizePolicy.Expanding, QSizePolicy.Minimum)
        self.layout.addItem(left_spacer, 1, 0, 3, 1) # 左侧水平占位
        right_spacer = QSpacerItem(40, 20, QSizePolicy.Expanding, QSizePolicy.Minimum)
        self.layout.addItem(right_spacer, 1, 3, 3, 1) # 右侧水平占位

        # 放置表单控件
        self.layout.addWidget(company_note, 1, 1, Qt.AlignLeft|Qt.AlignVCenter)
        self.layout.addWidget(self.company, 1, 2, Qt.AlignRight|Qt.AlignVCenter)
        self.layout.addWidget(password_note, 2, 1, Qt.AlignLeft|Qt.AlignVCenter)
        self.layout.addWidget(self.password, 2, 2, Qt.AlignRight|Qt.AlignVCenter)
        self.layout.addWidget(submit, 3, 1, 1, 2, Qt.AlignCenter) # 提交按钮跨两列居中

        # 设置布局边距和控件间距
        self.layout.setSpacing(20)
        self.layout.setContentsMargins(20,20,20,20)

补充实现方式 #

如果不想手动添加四个方向的占位项，也可以用布局嵌套的方式实现，逻辑更清晰：单独创建一个QWidget作为表单容器，将所有表单控件放在容器的QGridLayout中，再把容器添加到主窗口的QVBoxLayout里，设置对齐参数为Qt.AlignCenter即可实现相同的居中效果。

内容的提问来源于stack exchange，提问作者Niklas Wild