PySide2 & PyQt5 的 4种基础布局实例 Demo

一、导读

主窗口控件就像是房屋中的户型和结构，是一个图形界面程序最原始的荒地。在开辟了一个荒地之后，我们继续来了解一下图形界面中的布局。

但是咋样才能使得图形界面内的控件位置井然有序呢？下面我们就来一起看一下

对你学习有帮助的文章 记得收藏+点赞+关注额！！！

---- Nick.Peng

二、Qt For Python 常用布局方式

在图形界面编程中，常见的布局方式有以下几种：

水平布局： 布局内的控件沿水平方向排列；
垂直布局： 布局内的控件沿垂直方向排列；
网格布局： 布局按照行和列进行划分，布局内的控件分列不同的行和列中；
表单布局： 布局实现表单显示方式的布局。

下面，我们通过几个示例，来介绍一下在QT for Python中使用一些基础、常见的布局管理。

三、水平布局 QHBoxLayout

水平布局： 顾名思义就是布局内的控件，沿水平方向，从左往右进行排列。

水平布局 Demo：

# 导入布局模块 QtWidgets
from PySide2 import QtWidgets
import sys

class LayoutApp(QtWidgets.QMainWindow):
    '''
    水平布局 Demo
    '''
    def __init__(self):
        super().__init__()

        main_widget = QtWidgets.QWidget() 		# 实例化一个widget控件
        main_layout = QtWidgets.QHBoxLayout() 	# 实例化一个水平布局层
        main_widget.setLayout(main_layout) 		# 设置widget控件布局为水平布局
        # 实例化3个按钮
        button_1 = QtWidgets.QPushButton('按钮一')
        button_2 = QtWidgets.QPushButton('按钮二')
        button_3 = QtWidgets.QPushButton('按钮三')
        # 将按钮添加到水平布局中
        main_layout.addWidget(button_1)
        main_layout.addWidget(button_2)
        main_layout.addWidget(button_3)

        self.setCentralWidget(main_widget) 		# 设置窗口的中央部件

if __name__ == '__main__':
    app = QtWidgets.QApplication(sys.argv)
    gui = LayoutApp()
    gui.show()
    sys.exit(app.exec_())

在上面的示例代码中，我们创建了一个继承自主窗口类QMainWindow的对象，然后在其中实例化了一个QWidget和一个水平布局层HBoxLayout，接着创建了3个按钮控件，最后将这3个按钮控件添加到水平布局层中。
运行上述代码，我们将会得到一个如下图所示的图形界面窗口：

四、垂直布局 QVBoxLayout

垂直布局： 与水平布局，类似，但是控件是沿着垂直方向从上向下进行排列的。

垂直布局 Demo：

from PySide2 import QtWidgets
import sys

class LayoutApp(QtWidgets.QMainWindow):
    '''
    垂直布局 Demo
    '''
    def __init__(self):
        super().__init__()

        main_widget = QtWidgets.QWidget() 		# 实例化一个widget控件
        main_layout = QtWidgets.QVBoxLayout() 	# 实例化一个垂直布局层
        main_widget.setLayout(main_layout) 		# 设置widget控件布局为水平布局
        # 实例化3个按钮
        button_1 = QtWidgets.QPushButton('按钮一')
        button_2 = QtWidgets.QPushButton('按钮二')
        button_3 = QtWidgets.QPushButton('按钮三')
        # 将按钮添加到水平布局中
        main_layout.addWidget(button_1)
        main_layout.addWidget(button_2)
        main_layout.addWidget(button_3)

        self.setCentralWidget(main_widget) 		# 设置窗口的中央部件

if __name__ == '__main__':
    app = QtWidgets.QApplication(sys.argv)
    gui = LayoutApp()
    gui.show()
    sys.exit(app.exec_())

上述代码与水平布局的示例代码类似，只是将QHBoxLayout()换成了QVBoxLayout()，运行上述代码，我们将会得到如下图所示的主窗口图形界面：

五、网格布局 QGridLayout

网格布局： 与水平布局和垂直布局皆不一样，网格布局内部通过一个无形的网格来对其中的控件进行布局。
如同表格一样，网格布局里面分位行和列单元格，同时一个单元格可以占多行或者多列。

网格布局 Demo：

from PySide2 import QtWidgets
import sys

class LayoutApp(QtWidgets.QMainWindow):
    '''
    网格布局 Demo
    '''
    def __init__(self):
        super().__init__()

        main_widget = QtWidgets.QWidget() 			# 实例化一个widget控件
        main_layout = QtWidgets.QGridLayout() 		# 实例化一个垂直布局层
        main_widget.setLayout(main_layout) 			# 设置widget控件布局为水平布局
        # 实例化3个按钮
        button_1 = QtWidgets.QPushButton('按钮一')
        button_2 = QtWidgets.QPushButton('按钮二')
        button_3 = QtWidgets.QPushButton('按钮三')
        # 将按钮添加到水平布局中
        main_layout.addWidget(button_1,1,1,1,2) 	# 添加到第1行第1列，占1行占2列
        main_layout.addWidget(button_2,2,1,1,1) 	# 添加到第2行第1列，占1行占1列
        main_layout.addWidget(button_3,3,2,1,1) 	# 添加到第3行第2列，占1行占1列

        self.setCentralWidget(main_widget) 			# 设置窗口的中央部件

if __name__ == '__main__':
    app = QtWidgets.QApplication(sys.argv)
    gui = LayoutApp()
    gui.show()
    sys.exit(app.exec_())

在上面的代码中，我们将按钮添加到网格不同的行列中，运行上述代码，可以得到如下图所示的主窗口图形界面：

六、表单布局 QFormLayout

表单布局： 即以表单的形式进行布局。那么表单的形式是什么形式呢，就像普通HTML表单都有一个文本标签和一个输入框；

表单布局 Demo：

from PySide2 import QtWidgets
import sys

class LayoutApp(QtWidgets.QMainWindow):
    '''
    表单布局 Demo
    '''
    def __init__(self):
        super().__init__()

        main_widget = QtWidgets.QWidget() 			# 实例化一个widget控件
        main_layout = QtWidgets.QFormLayout() 		# 实例化一个垂直布局层
        main_widget.setLayout(main_layout) 			# 设置widget控件布局为水平布局
        # 实例化3个按钮
        button_1 = QtWidgets.QLabel('按钮一')
        button_2 = QtWidgets.QPushButton('按钮二')
        button_3 = QtWidgets.QPushButton('按钮三')
        button_4 = QtWidgets.QPushButton('按钮四')
        # 将按钮添加到水平布局中
        main_layout.addRow(button_1,button_2)
        main_layout.addRow(button_3)
        main_layout.addWidget(button_4)

        self.setCentralWidget(main_widget) 			# 设置窗口的中央部件

if __name__ == '__main__':
    app = QtWidgets.QApplication(sys.argv)
    gui = LayoutApp()
    gui.show()
    sys.exit(app.exec_())

在上面的代码中，我们使用了两个方法三种方式向表单布局层中添加控件，分别是：
方式一： addRow(控件一、控件二)
方式二： addRow(控件一)
方式三： addWidget(控件一)
运行上述代码，我们可以得到如下图所示的主窗口图形界面：
上图小结：
- 带两个参数的addRow()方法，会将第一个参数控件作为表单的标签进行布局，将第一个参数控件作为表单的输入控件进行布局；
- 带一个参数的addRow()方法会将控件直接铺满一行；带一个参数的addWidget()方法则会留空表单标签的位置。