Python界面 PyQT可视化开发（python3+PyQt5+Qt Designer）

Bertha 。 2023-01-23 07:51 34阅读 0赞

## 前言 ##

以前制作一个**Python窗体界面**，我都是用GUI窗口视窗设计的模块Tkinter一点一点敲出来的，今天朋友问我有没有Python窗体的设计工具，“**用鼠标拖拖**”就能完成窗体设计，我查了查相关资料，果然有一款好用的工具——**Qt Designer**。

--------------------

## 1.安装**Qt Designer** ##

这里需要安装两个东西：**PyQt5**和**PyQt5-tools**：

*  **安装PyQt5**：打开CMD或者PowerShell，在命令窗中输入
    
        pip install -i https://pypi.douban.com/simple/ --trusted-host=pypi.douban.com/simple PyQt5
    
    执行结果如下：
    
    ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2tkb25neWk_size_16_color_FFFFFF_t_70][]

*  **安装PyQt5-tools：**打开CMD或者PowerShell，在命令窗中输入
    
        pip install -i https://pypi.douban.com/simple/ --trusted-host=pypi.douban.com/simple PyQt5-tools
    
    执行结果如下：![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2tkb25neWk_size_16_color_FFFFFF_t_70 1][]

## 2.配置开发工具 ##

安装完**Qt Designer**后，我们利用PyCharm进行界面开发，下面进行Qt开发工具的配置。

在PyCharm中依次打开：File→Settings 弹出Settings对话框，如下图

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2tkb25neWk_size_16_color_FFFFFF_t_70 2][]

然后按下图的4个步骤，打开Create Tools对话窗：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2tkb25neWk_size_16_color_FFFFFF_t_70 3][]

这里需要**配置两个**：

**（1）配置QTDesigner，用来打开QT可视化开发工具**

如下图，分别在**Name**、**Program**、**Working dirctory**填入如下信息：

*  **Name：QTDesigner**
 *  **Program：D:\\Anaconda3\\Library\\bin\\designer.exe**  
     **注意**：该路径为你Python安装路径下**Lib\\site-packages\\pyqt5\_tools文件夹里**
 *  **Working dirctory：$FileDir$**
    
    ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2tkb25neWk_size_16_color_FFFFFF_t_70 4][]

**（2）配置PyUIC****，用来将Qt Designer开发工具生成的.ui文件转换为.py文件**

如下图，分别在**Name、Program、Arguments、Working dirctory**填入如下信息：

*  **Name：PyUIC**
 *  **Program：D:\\Anaconda3\\Scripts\\pyuic5.exe**  
     **注意**：该路径为你Python安装路径下**Scripts文件夹里**
 *  **Arguments：$FileName$ -o $FileNameWithoutExtension$.py**
 *  **Working dirctory：$FileDir$**
    
    ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2tkb25neWk_size_16_color_FFFFFF_t_70 5][]
    
    至此，安装和配置过程全部结束，下面介绍简单的使用教程。

--------------------

## 3.使用Qt Designer设计界面 ##

*  在PyCharm中创建一个项目，然后点击“Tools”--“External Tools”--“QTDesinger”打开QT Desinger，如下图：

![20191117221114678.png][]

*  在**New Form对话框**里选择**Widget**模板，然后点击创建：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2tkb25neWk_size_16_color_FFFFFF_t_70 6][]

*  然后就会出现Qt Designer主界面，向Form中分别拖入一个“Push Button”和一个“Text Edit”，如下图：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2tkb25neWk_size_16_color_FFFFFF_t_70 7][]

*  **指定点击事件及其响应函数**  
    在**工具栏**点击 这个图标 ![20191117221753300.png][] ，然后光标移动到**“PushButton”按钮**上，**鼠标左键** 点击 **“PushButton”按钮** 不要松开，拖动光标 到 按钮旁边的任一位置后 再**松开鼠标左键**
    
    ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2tkb25neWk_size_16_color_FFFFFF_t_70 8][]
 *  随后就出现了如下界面，在对话框**左侧选中**“**clicked()**”，**右侧**点击“**Edit**”
    
    ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2tkb25neWk_size_16_color_FFFFFF_t_70 9][]
 *  然后**点击**绿色**“+”按钮**，指定click事件的响应函数，名称随意，比如我这里命名为“pushButton\_click()”  
    （我们这里只是指定事件与响应函数的关联关系，函数是还没实现的，后边我们自行实现）

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2tkb25neWk_size_16_color_FFFFFF_t_70 10][]![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2tkb25neWk_size_16_color_FFFFFF_t_70 11][]

*  最后，将设计的界面保存。

## 4.使用PyUIC将文件转成python代码 ##

关闭QT Designer回到PyCharm，查看项目，可以看到只有刚才保存的PyQT\_Form.ui文件而且该文件在PyCharm是打不开的，我们需要将这个文件转成.py代码才能使用。

![format_png][]

*  选中“**PyQT\_Form**”，在其上点击鼠标**右键**，到“**External Tools**”中点击“**PyUIC**”

![format_png 1][]

*  之后再看项目文件，就可以看到多了一个“PyQT\_Form.py”，双击查看其内容如下：

![format_png 2][]

## 5.编写逻辑代码 ##

**界面与业务逻辑分离实现：**这一步主要实现业务逻辑，也就是点击登录和退出按钮后程序要执行的操作。为了后续维护方便，采用界面与业务逻辑相分离来实现。也就是通过创建主程序调用界面文件方式实现。这有2个好处：**1.就是实现逻辑清晰**。**2.后续**如果界面或者逻辑需要变更，**好维护**。**新建一个.py文件程序**，在里边**创建一个子类**（MyPyQT\_Form）**继承PyQT\_Form.py中的Ui\_Form**。具体**代码如下**：

import sys
    from PyQt5 import QtWidgets
    from PyQT_Form import Ui_Form
    
    class MyPyQT_Form(QtWidgets.QWidget,Ui_Form):
        def __init__(self):
            super(MyPyQT_Form,self).__init__()
            self.setupUi(self)
    
        #实现pushButton_click()函数，textEdit是我们放上去的文本框的id
        def pushButton_click(self):
            self.textEdit.setText("你点击了按钮")
    
    
    if __name__ == '__main__':
        app = QtWidgets.QApplication(sys.argv)
        my_pyqt_form = MyPyQT_Form()
        my_pyqt_form.show()
        sys.exit(app.exec_())

## 6.运行 ##

至此，我们终于完成了第一个Python界面的设计，好累 (￣o￣) . z Z ，运行效果如下：

![format_png 3][]![format_png 4][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2tkb25neWk_size_16_color_FFFFFF_t_70]: /images/20221004/6eae7d55b3414992ae6e25aaf996c789.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2tkb25neWk_size_16_color_FFFFFF_t_70 1]: /images/20221004/6d701f00863c45b5975ecbfc53f86d5b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2tkb25neWk_size_16_color_FFFFFF_t_70 2]: /images/20221004/510ee3f4bcc74f2ca79819f39e6174ff.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2tkb25neWk_size_16_color_FFFFFF_t_70 3]: /images/20221004/06a8b98d65334af69b02ea5f253be322.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2tkb25neWk_size_16_color_FFFFFF_t_70 4]: /images/20221004/44b7155607e2491294c8890553741b60.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2tkb25neWk_size_16_color_FFFFFF_t_70 5]: /images/20221004/34db1f81ee214094bdebdf2f4dbd8b21.png
[20191117221114678.png]: /images/20221004/35ac4bb1c1d145d58004ec1791acef7e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2tkb25neWk_size_16_color_FFFFFF_t_70 6]: /images/20221004/dfc0fac50b3042f0a0d9a868a44f6a8b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2tkb25neWk_size_16_color_FFFFFF_t_70 7]: /images/20221004/ac15e64e7e274c04a2d96e32de312650.png
[20191117221753300.png]: /images/20221004/405aae32825f48d98b6763d6e176cbe4.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2tkb25neWk_size_16_color_FFFFFF_t_70 8]: /images/20221004/0c9e62ed86174e278d8710eb80b2cc22.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2tkb25neWk_size_16_color_FFFFFF_t_70 9]: /images/20221004/0f479e2fb47248d8981bd4cd7547ef2a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2tkb25neWk_size_16_color_FFFFFF_t_70 10]: https://img-blog.csdnimg.cn/20191117222711334.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2tkb25neWk=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2tkb25neWk_size_16_color_FFFFFF_t_70 11]: /images/20221004/87b02abadb554e85b7a278bcaa8481e8.png
[format_png]: /images/20221004/27294747a44e460ebfd07fc2ec7b44dd.png
[format_png 1]: /images/20221004/f630d620dbda4c9a827bf67243f563cc.png
[format_png 2]: /images/20221004/da9d7a6a5c99467d96c9b2153cc4f60e.png
[format_png 3]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9pbWFnZXMyMDE4LmNuYmxvZ3MuY29tL2Jsb2cvMTExNjcyMi8yMDE4MDYvMTExNjcyMi0yMDE4MDYwMTE2NDcwNzYwNy01NDU5NzU5MTEucG5n?x-oss-process=image/format,png
[format_png 4]: /images/20221004/df6a5fdc65ae47d49c9035351d2dead1.png