二、PyQt5 之 界面设计（布局、尺寸、控件关系，信号与槽、添加菜单与工具栏）

一、Qt的布局

Vertical Layout: 　　垂直布局
Horizontal Layout:    水平布局
Grid Layout:             网格布局
Form Layout:           表单布局
Containers:              容器

 

 

 

二、水平布局

2.1 方式一

2.1.1 设置方式

将我们需要的进行水平布局的组件依次拖入到 Mainwindow中， 尽量保持在一条水平线上

2.1.2 预览效果

2.2 方式二

先从左侧选中水平布局，之后依次往水平布局中添加需要的组件

2.3 调用生成的代码

import sys
import Horizontal_Layout
from PyQt5.QtWidgets import QApplication, QMainWindow

if __name__ == '__main__':
    # 创建一个QApplication类的实例
    app = QApplication(sys.argv)  # sys.argv 是用来获取命令行参数
    # 创建主窗口
    mainWindow = QMainWindow()
    # 调用生成的界面的python文件
    ui = Horizontal_Layout.Ui_MainWindow()
    # 向主窗口中添加控件
    ui.setupUi(mainWindow)
    # 显示窗口
    mainWindow.show()
    sys.exit(app.exec_())

 

 

 

调用生成的界面与Qt中预览的界面是一样的。

三、垂直布局

3.1 普通的垂直布局

3.2 水平-垂直布局

对需要在水平出现的组件进行水平布局，而对要在垂直出现的组件先实现垂直布局，最后将前一步组织的作为整体加入到第二次水平/垂直布局中。

四、栅格布局

栅格布局是将一定对应的组件，按照特定的二维格式进行合并，以使用栅格布局搭建计算器数字按键区为例来展示栅格布局的结构。
同时，下图的栅格布局还可以继续添加行列那样的按钮之类的组件。

五、表单布局

表单布局是在实际中应用十分广泛的一种布局方式，我们在登录时候输入账号密码的时候就是表单布局。

注意:在选择布局中是 在窗体布局中布局，没有表单布局这个选项。 如果直接先脱宅表单布局另当别论，先选择组件再设计布局的时候要注意

六、容器布局

七、绝对布局

从组件库中直接拖拽过来的就是绝对布局，通过右侧参数来修改大小宽度位置等信息

八、分割线与间隔

8.1 间隔

 

 

 

 

8.2 分割线

九、控件尺寸

9.1 空间尺寸的最大值和最小值

9.2 尺寸策略（sozepolicy）

9.2.1 读取期望尺寸

# sizeHint() 期望尺寸
# 读取 button 的期望尺寸 宽度和高度
print(self.pushButton.sizeHint().width())
print(self.pushButton.sizeHint().height())

9.2.2 控制尺寸策略

 

 

 

 

十、设置空间之间的伙伴关系

可以通过一个控件的设置和状态来改变另一个控件的状态。

10.1 伙伴关系创建

1. 创建表单组件，并添加内容（以表单组件为例），在标签的内容后加括号（&+对应键位）表示该标签对应的热键为 alt + 对应键位。
2. 工具栏 Edit --> 编辑伙伴
3. 依次从左往右拖动鼠标，将 label 标签与 Line edit标签绑定,即出现连接的箭头
4. 工具栏 Edit --> 编辑窗口组件
5. 保存生成 .ui 文件，并生成对应的 .py 文件， 再继续调用这个 .py 文件
6. 出现的界面中，标签后面的 & 不见了， 然后输入 alt + A/B/C会依次鼠标调用到 后面对应的 Line edit组件中。

 

 

 

 

 

10.2 代码展示

# -*- coding: utf-8 -*-

# Form implementation generated from reading ui file 'Horizontal_Layout.ui'
#
# Created by: PyQt5 UI code generator 5.15.4
#
# WARNING: Any manual changes made to this file will be lost when pyuic5 is
# run again.  Do not edit this file unless you know what you are doing.


from PyQt5 import QtCore, QtGui, QtWidgets


class Ui_MainWindow(object):
    def setupUi(self, MainWindow):
        MainWindow.setObjectName("MainWindow")
        MainWindow.resize(995, 855)
        sizePolicy = QtWidgets.QSizePolicy(QtWidgets.QSizePolicy.Expanding, QtWidgets.QSizePolicy.Preferred)
        sizePolicy.setHorizontalStretch(2)
        sizePolicy.setVerticalStretch(0)
        sizePolicy.setHeightForWidth(MainWindow.sizePolicy().hasHeightForWidth())
        MainWindow.setSizePolicy(sizePolicy)
        self.centralwidget = QtWidgets.QWidget(MainWindow)
        self.centralwidget.setObjectName("centralwidget")
        self.formLayoutWidget = QtWidgets.QWidget(self.centralwidget)
        self.formLayoutWidget.setGeometry(QtCore.QRect(210, 200, 491, 151))
        self.formLayoutWidget.setObjectName("formLayoutWidget")
        self.formLayout = QtWidgets.QFormLayout(self.formLayoutWidget)
        self.formLayout.setContentsMargins(0, 0, 0, 0)
        self.formLayout.setObjectName("formLayout")
        self.lineEdit = QtWidgets.QLineEdit(self.formLayoutWidget)
        self.lineEdit.setObjectName("lineEdit")
        self.formLayout.setWidget(0, QtWidgets.QFormLayout.FieldRole, self.lineEdit)
        self.label_2 = QtWidgets.QLabel(self.formLayoutWidget)
        self.label_2.setObjectName("label_2")
        self.formLayout.setWidget(1, QtWidgets.QFormLayout.LabelRole, self.label_2)
        self.lineEdit_2 = QtWidgets.QLineEdit(self.formLayoutWidget)
        self.lineEdit_2.setObjectName("lineEdit_2")
        self.formLayout.setWidget(1, QtWidgets.QFormLayout.FieldRole, self.lineEdit_2)
        self.label_3 = QtWidgets.QLabel(self.formLayoutWidget)
        self.label_3.setObjectName("label_3")
        self.formLayout.setWidget(2, QtWidgets.QFormLayout.LabelRole, self.label_3)
        self.lineEdit_3 = QtWidgets.QLineEdit(self.formLayoutWidget)
        self.lineEdit_3.setObjectName("lineEdit_3")
        self.formLayout.setWidget(2, QtWidgets.QFormLayout.FieldRole, self.lineEdit_3)
        self.label = QtWidgets.QLabel(self.formLayoutWidget)
        self.label.setObjectName("label")
        self.formLayout.setWidget(0, QtWidgets.QFormLayout.LabelRole, self.label)
        MainWindow.setCentralWidget(self.centralwidget)
        self.menubar = QtWidgets.QMenuBar(MainWindow)
        self.menubar.setGeometry(QtCore.QRect(0, 0, 995, 26))
        self.menubar.setObjectName("menubar")
        MainWindow.setMenuBar(self.menubar)
        self.statusbar = QtWidgets.QStatusBar(MainWindow)
        self.statusbar.setObjectName("statusbar")
        MainWindow.setStatusBar(self.statusbar)
        self.label_2.setBuddy(self.lineEdit_2)
        self.label_3.setBuddy(self.lineEdit_3)
        self.label.setBuddy(self.lineEdit)

        self.retranslateUi(MainWindow)
        QtCore.QMetaObject.connectSlotsByName(MainWindow)

    def retranslateUi(self, MainWindow):
        _translate = QtCore.QCoreApplication.translate
        MainWindow.setWindowTitle(_translate("MainWindow", "MainWindow"))
        self.label_2.setText(_translate("MainWindow", "年龄(&B):"))
        self.label_3.setText(_translate("MainWindow", "职位(&C):"))
        self.label.setText(_translate("MainWindow", "姓名(&A)："))

        
# setBuddy() 函数表示建立伙伴

十一、修改控件的Tab顺序

在表单中，默认填写完一个输入框后，按下tab键会自动将焦点移动至下一个输入框中。

 

 

在主界面中随机创建 一些 Line edit组件和 Combo Box组件，当预览的时候，鼠标会默认聚焦在第一个我们创建的组件中等待输入。使用 Tab 会根据我们创建的顺序来依次跳转。

 

修改 Tab 的顺序:

1. 工具栏 Edit --> 编辑 Tab 顺序。
2. 然后依次点击想要更改后的标签顺序，如下图。
3. 工具栏 Edit --> 编辑窗口组件
4. 再次预览的时候，使用 Tab就会按照我们设置的顺序来。

 

十二、信号与槽（Qt、PyQt的核心机制）

12.1 什么是信号与槽

信号: 是由对象或控件发射出去的消息。

　　比如：按钮的单击事件，当单击按钮时，按钮就会向外部发送单击的消息，这些发送出去的信号需要一些代码来拦截，这些代码就是槽。

槽：本质上是一个函数或方法。

信号可以理解为事件；槽可以理解为事件函数。
需要将信号和槽绑定：一个信号可以和多个槽绑定， 一个槽可以拦截多个信号。
绑定的过程可以在可视化界面完成，也可以在代码中实现(后面介绍)。

12.2 绑定信号与槽

12.2.1 button组件的绑定

1. 添加button组件
2. 工具栏 Edit --> 编辑信号/槽
3. 拖动组件产生 "接地" 符号
4. 选中需要的函数（方法）
5. 保存 OK
6. 工具栏 Edit --> 编辑窗口部件
7. 预览
8. 点击组件，预览消失

 

 

 

12.2.2 Check Box 组件的绑定

 

 

 

 

十三、为窗口添加菜单和工具栏

13.1 页面布局显示

13.2 添加菜单栏

 

 

 

13.3 添加工具栏