[ PyQt入門(mén)教程 ] Qt Designer工具的使用
? Qt Designer是PyQt程序UI界面的實(shí)現(xiàn)工具，使用Qt Designer可以拖拽、點(diǎn)擊完成GUI界面設(shè)計(jì)，并且設(shè)計(jì)完成的.ui程序可以轉(zhuǎn)換成.py文件供python程序調(diào)用。本文主要通過(guò)用戶登錄需求描述Qt Designer工具開(kāi)發(fā)界面的使用方法。
本文主要內(nèi)容
? 1、Qt Designer程序主界面窗口介紹。
? 2、Qt Designer程序?qū)崿F(xiàn)界面開(kāi)發(fā)的案例。包括使用Qt Designer實(shí)現(xiàn)程序Gui開(kāi)發(fā)、使用pyuic5將.ui轉(zhuǎn)換.py程序、信號(hào)與槽的配置以及實(shí)現(xiàn)、使用pyinstaller轉(zhuǎn)換成可執(zhí)行程序的完成過(guò)程。
環(huán)境&工具版本
??Win10+pyhton3.7.4 + PyQt 5.11.2
Qt Designer工具主界面
? 打開(kāi)路徑：${python安裝目錄}/Lib/site-packages/pyqt5_tools/designer.exe。主界面如下：
?主界面不同區(qū)域介紹：
?工具箱 區(qū)域：提供GUI界面開(kāi)發(fā)使用的各種基本控件，如單選框、文本框等。可以拖動(dòng)到新創(chuàng)建的主程序界面。
?主界面區(qū)域：用戶放置各種從工具箱拖過(guò)來(lái)的各種控件。模板選項(xiàng)中最常用的就是Widget（通用窗口）和MainWindow（主窗口）。二者區(qū)別主要是Widget窗口不包含菜單欄、工具欄等。可以分別創(chuàng)建對(duì)比看看。
?對(duì)象查看器 區(qū)域：查看主窗口放置的對(duì)象列表。
?屬性編輯器 區(qū)域： 提供對(duì)窗口、控件、布局的屬性編輯功能。比如修改控件的顯示文本、對(duì)象名、大小等。
?信號(hào)/槽編輯器 區(qū)域：編輯控件的信號(hào)和槽函數(shù)，也可以添加自定義的信號(hào)和槽函數(shù)。
Qt Designer基本控件介紹
? Widget Box控件工具箱是按照控件作用類別進(jìn)行劃分的。這里作為實(shí)現(xiàn)入門(mén)級(jí)界面實(shí)現(xiàn)，主要介紹最常使用的控件及控件對(duì)象相關(guān)函數(shù)。函數(shù)方法知道怎么獲取控件輸入內(nèi)容以及如何將后臺(tái)操作結(jié)果輸出到界面控件顯示的主要函數(shù)就可以了。
? （1）顯示控件。
?Lable：文本標(biāo)簽，顯示文本，可以用來(lái)標(biāo)記控件。
?Text Browser：顯示文本控件。用于后臺(tái)命令執(zhí)行結(jié)果顯示。
? （2）輸入控件，提供與用戶輸入交互
?Line Edit：?jiǎn)涡形谋究颍斎雴涡凶址？丶?duì)象常用函數(shù)為T(mén)ext() 返回文本框內(nèi)容，用于獲取輸入。setText() 用于設(shè)置文本框顯示。
???? Text Edit：多行文本框，輸入多行字符串。控件 對(duì)象常用函數(shù)同Line Edit控件。
?Combo Box：下拉框列表。用于輸入指定枚舉值。
? （3）控件按鈕，供用戶選擇與執(zhí)行?
?Push Button：命令按鈕。常見(jiàn)的確認(rèn)、取消、關(guān)閉等按鈕就是這個(gè)控件。clicked信號(hào)一定要記住。clicked信號(hào)就是指鼠標(biāo)左鍵按下然后釋放時(shí)會(huì)發(fā)送信號(hào)，從而觸發(fā)相應(yīng)操作。
?Radio Button：?jiǎn)芜x框按鈕。
?Check Box：多選框按鈕。
Qt Designer工具實(shí)現(xiàn)
? 了解基本控件及作用和獲取輸入/顯示方法后，就可以開(kāi)始動(dòng)手實(shí)現(xiàn)小需求了。。比如登錄界面。獲取用戶名和密碼并顯示。。
? 打開(kāi)Qt Designer，開(kāi)始拖拽控件實(shí)現(xiàn)吧。。
?Step1：打開(kāi)主界面，選擇Widget模板
?Step2：從Widget Box工具箱中拖拽2個(gè)label、2個(gè)line Edit、2個(gè)Push Button以及1個(gè)Text Browser。拖完后如下：
? Step3：雙擊各個(gè)控件，修改控件名稱（對(duì)應(yīng)屬性編輯區(qū)中的text，可直接雙擊控件修改）以及對(duì)象名稱（對(duì)應(yīng)屬性編輯區(qū)中的objectName）。對(duì)象名稱一定記得修改。默認(rèn)生成的label_1、label_2這種名稱無(wú)法直接判斷到底是對(duì)應(yīng)哪個(gè)控件。。
? 點(diǎn)擊菜單欄Form - Prview。預(yù)覽界面實(shí)現(xiàn)效果
?login.ui的程序代碼如下：
?View Code
Step4：點(diǎn)擊File -Save保存實(shí)現(xiàn)結(jié)果。保存文件名為login.ui。
?Step5：界面開(kāi)發(fā)完成。
將.ui文件轉(zhuǎn)換為.py文件
使用命令行pyuic5 -o login.py login.ui轉(zhuǎn)換成.py文件。調(diào)用格式為pyuic5 -o {輸出文件名} {輸入designer設(shè)計(jì)好的.ui后綴界面文件}。執(zhí)行結(jié)果如下
轉(zhuǎn)換后的.py文件內(nèi)容如下：
?View Code
界面與業(yè)務(wù)邏輯分離實(shí)現(xiàn)
? 這一步主要實(shí)現(xiàn)業(yè)務(wù)邏輯，也就是點(diǎn)擊登錄和退出按鈕后程序要執(zhí)行的操作。為了后續(xù)維護(hù)方便，采用界面與業(yè)務(wù)邏輯相分離來(lái)實(shí)現(xiàn)。也就是通過(guò)創(chuàng)建主程序調(diào)用界面文件方式實(shí)現(xiàn)。這有2個(gè)好處。第1就是實(shí)現(xiàn)邏輯清晰。第2就是后續(xù)如果界面或者邏輯需要變更，好維護(hù)。新建call_login.py文件程序，調(diào)用login.py文件。
# -*- coding: utf-8 -*-# Form implementation generated from reading ui file 'connect_me.ui'#
# Created by: PyQt5 UI code generator 5.11.3#
# WARNING! All changes made in this file will be lost!#導(dǎo)入程序運(yùn)行必須模塊import sys#PyQt5中使用的基本控件都在PyQt5.QtWidgets模塊中fromPyQt5.QtWidgetsimport QApplication, QMainWindow#導(dǎo)入designer工具生成的login模塊fromloginimport Ui_Formclass MyMainForm(QMainWindow, Ui_Form):
? ? def__init__(self, parent=None):
? ? ? ? super(MyMainForm, self).__init__(parent)
? ? ? ? self.setupUi(self)if__name__=="__main__":
? ? #固定的，PyQt5程序都需要QApplication對(duì)象。sys.argv是命令行參數(shù)列表，確保程序可以雙擊運(yùn)行app = QApplication(sys.argv)
? ? #初始化myWin = MyMainForm()
? ? #將窗口控件顯示在屏幕上? ? myWin.show()
? ? #程序運(yùn)行，sys.exit方法確保程序完整退出。sys.exit(app.exec_())
運(yùn)行call_login.py程序，結(jié)果如下：
? 到這里，界面實(shí)現(xiàn)和業(yè)務(wù)主程序已經(jīng)寫(xiě)好了。但是現(xiàn)在具體業(yè)務(wù)功能邏輯還未實(shí)現(xiàn)。需要對(duì)登錄和退出的按鈕點(diǎn)擊執(zhí)行相對(duì)應(yīng)的操作。
?添加信號(hào)和槽，實(shí)現(xiàn)業(yè)務(wù)邏輯
?實(shí)現(xiàn)部分見(jiàn)代碼注釋。這里主要添加如下兩行命令配置信號(hào)和槽的關(guān)系。信號(hào)和槽的創(chuàng)建和原理下文描述。這里可以參照添加即可。
登錄按鈕：self.login_Button.clicked.connect(self.display)
退出按鈕：self.cancel_Button.clicked.connect(self.close)
? 詳細(xì)代碼如下：
# -*- coding: utf-8 -*-# Form implementation generated from reading ui file 'connect_me.ui'#
# Created by: PyQt5 UI code generator 5.11.3#
# WARNING! All changes made in this file will be lost!#導(dǎo)入程序運(yùn)行必須模塊import sys#PyQt5中使用的基本控件都在PyQt5.QtWidgets模塊中fromPyQt5.QtWidgetsimport QApplication, QMainWindow#導(dǎo)入designer工具生成的login模塊fromloginimport Ui_Formclass MyMainForm(QMainWindow, Ui_Form):
? ? def__init__(self, parent=None):
? ? ? ? super(MyMainForm, self).__init__(parent)
? ? ? ? self.setupUi(self)
? ? ? ? #添加登錄按鈕信號(hào)和槽。注意display函數(shù)不加小括號(hào)()? ? ? ? self.login_Button.clicked.connect(self.display)
? ? ? ? #添加退出按鈕信號(hào)和槽。調(diào)用close函數(shù)? ? ? ? self.cancel_Button.clicked.connect(self.close)
? ? def display(self):
? ? ? ? #利用line Edit控件對(duì)象text()函數(shù)獲取界面輸入username = self.user_lineEdit.text()
? ? ? ? password = self.pwd_lineEdit.text()
? ? ? ? #利用text Browser控件對(duì)象setText()函數(shù)設(shè)置界面顯示self.user_textBrowser.setText("登錄成功!\n"+"用戶名是: "+ username+",密碼是： "+ password)if__name__=="__main__":
? ? #固定的，PyQt5程序都需要QApplication對(duì)象。sys.argv是命令行參數(shù)列表，確保程序可以雙擊運(yùn)行app = QApplication(sys.argv)
? ? #初始化myWin = MyMainForm()
? ? #將窗口控件顯示在屏幕上? ? myWin.show()
? ? #程序運(yùn)行，sys.exit方法確保程序完整退出。sys.exit(app.exec_())
運(yùn)行結(jié)果如下：
用戶登錄小程序開(kāi)發(fā)完成。但是這個(gè)界面還有一個(gè)小問(wèn)題，就是拖動(dòng)的時(shí)候，界面會(huì)變形。。看圖
? 是不是覺(jué)得不可忍受。。有兩個(gè)辦法，一種是界面點(diǎn)擊使用網(wǎng)格布局，一種是使界面大小不可改變。這里介紹第二種方法。在Qt Designer上修改主界面最大屬性中的長(zhǎng)寬設(shè)置成與最小屬性一致。如下：
? 這樣設(shè)置之后，就不允許在窗口左右兩邊拖動(dòng)導(dǎo)致界面改變大小，就可以保證主界面中的控件不會(huì)變形。
Pyinstaller打包成.exe文件
用戶登錄顯示程序界面和邏輯都實(shí)現(xiàn)了。下來(lái)就是要推廣使用了。不是所有人電腦上都安裝有python軟件或者對(duì)應(yīng)的python版本以及PyQt5工具。那么如何讓程序在這些未安裝python軟件的機(jī)子上運(yùn)行呢？可以使用pyinstaller工具將程序打包成.exe文件。pyinstaller使用方法可以參考《使用Pyinstaller轉(zhuǎn)換.py文件為.exe可執(zhí)行程序》。打包過(guò)程如下：
pyinstaller.exe -F call_login.py -w
打包成功后call_login.exe在當(dāng)前目錄的dist目錄下。執(zhí)行call_login.exe，程序可以正確運(yùn)行。如下：
? 這樣，其他人想運(yùn)行你的程序，就可以直接給他提供call_login.exe可執(zhí)行過(guò)程序了。
小結(jié)
?本文主要講述了使用Qt Designer工具實(shí)現(xiàn)一個(gè)用戶登錄顯示的小需求。通過(guò)這個(gè)需求可以知道如何使用Qt Designer實(shí)現(xiàn)界面開(kāi)發(fā)、.ui文件轉(zhuǎn)換、業(yè)務(wù)和界面分離實(shí)現(xiàn)以及最簡(jiǎn)單的信號(hào)和槽創(chuàng)建。通過(guò)這個(gè)需求實(shí)現(xiàn)過(guò)程描述相信你可以參考動(dòng)手實(shí)現(xiàn)你的小需求。起碼可以上手實(shí)踐了。。
?? 實(shí)際上這個(gè)程序還有很多小問(wèn)題。。因?yàn)橛脩舻卿浗缑婵丶伲詻](méi)有感覺(jué)出來(lái)。。就是控件布局管理。就是如何讓界面上的控件整齊有序、布局合理美觀。還有信號(hào)與槽也沒(méi)具體說(shuō)明，待下一篇文章描述。。
