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

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

3.PyCharm配置外部工具：

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

QTDesginer:用来画出GUI界面。

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

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

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

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

4.画UI

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

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

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

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

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

接下来会出现这个窗口：

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

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

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

用同样的方式新增一个clear_btn()

好了先保存my_csdn.ui文件。

5.UI转为python脚本

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

打开看看生成的py文件：

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

6.实现UI里的功能

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

将刚才生成的my_csdn里的Ui_Form引进来，然后定义class实现对应的函数即可。

简单修改一下：

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"))