python利用PyQt5和QTDesginer开发GUI应用(一)、环境准备及demo

矫情吗；* 2023-05-21 07:04 27阅读 0赞

# 1.python环境准备(推荐使用anaconda) 以及pycharm应用安装： #

略

# 2.安装PyQt5和PyQt5-tools #

如果安装不成功可以多试几次，还不行的话可以修改pip为豆瓣的源:http://pypi.douban.com/simple，再不行的话就到pypi上下载whl包使用命令行安装即可: *pip.exe install xxx.whl*

我这里的版本分别是*PyQt5==5.13.0*和*pyqt5-tools5.13.0.1.5*

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dzZGMwNTIx_size_16_color_FFFFFF_t_70][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dzZGMwNTIx_size_16_color_FFFFFF_t_70 1][]

# 3.PyCharm配置外部工具： #

在File-->Settings-->Tools-->External Tools中新增:

**QTDesginer**:用来画出GUI界面。

如图配置即可，很多人找不到designer.exe在哪里还要单独去下载，其实在装完pyqt5-tools这个包之后里面已经带了。到当前python环境的$PYTHON\_ENV\\site-packages\\pyqt5\_tools\\Qt\\bin\\designer.exe即可找到

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dzZGMwNTIx_size_16_color_FFFFFF_t_70 2][]

**PyUIC**：用来将designer画的.ui格式的文件转为.py文件

\-m PyQt5.uic.pyuic $FileName$ -o ..\\show\_ui\\$FileNameWithoutExtension$.py

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dzZGMwNTIx_size_16_color_FFFFFF_t_70 3][]

配好保存之后，在Tools-->External Tools里就可以看到新增的两个外部工具了：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dzZGMwNTIx_size_16_color_FFFFFF_t_70 4][]

# 4.画UI #

我们先来画界面，打开QTDesginer:

新建选择Widget,然后从左边选择需要的组件拖拽进新建的画板里，在右边可以设置名字、样式、默认值等等。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dzZGMwNTIx_size_16_color_FFFFFF_t_70 5][]

这里只画好了界面，下面配置触发函数：

点击这里的编辑信号/槽：

![20200430145927127.png][]

选择你认为会在做出改变或点击事件的时候应该触发效果的组件拖拽出一根线：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dzZGMwNTIx_size_16_color_FFFFFF_t_70 6][]

接下来会出现这个窗口：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dzZGMwNTIx_size_16_color_FFFFFF_t_70 7][]

点击编辑，新增一个函数，这里的函数名就是在后面实现功能的时候会用到的，我这里新增一个submit\_btn()。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dzZGMwNTIx_size_16_color_FFFFFF_t_70 8][]

左边选择事件类型，我这里选择当点击click()即可触发，触发右边的我们定义的函数submit\_btn()。

左边的事件类型在不同的组件里是不一样的，这个可以参考[官方文档][Link 1]，有很多也很详细。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dzZGMwNTIx_size_16_color_FFFFFF_t_70 9][]

用同样的方式新增一个clear\_btn()

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dzZGMwNTIx_size_16_color_FFFFFF_t_70 10][]

好了先保存my\_csdn.ui文件。

# 5.UI转为python脚本 #

右键my\_csdn.ui选择External Tools->PyUIC即可通过.ui文件生成.py文件，生成的文件就在上面配置PyUIC外部工具的时候给的路径：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dzZGMwNTIx_size_16_color_FFFFFF_t_70 11][]

![20200430151158647.png][]

打开看看生成的py文件：

可以看到生成的文件里都是self.组件名.属性/函数

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dzZGMwNTIx_size_16_color_FFFFFF_t_70 12][]

# 6.实现UI里的功能 #

我们新增一个py文件用来实现对应的功能：

将刚才生成的my\_csdn里的Ui\_Form引进来，然后定义class实现对应的函数即可。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dzZGMwNTIx_size_16_color_FFFFFF_t_70 13][]

简单修改一下：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dzZGMwNTIx_size_16_color_FFFFFF_t_70 14][]

# 7.源码 #

**代码**：

my\_csdn\_show\_ui.py

import sys
    from PyQt5 import QtWidgets,QtCore
    from PyQt5.QtCore import QDate,QDateTime,QTime,Qt
    from PyQt5.QtWidgets import *
    from PyQt5.QtGui import *
    from my_csdn import Ui_Form
    
    class mywindow(QtWidgets.QWidget, Ui_Form):
        txt=''
        def __init__(self):
            super(mywindow, self).__init__()
            self.setupUi(self)
            self.setWindowTitle('CSDN_Demo')
        def submit_btn(self):
            self.txt += self.lineEdit.text()+'\n' #获取输入的内容
            self.plainTextEdit.setPlainText(self.txt)#将文本框里的值追加在下面的文本区内
    
        def clear_btn(self):
            self.txt=''
            self.plainTextEdit.setPlainText(self.txt)#清除文本区内容
    
    
    if __name__ == "__main__":
        app = QtWidgets.QApplication(sys.argv)
        ui = mywindow()
        ui.show()
        sys.exit(app.exec_())

my\_csdn.py \[用.ui生成的\]

from PyQt5 import QtCore, QtGui, QtWidgets
    
    
    class Ui_Form(object):
        def setupUi(self, Form):
            Form.setObjectName("Form")
            Form.resize(447, 423)
            self.lineEdit = QtWidgets.QLineEdit(Form)
            self.lineEdit.setGeometry(QtCore.QRect(60, 60, 121, 31))
            self.lineEdit.setObjectName("lineEdit")
            self.label = QtWidgets.QLabel(Form)
            self.label.setGeometry(QtCore.QRect(10, 60, 71, 31))
            self.label.setObjectName("label")
            self.pushButton_submit = QtWidgets.QPushButton(Form)
            self.pushButton_submit.setGeometry(QtCore.QRect(190, 60, 81, 31))
            self.pushButton_submit.setObjectName("pushButton_submit")
            self.plainTextEdit = QtWidgets.QPlainTextEdit(Form)
            self.plainTextEdit.setEnabled(True)
            self.plainTextEdit.setGeometry(QtCore.QRect(10, 110, 381, 131))
            font = QtGui.QFont()
            font.setPointSize(12)
            self.plainTextEdit.setFont(font)
            self.plainTextEdit.setReadOnly(True)
            self.plainTextEdit.setObjectName("plainTextEdit")
            self.pushButton_clear = QtWidgets.QPushButton(Form)
            self.pushButton_clear.setGeometry(QtCore.QRect(290, 60, 81, 31))
            self.pushButton_clear.setObjectName("pushButton_clear")
    
            self.retranslateUi(Form)
            self.pushButton_submit.clicked.connect(Form.submit_btn)
            self.pushButton_clear.clicked.connect(Form.clear_btn)
            QtCore.QMetaObject.connectSlotsByName(Form)
    
        def retranslateUi(self, Form):
            _translate = QtCore.QCoreApplication.translate
            Form.setWindowTitle(_translate("Form", "Form"))
            self.label.setText(_translate("Form", "请输入:"))
            self.pushButton_submit.setText(_translate("Form", "submit"))
            self.pushButton_clear.setText(_translate("Form", "clear"))

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dzZGMwNTIx_size_16_color_FFFFFF_t_70]: /images/20230521/d6e9df93770e48d09af72d3137842cf5.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dzZGMwNTIx_size_16_color_FFFFFF_t_70 1]: /images/20230521/95f1fe4cca4f4cf79e342693898bde15.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dzZGMwNTIx_size_16_color_FFFFFF_t_70 2]: /images/20230521/ff69ff2aefcd4dc9a3faa4e11a65fed5.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dzZGMwNTIx_size_16_color_FFFFFF_t_70 3]: /images/20230521/ffbf5e95afff45d8b29028611d9bf0eb.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dzZGMwNTIx_size_16_color_FFFFFF_t_70 4]: /images/20230521/c1ca20fe1ee342a38cb04102894f410d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dzZGMwNTIx_size_16_color_FFFFFF_t_70 5]: /images/20230521/aad679d2351246a6b42456ff1f9d316d.png
[20200430145927127.png]: /images/20230521/81dc11e5af5b4fb7b62c84e048779ac1.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dzZGMwNTIx_size_16_color_FFFFFF_t_70 6]: /images/20230521/c8ada9d81b284f96a36c9515d2a68e65.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dzZGMwNTIx_size_16_color_FFFFFF_t_70 7]: /images/20230521/226805d4234c4f36bb48159f136d43fd.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dzZGMwNTIx_size_16_color_FFFFFF_t_70 8]: /images/20230521/b2915271569c4fbda685bdfa03be9734.png
[Link 1]: https://doc.qt.io/qt-5/qtwidgets-index.html
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dzZGMwNTIx_size_16_color_FFFFFF_t_70 9]: /images/20230521/b747a30fb7f54a76817c0189fae94ff2.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dzZGMwNTIx_size_16_color_FFFFFF_t_70 10]: /images/20230521/ee6282c6e4cf40379ded2e601ac2ab26.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dzZGMwNTIx_size_16_color_FFFFFF_t_70 11]: /images/20230521/2b4ee391d34e43ac8e59017d7a8c2edc.png
[20200430151158647.png]: /images/20230521/0475f886d6394cd39f90c3acae34f1a1.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dzZGMwNTIx_size_16_color_FFFFFF_t_70 12]: /images/20230521/8e46a4faa9744540a01e64f1f4bb3f8a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dzZGMwNTIx_size_16_color_FFFFFF_t_70 13]: /images/20230521/8c46fcef86a241f7b69833c2d59d5292.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dzZGMwNTIx_size_16_color_FFFFFF_t_70 14]: /images/20230521/dc23cae03c8e46ecb683f56998c7fb34.png