pyQT5 学习使用 笔记 三 Qt Designer的使用_pyqt5 打开 qt designer

总所周知Qt 有一个 Qt Designer 工具来快速开发 Qt的UI 界面，那么 在python 里面可以使用 Qt Designer吗  在前文中我们看到窗口都是 靠代码一点点敲出来的 这势必会增加程序开发的 难度。所以 Qt Designer 是一个必要的工具，所以 python 中肯定也是有集成的，下面 我们就来学习如何在 python中 使用Qt Designer 工具。

首先需要 安装 PyQt5-tools 工具包。

在cmd命令行中 键入 pip install -i https://mirrors.aliyun.com/pypi/simple/  pyqt5-tools 回车， 等待安装完成。

然后我们在PyCharm中配置 Qt designer 工具

打开PyCharm，选择Settings -> Tools -> External Tools，点击左上角的加号。

在Name栏里 填写 QtDesigner ,  在 Program一栏里填写 我们安装的 python 安装目录下Scripts文件夹下面的designer.exe

在Working directory 填写我们的工作目录

然后添加PyUIC（UI转换工具），PyUIC的Program为Python.exe，在Python的安装目录下，Working directory同理设为我们的工作目录，Arguments则填入如下代码：

-m PyQt5.uic.pyuic  $FileName$ -o $FileNameWithoutExtension$.py

最后添加pyrcc用于PyQt5的资源文件转码。具体配置与上述内容相同，Arguments填入：

$FileName$ -o $FileNameWithoutExtension$_rc.py

点击QtDesigner则打开QtDesigner的界面。

Qt Designer界面简介

刚打开Qt Designer，则弹出如下图所示的窗口。

创建新的Form给出了5个模板，其中Widget与Main Window最为常用。这里我们选择创建一个Main Window。

如何使用 qtDesigner  这里就不再 详细描述了。本文主要目的是介绍如何 在 PyCharm 中 使用 pyqt5 tools

Qt Designer的UI文件

使用Qt Designer设计保存的文件为.ui格式的文件。
通过保存并使用记事本等软件打开，我们可以看到.ui文件的内容如下：

<?xml version="1.0" encoding="UTF-8"?>
<ui version="4.0">
 <class>MainWindow</class>
 <widget class="QMainWindow" name="MainWindow">
  <property name="geometry">
   <rect>
    <x>0</x>
    <y>0</y>
    <width>800</width>
    <height>600</height>
   </rect>
  </property>
  <property name="windowTitle">
   <string>MainWindow</string>
  </property>
  <widget class="QWidget" name="centralwidget">
   <widget class="QLabel" name="label">
    <property name="geometry">
     <rect>
      <x>240</x>
      <y>80</y>
      <width>72</width>
      <height>15</height>
     </rect>
    </property>
    <property name="text">
     <string>TextLabel</string>
    </property>
   </widget>
   <widget class="QPushButton" name="pushButton">
    <property name="geometry">
     <rect>
      <x>240</x>
      <y>120</y>
      <width>93</width>
      <height>28</height>
     </rect>
    </property>
    <property name="text">
     <string>PushButton</string>
    </property>
   </widget>
  </widget>
  <widget class="QMenuBar" name="menubar">
   <property name="geometry">
    <rect>
     <x>0</x>
     <y>0</y>
     <width>800</width>
     <height>26</height>
    </rect>
   </property>
  </widget>
  <widget class="QStatusBar" name="statusbar"/>
 </widget>
 <resources/>
 <connections/>
</ui>

从.ui文件的第一行我们便能看出，其实质是一个XML文件。ui文件中存放了在主窗口中的一切控件的相关属性。使用XML文件来存储UI文件，具有高可读性和移植性，因此我们可以方便地将.ui文件转换到.py文件，从而使得我们可以使用Python语言在设计的GUI上面编程。

将.ui文件转换为.py文件

将.ui文件转换到.py文件很简单，在前面我们曾设置了pyuic5这个工具。如果你没有在PyCharm中设置这个工具，或者根本没有使用PyCharm，则可以到命令行中使用如下命令实现.ui到.py的转换。

pyuic5 - o 目标文件名.py 源文件名.ui

或者直接在PyCharm中，找到.ui文件，右键 打开菜单找到External Tools->PyUIC。点击之后，我们在相应工程目录下会产生一个.py文件。（注意，.ui文件必须存放在我们的External Tools中设置的相应项目目录下）

转换完成之后，打开.py文件。

# -*- coding: utf-8 -*-
 
# Form implementation generated from reading ui file 'mainWindow.ui'
#
# Created by: PyQt5 UI code generator 5.15.0
#
# 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(773, 600)
        self.centralwidget = QtWidgets.QWidget(MainWindow)
        self.centralwidget.setObjectName("centralwidget")
        MainWindow.setCentralWidget(self.centralwidget)
        self.menubar = QtWidgets.QMenuBar(MainWindow)
        self.menubar.setGeometry(QtCore.QRect(0, 0, 773, 23))
        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"))

观察上述文件，可以看到如果不通过Qt Designer来制作界面的话，我们将会一次次地调试程序，来讲按钮和Label等放在合适的位置，这将是极其痛苦的过程。而通过Qt Designer，我们可以快速地制作UI，并生成Python的代码，从而实现快速地UI的开发。

使用转换的.py文件

然而，此时之间运行这个转换好的Python文件是无法显示任何窗口的。因为这个Python文件只有定义主窗口以及其控件的代码，并没有程序入口的代码。为了秉持视图与逻辑分离的原则，我们再编写一个新的脚本来调用这个文件，并且创建一个窗口。

import sys
from PyQt5.QtWidgets import QApplication, QMainWindow
from mainWindow import *
 
 
class MyWindow(QMainWindow, Ui_MainWindow):
    def __init__(self, parent=None):
        super(MyWindow, self).__init__(parent)
        self.setupUi(self)
 
 
if __name__ == '__main__':
    app = QApplication(sys.argv)
    myWin = MyWindow()
    myWin.show()
    sys.exit(app.exec_())

通过上述代码，我们继承了Ui_MainWindow类，使用其构造方法构造主窗口，并定义了程序的入口，通过创建QApplication对象来创建Qt窗口。其运行结果如下：

通过上述操作，我们熟悉了Qt Designer设计界面，到实现业务逻辑的大致工作流程。通过这个工作流程可以简化工作，实现速度的提升。
通过对视图与业务逻辑的分离，在每次更改Qt Designer的UI设计的时候，也不用重新编写代码，而只需对更改的部分做稍微的修改即可。