主要内容 #

1. QGridLayout介绍

完成效果 #

完成本节课程，能学会使用QGridLayout类创建一个栅格布局（网格布局）。

收获 #

学习完本节内容，我们会了解如何使用栅格管理器，以及如何给指定位置添加控件，包括跨越多行多列的控件。

1.QGridLayout介绍 #

最常用的还是栅格布局了。这种布局是把窗口分为行和列。创建和使用栅格布局，需要使用QGridLayout模块。
栅格布局是这样工作的：它计算了位于其中的空间，然后将它们合理的划分成若干个行（row）和列（column），并把每个由它管理的窗口部件放置在合适的单元之中，
这里所指的单元（cell）即是指由行和列交叉所划分出来的空间。坐标分布是这样的：

通常可以使用函数addWidget()或者addLayout()来将被管理的widget或者layout添加到窗格中。
也可以通过重载的函数addWidget()或者addLayout()的行和列跨度实现占据多个窗格。
以下就是栅格布局的应用：

import sys
from PyQt5.QtWidgets import QWidget, QGridLayout, QPushButton, QApplication, QLabel, QLineEdit, QTextEdit


class Example(QWidget):
    def __init__(self):
        super().__init__()
        self.initUI()


    def initUI(self):
        grid = QGridLayout()  # 创建一个QGridLayout实例
        self.setLayout(grid)  # 把它放到程序窗口里

        names = ['Cls', 'Bck', '', 'Close','7', '8', '9', '/',
                '4', '5', '6', '*', '1', '2', '3', '-', '0', '.', '=', '+']  # 这是我们将要使用的按钮的名称。
        positions = [(i,j) for i in range(5) for j in range(4)]  # 创建按钮位置列表, 列表的每个元素是一个元组，该元组储存按钮的位置。
        for position, name in zip(positions, names):
            if name == '':  # 如果按钮名称为空字符串，则不创建按钮，直接进入下一次循环
                continue  # continue语句用来跳出本次循环，然后继续下一轮循环
            button = QPushButton(name)  # 创建按钮
            # addWidget()方法的前五个参数常用，依次为：1. 要添加的控件 2. 控件放置位置的行数 3. 控件放置位置的列数
            # 4. 控件跨越的行数 5. 控件跨越的列数， 其中4和5仅当控件需要跨越多行或者多列时传入
            # *position是对元组进行解包，把坐标(x,y)拆为两个参数x,y
            grid.addWidget(button, *position)  # 使用addWidget()方法把按钮放到布局里面

        # 创建三个QLabel
        title = QLabel('Title', self)
        author = QLabel('Author', self)
        review = QLabel('Review', self)
        # 创建两个QLineEdit
        titleEdit = QLineEdit(self)
        authorEdit = QLineEdit(self)
        reviewEdit = QTextEdit(self)  # 创建一个QTextEdit

        grid.setSpacing(10)  # 设置控件间在水平和垂直方向的间距，单位为像素
        grid.addWidget(title, 5, 0)  # 把标签放在QGridLayout布局的第5行第0列
        grid.addWidget(titleEdit, 5, 1, 1, 3)  # 把QLineEdit放在QGridLayout布局的第5行第1列，跨越1行3列

        grid.addWidget(author, 6, 0)  # 把标签放在QGridLayout布局的第6行第0列
        grid.addWidget(authorEdit, 6, 1, 1, 3)  # 把QLineEdit放在QGridLayout布局的第6行第1列，跨越1行3列

        grid.addWidget(review, 7, 0)  # 把标签放在QGridLayout布局的第7行第0列
        grid.addWidget(reviewEdit, 7, 1, 2, 3)  # 把QTextEdit放在QGridLayout布局的第7行第1列，跨越2行3列

        self.move(300, 300)
        self.setWindowTitle('Calculator')
        self.show()
    
    
app = QApplication(sys.argv)    # 创建应用程序
ex = Example()  # 创建窗口对象
sys.exit(app.exec_())   # 设置关闭窗口后结束进程

拓展练习：尝试将控件间的间距修改为30，即grid.setSpacing(30)。

小结 #

习题 #

1. 习题1：尝试将titleEdit设置为跨越2行3列。
2. 习题2：尝试将reviewEdit设置为跨越2行1列。