05. 布局管理

一、布局管理

  布局(layout)的一个作用是确定界面上各种控件之间的相对位置,使控件排列起来横平竖直;另一个作用是在窗口的尺寸发生变化时,窗口上的控件的尺寸也随同窗口发生变化,以使窗口不会出现大面积的空白区域或者控件不被窗口或其他控件挡住。

  之前,我们使用控件时基本上都是采用绝对布局的方式,即为每个小部件都指定它的位置和大小(以像素为单位)。当使用绝对定位时,如果调整窗口大小,小部件的大小和位置不会改变。如果决定更改布局,必须完全重新设计布局,这是繁琐且耗时的工作。

  PySide6 中提供了布局控件,以便更优雅地管理容器内的小部件定位。 布局管理器相对于绝对定位的优势是 窗口内的小部件会自动调整大小

  在手动创建布局时,一般都用 setLayout(layout:QLayout) 方法 设置窗口或容器控件内部的布局,也可以在创建布局时指定布局的父控件。常用的布局控件如下:

  • 水平布局QHBoxLayout),可以把多个控件以 水平 的顺序依次排开;
  • 垂直布局QVBoxLayout),可以把多个控件以 垂直 的顺序依次排开;
  • 栅格布局QGridLayout),可以以网格的形式把多个控件以 矩阵 形式排列;
  • 表单布局QFormLayout),可以以 两列 的形式排列控件。

  我们可以在终端中使用 pip 安装 PySide6 模块。默认是从国外的主站上下载,因此,我们可能会遇到网络不好的情况导致下载失败。我们可以在 pip 指令后通过 -i 指定国内镜像源下载

pip install pyside6 -i https://mirrors.aliyun.com/pypi/simple

  国内常用的 pip 下载源列表:

布局控件

  布局有关的类都直接或间接继承 QLayout 类,它的常用方法如下:

addWidget(w:QWidget) -> None                                                    # 添加控件
removeWidget(w:QWidget) -> None                                                 # 移除控件

setAlignment(w:QWidget, alignment:Qt.Alignment) -> None                         # 设置控件对齐方式
setAlignment(l:QLayout, alignment:Qt.Alignment) -> None                         # 设置布局对齐方式

setContentsMargins(margins:QMargins) -> None                                    # 设置控件边距
setContentsMargins(left:int, top:int, right:int, bottom:int) -> None            # 设置控件边距

setSizeConstraint(constraint:QFormLayout.SizeConstraint) -> None                # 设置控件随窗口大小变化时尺寸的变化方式

  用 setSizeConstraint(constraint:QLayout.SizeConstraint) 方法可以设置控件随窗口大小改变时尺寸的变化方式。枚举类型参数 QLayout.可以取值如下:

QLayout.SizeConstraint.SetDefaultConstraint                                     # 表示控件的最小尺寸根据setMinimunSize(QSize)方法或setMinimunSize(int,int)方法设定的值确定
QLayout.SizeConstraint.SetNoConstraint                                          # 表示控件尺寸的变化量不受限制
QLayout.SizeConstraint.SetMinimumSize                                           # 表示将控件的尺寸设置成由控件的setMinimumSize()方法设定的尺寸值
QLayout.SizeConstraint.SetFixedSize                                             # 表示将控件的尺寸设置成由控件的sizeHint()方法获取的尺寸值
QLayout.SizeConstraint.SetMaximumSize                                           # 表示将控件的尺寸设置成由控件的setMaximumSize()方法设定的尺寸值
QLayout.SizeConstraint.SetMinAndMaxSize                                         # 表示控件的尺寸可以在最小值和最大值之间变化。

二、绝对布局

  最简单的布局方式就是使用 move(x:int, y:int) 方法来规定各个控件在窗口中的位置。在 PySide6 中,不管是窗口还是控件,它们的 坐标原点 以及 锚点 都在 左上角,而且 向右方向为 X 轴正方向向下方向为 Y 轴正方向。使用 move(x:int, y:int) 方法设置控件的坐标是固定的。也就是说,当我们拉伸窗口时,控件的位置固定不变,并不能能自适应。

def move(self, x: int, y: int, /) -> None                                       # 移动控制到(x, y)处

  我们新建一个 ui.py 文件,用来存放 UI 代码。

from PySide6.QtWidgets import QWidget
from PySide6.QtWidgets import QLabel
from PySide6.QtGui import QFont

class MyUi:
    def setupUi(self, window:QWidget):
        window.resize(800, 600)                                                 # 1.设置窗口对象大小
      
        label = QLabel("这是一个标签", window)                                   # 2.创建标签控件
        label.setFont(QFont("楷体", 48))
        label.setStyleSheet("background-color: blue;")                          # 3.设置标签的背景颜色
        label.move(50, 100)                                                     # 4.设置标签位置

  我们再新建一个 widget.py 文件,用来存放业务逻辑代码。

import sys

from PySide6.QtWidgets import QApplication, QWidget

from ui import MyUi

class MyWidget(QWidget):
    def __init__(self):
        super().__init__()                                                      # 1.调用父类Qwidget类的__init__()方法

        self.__ui = MyUi()
        self.__ui.setupUi(self)                                                 # 2.初始化页面

if __name__ == "__main__":
    app = QApplication(sys.argv)                                                # 1.创建一个QApplication类的实例
    window = MyWidget()                                                         # 2.创建一个窗口
    window.show()                                                               # 3.显示窗口  
    sys.exit(app.exec())                                                        # 4.进入程序的主循环并通过exit()函数确保主循环安全结束

  这里,我们使用 move(x:int, y:int) 方法将 QLabel 控制移动到窗口的 (50, 100) 位置处。

绝对布局

三、线性布局

  线性布局 是将放入其中的组件按照水平或者垂直的方式来布局,也就是控制放入其中的组件横向排列或纵向排列。其中,横向排列的称为 水平布局管理器,用 QHBoxLayout 控件表示。纵向排列的称为 垂直布局管理器,用 QVBoxLayout 控件表示。在水平局部管理器中,每一列只能放一个组件;在垂直布局管理器中,每一行只能放一个组件。

  QHBoxLayoutQVBoxLayout 都继承于 QBoxLayoutQBoxLayout 的常用方法如下:

addWidget(widget:QWidget, stretch:int=0, alignment:Qt.Alignment=Qt.Alignment()) -> None # 添加控件,可设置伸缩系数和对齐方式
addLayout(layout:QLayout, stretch:int=0) -> None                                # 添加子布局,可设置伸缩系数
addSpacing(size:int) -> None                                                    # 添加固定长度的占位空间
addStretch(stretch:int=0) -> None                                               # 添加可伸缩的空间
addStrut(size:int) -> None                                                      # 指定最小值

insertWidget(index:int, widget:QWidget, stretch:int=0, alignment:Qt.Alignment=Qt.Alignment()) -> None   # 根据索引插入控件,可设置伸缩系数和对齐方式
insertLayout(index:int, layout:QLayout, stretch:int=0) -> None                  # 根据索引插入子布局,可设置伸缩系数
insertSpacing(index:int, size:int) -> None                                      # 根据索引插入固定长度的占位空间
insertStretch(index:int, stretch:int=0) -> None                                 # 根据索引插入可伸缩的空间

setStretch(index:int, stretch:int) -> None                                      # 设置索引设置控件或布局的伸缩系数
stretch(index:int): int                                                         # 获取第index个控件的伸缩比例系数

setDirection(direction:QBoxLayout.Direction) -> None                            # 设置布局方向
setStretchFactor(w:QWidget, stretch:int) -> bool                                # 给控件设置伸缩系数,成功则返回True
setStretchFactor(l:QLayout, stretch:int) -> bool                                # 给布局设置伸缩系数,成功则返回True

  用 addWidget(widget:QWidget, stretch:int=0, alignment:Qt.Alignment=Qt.Alignment()) 方法和 addLayout(layout:QLayout, stretch:int=0) 方法可以 在末尾添加控件和子布局,其中参数 stretch布局内部各控件和子布局的相对伸缩系数,相对伸缩系数取整数,同时可以 指定控件的对齐方式,参数 alignmentQt.Alignment 枚举值,可以取值如下:

Qt.AlignmentFlag.AlignLeft                                                      # 左对齐
Qt.AlignmentFlag.AlignRigh                                                      # 右对齐
Qt.AlignmentFlag.AlignJustify                                                   # 水平两端对齐
Qt.AlignmentFlag.AlignHCenter                                                   # 水平居中对齐

Qt.AlignmentFlag.AlignCenter                                                    # 居中对齐

Qt.AlignmentFlag.AlignTop                                                       # 垂直靠上对齐
Qt.AlignmentFlag.AlignBottom                                                    # 垂直靠下对齐
Qt.AlignmentFlag.AlignVCenter                                                   # 垂直居中对齐

  用 addStrut(value:int) 方法可以 设置水平布局在竖直方向的最小高度,也可以 设置竖直布局在水平方向的最小宽度

  用 setDirection(direction:QBoxLayout.Direction) 方法可以 设置布局的方向,例如把水平布局改变成竖直布局,参数 directionQBoxLayout.Direction 类型的枚举值,可以取值如下:

QBoxLayout.Direction.LeftToRight                                                # 从左到右水平布局
QBoxLayout.Direction.RightToLeft                                                # 从右到左水平布局
QBoxLayout.Direction.TopToBottom                                                # 从上到下竖直布局
QBoxLayout.Direction.BottomToTop                                                # 从下到上竖直布局

3.1、水平布局

  QHBoxLayout 控件表示 水平布局,它的特点是方法该布局管理器中的控件,默认 水平排列。在创建布局管理器对象后,我们需要调用 setLayout(layout:QLayout) 方法将布局管理器添加到窗体中。

  用 QHBoxLayout 类创建实例对象的方法如下:

QHBoxLayout(parent:QWidget=None)

  其中,parent窗口 或者 容器 类控件。

  我们可以使用 addWidget(widget:QWidet) 方法 向布局管理器中添加控件。然后,我们可以用 addSpacing(size:int) 方法用来 设置控件的左右间距。然后,我们还可以使用 addStretch(stretch:int=0) 方法用来 增加一个可伸缩的控件

  我们修改 ui.py 文件的内容。

from PySide6.QtWidgets import QWidget
from PySide6.QtWidgets import QHBoxLayout
from PySide6.QtWidgets import QPushButton

class MyUi:
    def setupUi(self, window:QWidget):
        window.resize(800, 50)                                                  # 1.设置窗口对象大小

        layout = QHBoxLayout()                                                  # 2.创建一个水平布局管理器

        button1 = QPushButton("按钮1")                                          # 3.创建按钮
        layout.addWidget(button1)                                               # 4.将按钮添加到布局管理器中
        layout.addSpacing(100)                                                  # 5.设置控件的左右间距

        button2 = QPushButton("按钮2")
        layout.addWidget(button2)
        layout.addStretch(1)                                                    # 6.增加一个可伸缩的控件  

        button3 = QPushButton("按钮3")
        layout.addWidget(button3)
        layout.addStretch(2)

        button4 = QPushButton("按钮4")
        layout.addWidget(button4)
        layout.addStretch(1)

        window.setLayout(layout)                                                # 7.将布局管理器添加到窗体中

水平布局

布局管理器被设置到窗口上,被添加到布局管理器中的各个控件也会自然而然地显示到窗口上,也就是我们可以不必再在实例化的时候给这些控件指定父窗口。

在水平布局中,先添加的控件位于后添加的控件左方。

3.2、垂直布局

  QVBoxLayout 控件表示 垂直布局,它的特点是方法该布局管理器中的控件,默认 垂直排列。在创建布局管理器的同时,我们可以指定要设置布局的窗口。

  用 QVBoxLayout 类创建实例对象的方法如下:

QVBoxLayout(parent:QWidget=None)

  其中,parent窗口 或者 容器 类控件。

  我们可以使用 addWidget(widget:QWidget) 方法 向布局管理器中添加控件。然后,我们可以用 addSpacing(size:int) 方法用来 设置控件的上下间距。然后,我们还可以使用 addStretch(stretch:int=0) 方法用来 增加一个可伸缩的控件

  我们修改 ui.py 文件的内容。

from PySide6.QtWidgets import QWidget
from PySide6.QtWidgets import QVBoxLayout
from PySide6.QtWidgets import QPushButton
from PySide6.QtCore import Qt

class MyUi:
    def setupUi(self, window:QWidget):
        window.resize(20, 600)                                                  # 1.设置窗口对象大小

        layout = QVBoxLayout(window)                                            # 2.创建一个垂直布局管理器

        button1 = QPushButton("按钮1")                                          # 3.创建按钮

        layout.addWidget(button1, 1, Qt.AlignmentFlag.AlignTop)                 # 4.将按钮添加到布局管理器中

        button2 = QPushButton("按钮2")
        layout.addWidget(button2, 2, Qt.AlignmentFlag.AlignTop)

        button3 = QPushButton("按钮3")
        layout.addWidget(button3, 2, Qt.AlignmentFlag.AlignTop)

        button4 = QPushButton("按钮4")
        layout.addWidget(button4, 3, Qt.AlignmentFlag.AlignTop)

垂直布局

在垂直布局中,先添加的控件位于后添加的控件上方。

四、表单布局

  表单布局 QFormLayout左右两列多行构成,将控件放到左右两列中,通常 左列 放置 QLabel 控件,用来 显示信息,给用户提示;右列放置 QLineEdit 控件、QSpinBox输入控件,需要用户 进行输入或者选择。我们也可以让一个控件单独占据一行。

  表单布局 QFormLayout 继承自 QLayout,用 QFormLayout 类创建实例对象的方法如下所示:

QFormLayout(parent:QWidget=None)

  其中 parent窗口或容器类控件

  QFormLayout 类的常用方法如下:

addRow(label:QWidget, field:QWidget) -> None                                    # 末尾添加行,两个控件分别在左右
addRow(label:QWidget, field:QLayout) -> None                                    # 末尾添加行,控件在左,布局在右
addRow(labelText:str, field:QWidget) -> None                                    # 末尾添加行,左侧创建名为labelText的标签,右侧是控件
addRow(labelText:str, field:QLayout) -> None                                    # 末尾添加行,左侧创建名为labelText的标签,右侧是布局
addRow(widget:QWidget) -> None                                                  # 末尾添加行,只有一个控件,控件占据左右两侧
addRow(layout:QLayout) -> None                                                  # 末尾添加行,只有一个布局,布局占据左右两侧

insertRow(row:int, label:QWidget, field:QWidget) -> None                        # 在第row行插入行,两个控件分别在左右
insertRow(row:int, label:QWidget, field:QLayout) -> None                        # 在第row行插入行,控件在左,布局在右
insertRow(row:int, labelText:str, field:QWidget) -> None                        # 在第row行插入行,左侧创建名为labelText的标签,右侧是控件
insertRow(row:int, labelText:str, field:QLayout) -> None                        # 在第row行插入行,左侧创建名为labelText的标签,右侧是布局
insertRow(row:int, widget:QWidget) -> None                                      # 在第row行插入行,只有一个控件,控件占据左右两侧
insertRow(row:int, layout:QLayout) -> None                                      # 在第row行插入行,只有一个布局,布局占据左右两侧

removeRow(row:int) -> None                                                      # 删除第row行及其控件
removeRow(widget:QWidget) -> None                                               # 删除控件
removeRow(layout:QLayout) -> None                                               # 删除布局

setHorizontalSpacing(spacing:int) -> None                                       # 设置水平间距
setVerticalSpacing(spacing:int) -> None                                         # 设置垂直间距

setRowWrapPolicy(policy:QFormLayout.RowWrapPolicy) -> None                      # 设置行换行策略

rowCount() -> int                                                               # 获取行数

setLabelAlignment(alignment:Qt.Alignment) -> None                               # 设置左列对齐方式
setFormAlignment(alignment:Qt.Alignment) -> None                                # 设置控件在表单布局中的对齐方式

setFieldGrowthPolicy(policy:QFormLayout.FieldGrowthPolicy) -> None              # 设置可伸缩空i教案的伸缩方式

  表单布局还提供了一个 setRowWrapPolicy(policy:QFormLayout.RowWrapPolicy) 方法,用来 设置表单布局中每一列的摆放方式。参数 policyQFormLayout.RowWrapPolicy 类型的枚举值,可以取值如下:

QFormLayout.RowWrapPolicy.DontWrapRows                                          # 字段总是放在标签旁边,这是默认设置
QFormLayout.RowWrapPolicy.WrapAllRows                                           # 字段总是布局在标签下面
QFormLayout.RowWrapPolicy.WrapLongRows                                          # 如果空间足够字段放在标签的旁边,否则字段放在标签的下面

  我们修改 ui.py 文件的内容。

from PySide6.QtWidgets import QWidget
from PySide6.QtWidgets import QFormLayout
from PySide6.QtWidgets import QLabel, QLineEdit, QPushButton

class MyUi:
    def setupUi(self, window:QWidget):
        window.resize(200, 60)                                                  # 1.设置窗口对象大小

        layout = QFormLayout(window)                                            # 2.创建一个表单布局管理器
        layout.setRowWrapPolicy(QFormLayout.RowWrapPolicy.WrapLongRows)         # 3.设置表单布局中每一列的摆放方式

        username_label = QLabel("用户名")                                        # 4.创建标签

        username_lineEdit = QLineEdit()                                         # 5.创建文本框
        username_lineEdit.setPlaceholderText("请输入用户名")

        layout.addRow(username_label, username_lineEdit)                        # 6.将标签和文本框添加到表单布局中

        password_label = QLabel("密码")
        password_lineEdit = QLineEdit()
        password_lineEdit.setPlaceholderText("请输入密码")
        password_lineEdit.setEchoMode(QLineEdit.EchoMode.PasswordEchoOnEdit)
        layout.addRow(password_label, password_lineEdit)

        button_login = QPushButton("登录")
        layout.addRow(button_login)

表单布局

五、栅格布局

  栅格布局 QGridLayout(或称为 网格布局)提供多行多列的布局位置,可以把控件或子布局放到这些布局节点上,也可以让一个控件或子布局占用多行多列的布局位置。QGridLayout 控件需要将提供给它的控件划分为行和列,并把每个控件插入到正确的单元格中。

  QGridLayout 类的常用方法如下:

# 在指定的行列位置添加控件
addWidget(widget:QWidget, row:int, column:int, alignment:Qt.Alignment=Qt.Alignment()) -> None
# 在指定的行列位置添加控件,控件可以设置成跨多行多列
addWidget(widget:QWidget, row:int, column:int, rowSpan:int, columnSpan:int, alignment:Qt.Alignment=Qt.Alignment()) -> None
# 添加子布局
addLayout(layout:QLayout, row:int, column:int, alignment:Qt.Alignment=Qt.Alignment()) -> None
# 添加子布局
addLayout(layout:QLayout, row:int, column:int, rowSpan:int, columnSpan:int, alignment:Qt.Alignment=Qt.Alignment()) -> None

rowCount() -> int                                                               # 获取行数
columnCount() -> int                                                            # 获取列数
cellRect(row:int, column:int) -> QRect                                          # 获取单元格的矩形区域

setRowStretch(row:int, stretch:int) -> None                                     # 设置行的伸缩系数
setColumnStretch(column:int, stretch:int) -> None                               # 设置列的伸缩系数
setHorizontalSpacing(spacing:int) -> None                                       # 设置水平间距
setVerticalSpacing(spacing:int) -> None                                         # 设置垂直间距
setRowMinimumHeight(row:int, minSize:int) -> None                               # 设置行的最小高度
setColumnMinimumWidth(column:int, minSize:int) -> None                          # 设置列的最小宽度

  我们修改 ui.py 文件的内容。

from PySide6.QtWidgets import QWidget
from PySide6.QtWidgets import QGridLayout
from PySide6.QtWidgets import QPushButton

class MyUi:
    def setupUi(self, window:QWidget):
        window.resize(100, 100)                                                 # 1.设置窗口对象大小

        layout = QGridLayout(window)                                            # 2.创建一个栅格布局管理器

        button_1 = QPushButton("按钮1")                                         # 3.创建按钮
        layout.addWidget(button_1, 0, 0)                                        # 4.将按钮添加到布局管理器中

        button_2 = QPushButton("按钮2")
        layout.addWidget(button_2, 0, 1)

        button_3 = QPushButton("按钮3")
        layout.addWidget(button_3, 1, 0)

        button_4 = QPushButton("按钮4")
        layout.addWidget(button_4, 1, 1)

        button_5 = QPushButton("按钮5")
        layout.addWidget(button_5, 2, 0, 1, 2)

栅格布局

六、堆栈布局

  堆叠布局 用于管理多个 QWidget 类对象,也就是多个页面,但任何时候只有一个页面可见。QStackedLayout 没有切换页面的按钮,需要另外编程处理页面切换。

  QStackedLayout 类的常用方法如下:

# 实例方法
addWidget(widget: QWidget) -> None                                              # 向布局中添加控件
insertWidget(index: int, widget: QWidget) -> int                                # 在指定索引位置插入控件,并返回实际插入的索引
widget(index: int) -> QWidget                                                   # 获取指定索引位置的控件

currentWidget() -> QWidget                                                      # 获取当前显示的控件
currentIndex() -> int                                                           # 获取当前显示的控件的索引

setStackingMode(stackingMode: QStackedLayout.StackingMode) -> None              # 设置布局的堆叠模式
stackingMode() -> QStackedLayout.StackingMode                                   # 获取布局的堆叠模式 

# 槽方法
setCurrentIndex(index: int) -> None                                             # 设置索引index所在的页面为当前页面
setCurrentWidget(widget: QWidget) -> None                                       # 设置widget为当前页面

  QStackedLayout 类的常用信号如下:

currentChanged(index: int)                                                      # 当前页面发生变化时候发射信号,index为新的索引值
widgetAdded(index: int)                                                         # 当添加新的页面时发射信号,index为新添加的页面的索引
widgetRemoved(index: int)                                                       # 当移除页面时发射信号,index为移除的页面的索引

  堆栈布局中提供了 setStackingMode(stackingMode: QStackedLayout.StackingMode) 方法 设置布局的堆叠模式,参数 stackingMode 是一个 QStackedLayout.StackingMode 类型的枚举值,可以取值如下:

QStackedLayout.StackingMode.StackOne                                            # 默认值,只有当前当前控件是可见的
QStackedLayout.StackingMode.StackAll                                            # 所有控件都可见,当前控件在顶部

  我们修改 ui.py 文件的内容。

from PySide6.QtWidgets import QWidget
from PySide6.QtWidgets import QVBoxLayout, QStackedLayout
from PySide6.QtWidgets import QLabel, QPushButton

class MyUi:
    def setupUi(self, window:QWidget):
        window.resize(300, 300)                                                 # 1.设置窗口对象大小

        self.count = 3

        vertical_layout = QVBoxLayout(window)                                   # 2.创建一个垂直布局管理器
        self.buttons = []
        for i in range(self.count):
            button = QPushButton(f"页面{i+1}")                                   # 3.创建按钮
            vertical_layout.addWidget(button)                                   # 4.将按钮添加到布局管理器中   
            self.buttons.append(button)

        self.stacked_layout = QStackedLayout()                                  # 5.创建一个堆栈布局管理器,并添加到垂直布局管理器中
        vertical_layout.addLayout(self.stacked_layout)

        for i in range(self.count):
            label = QLabel(f"页面{i+1}")                                        # 6.创建标签控件
            self.stacked_layout.addWidget(label)                                # 7.将标签添加到堆栈布局管理器中

  我们修改 widget.py 文件的内容。

import sys

from PySide6.QtWidgets import QApplication, QWidget

from ui import MyUi

class MyWidget(QWidget):
    def __init__(self):
        super().__init__()                                                      # 1.调用父类Qwidget类的__init__()方法

        self.__ui = MyUi()
        self.__ui.setupUi(self)                                                 # 2.初始化页面

        self.__ui.buttons[0].clicked.connect(self.set_page1)                    # 3.点击按钮时触发信号,调用槽函数set_page1
        self.__ui.buttons[1].clicked.connect(self.set_page2)
        self.__ui.buttons[2].clicked.connect(self.set_page3)

    def set_page1(self):
        self.__ui.stacked_layout.setCurrentIndex(0)

    def set_page2(self):
        self.__ui.stacked_layout.setCurrentIndex(1)

    def set_page3(self):
        self.__ui.stacked_layout.setCurrentIndex(2)

if __name__ == "__main__":
    app = QApplication(sys.argv)                                                # 1.创建一个QApplication类的实例
    window = MyWidget()                                                         # 2.创建一个窗口
    window.show()                                                               # 3.显示窗口  
    sys.exit(app.exec())                                                        # 4.进入程序的主循环并通过exit()函数确保主循环安全结束

堆栈布局

七、布局管理器的嵌套

  在进行用户界面设计时,很多时候只通过一种布局很难实现实现的效果,这是就需要将多种布局管理器进行混合使用,即布局管理器的嵌套。

  多种布局管理器之间可以互相嵌套,在实现布局管理器时,只需要记住以下两点原则:

  • 在一个布局文件中,最多只能有一个顶层布局管理器。如果想要使用多个布局管理器,就需要使用一个根布局管理器将它们包括起来。
  • 不能嵌套太深。如果嵌套太深,则会影响性能,主要会降低页面的加载速度。

  我们修改 ui.py 文件的内容。

from PySide6.QtWidgets import QWidget
from PySide6.QtWidgets import QHBoxLayout, QGridLayout
from PySide6.QtWidgets import QPushButton, QTextEdit

class MyUi:
    def setupUi(self, window:QWidget):
        window.resize(600, 400)                                                 # 1.设置窗口对象大小

        layout = QHBoxLayout(window)                                            # 2.创建一个水平布局管理器

        sub_layout = QGridLayout()                                              # 3.创建一个栅格布局管理器

        button1 = QPushButton("按钮1")                                          # 4.创建按钮,并添加到栅格布局中
        sub_layout.addWidget(button1, 0, 0)

        button2 = QPushButton("按钮2")
        sub_layout.addWidget(button2, 0, 1)

        button3 = QPushButton("按钮3")
        sub_layout.addWidget(button3, 1, 0, 1, 2)

        layout.addLayout(sub_layout)                                            # 5.将网格布局添加到水平布局中 

        textEdit = QTextEdit()                                                  # 6.创建文本框控件,并添加到水平布局中 
        layout.addWidget(textEdit)

嵌套布局

posted @ 2024-12-15 20:13  星光映梦  阅读(444)  评论(0)    收藏  举报