PyQt5学习笔记03 - Qt Designer界面设计器

我们在制作 UI 界面的时候，一般可以通过UI制作工具和纯代码编写两种方式来实现。在 PyQt5 中，也可以采用这两种方式。在 PyQt5 中我们使用 Qt Designer 工具来制作 UI 界面。

?? Qt Designer 可以通过拖拽的方式完成复杂的界面设计，而且还可以随时预览查看效果。它生成的 UI 界面是一个后缀为.ui的文件，其实就是一个 XML 格式的文本文件。通过使用 pyuic5 命令将.ui文件转换为.py文件，然后将.py文件引入到自定义的 Python 代码中。下面我们来介绍一下 Qt Designer 的简单使用。

新建主窗口

新建窗口

模板选择 Main Window , 创建一个主窗口，主窗口默认添加了菜单栏、状态栏。

选择模板

在创建好的主窗口中可以看到，主窗体、菜单栏、状态栏、centralwidget

区域1是工具箱，其中提供了很多控件，可以直接拖放到主窗口中
区域2是主窗口区，用于进行界面布局。

区域3是对象查看区，可以查看主窗口中放置的控件列表。
区域4是属性编辑器，可以在此对控件属性进行设置。

• objectName: 控件对象名称，类似于身份ID，在一个窗体中不能重复。
• geometry: 相对坐标系。设置控件的 (x, y, width, height) 坐标位置。
• sizePolicy: 控件大小策略。
• minimumSize: 最小宽度、高度。
• maximumSize: 最大宽度、高度。如果想让窗口或者控件的大小固定，就把最小最大属性设置成一样的。
• font: 字体。
• cursor: 鼠标光标。
• windowTitle: 窗口标题。
• windowIcon / icon: 窗口图标、控件图标。
• iconSize: 图标大小。
• text: 控件文字。
• toolTip: 提示信息。
• statusTip: 任务栏提示信息。鼠标移入到控件上，在状态栏显示的信息。
• shortcut: 快捷键。

区域5是信号槽与动作编辑器。在信号槽中可以为控件添加信号和槽函数。不过我在Mac上使用的 Qt Designer 功能感觉没有那么强大，更可能得原因是我比较菜，没有发现它的强大之处。我并不会在编辑器里面去设置信号，最多是看一下哪个控件有什么信号可用。

说到这里必须得推荐两款软件：Dash和Zeal，前者是在Mac下使用的，后者是在Windows和Linux下使用的，非常好的离线文档阅读器。这两个软件我都用过，Dash当然是棒极了，谁用谁知道。当然 PyQt5 的离线文档是没有，不过有 Qt5 的离线文档。我们知道 PyQt5 是 Qt5 的 Python 版，所以大部分函数属性都是一样的。

在使用的过程中，有时候我们拖动一个控件上去，等布局好了以后，又想把它换成其他类型的控件。一种方式是在对象编辑区，通过变型把控件更改为其他控件。

但是这种是有限制的，继承自同样父类的控件才能相互转换。如果是不同类的控件呢？我们知道.ui文件是一个XML文件，这个文件里面是什么样子的呢？

上面是编辑器里面设置的控件位置。

.ui文件中的geometry属性与编辑器里的一样。而且我们看到上面的class和name属性，如果要改变控件类型，就修改class为指定控件的类名即可，这种方式，我们可以修改为任意类型的控件。但是要注意不同的控件有不同的属性，如果是特殊属性的，修改为其他控件后，就会消失。

保存了.ui以后，就可以使用 pyuic5 命令将其转换为.py文件。由于这个文件是用.ui生成的，可以称其为界面文件。因为每次使用.ui文件生成是都会初始化.py文件，所以我们需要创建一个新的py文件作为逻辑处理文件，将界面和逻辑分离开来。

界面文件：mainwindow.py

from PyQt5 import QtCore, QtGui, QtWidgets


class Ui_MainWindow(object):
    def setupUi(self, MainWindow):
        MainWindow.setObjectName("MainWindow")
        MainWindow.resize(800, 600)
        self.centralwidget = QtWidgets.QWidget(MainWindow)
        self.centralwidget.setObjectName("centralwidget")
        self.pushButton = QtWidgets.QPushButton(self.centralwidget)
        self.pushButton.setGeometry(QtCore.QRect(150, 80, 113, 32))
        self.pushButton.setObjectName("pushButton")
        self.pushButton_2 = QtWidgets.QPushButton(self.centralwidget)
        self.pushButton_2.setGeometry(QtCore.QRect(150, 140, 113, 32))
        self.pushButton_2.setObjectName("pushButton_2")
        self.pushButton_3 = QtWidgets.QPushButton(self.centralwidget)
        self.pushButton_3.setGeometry(QtCore.QRect(150, 200, 113, 32))
        self.pushButton_3.setObjectName("pushButton_3")
        MainWindow.setCentralWidget(self.centralwidget)
        self.menubar = QtWidgets.QMenuBar(MainWindow)
        self.menubar.setGeometry(QtCore.QRect(0, 0, 800, 22))
        self.menubar.setObjectName("menubar")
        MainWindow.setMenuBar(self.menubar)
        self.statusbar = QtWidgets.QStatusBar(MainWindow)
        self.statusbar.setObjectName("statusbar")
        MainWindow.setStatusBar(self.statusbar)

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

    def retranslateUi(self, MainWindow):
        _translate = QtCore.QCoreApplication.translate
        MainWindow.setWindowTitle(_translate("MainWindow", "MainWindow"))
        self.pushButton.setText(_translate("MainWindow", "PushButton"))
        self.pushButton_2.setText(_translate("MainWindow", "PushButton"))
        self.pushButton_3.setText(_translate("MainWindow", "PushButton"))

逻辑文件：main_window.py

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

import sys
from PyQt5.QtWidgets import QMainWindow, QApplication
from mainwindow import Ui_MainWindow

class MainUI(Ui_MainWindow, QMainWindow):
    def __init__(self, parent=None):
        super(MainUI, self).__init__(parent)
        self.registerEvent()

    def registerEvent(self):
        self.pushButton.clicked.connect(self.on_btn_click)

    def on_btn_click(self):
        print("点击按钮")

if __name__ == "__main__":
    app = QApplication(sys.argv)
    main = MainUI()
    main.show()
    sys.exec(app.exec_())

采用这种方式实现界面和逻辑的分离，以后想要更新界面，只需要对.ui文件进行更新，然后编译成.py文件就行了。