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