python gui thru PyQt5

admin

這裡會用一個實例讓讀者了解Python結合圖形視窗的設計流程，熟悉之後在設計儀表控制、機器自動控制等介面將不在是難事， 有興趣的讀者還可改成流行的拖放(drag and drop)圖控應用程式，投資自已學習這門工具是值得的，下面就一步步來實現。
3. 1 安裝 PyQt5
前面如果沒有安裝，現在趕快安裝，方法如下:
在Anaconda Prompt 視窗(Windows 命令提示字元)下先後輸入
pip install PyQt5
pip install PyQt5-tools
安裝完成後最好重開機，在路徑資料夾Anaconda3\Library\bin內會有個執行
檔案designer.exe，請拉到桌面方便使用(注意你的路徑及資料夾可能跟我的是不一樣)，至此安裝結束， 接下來可以打開designer設計圖控介面了，如圖3-1所示，我們會用它來設計一個簡單的圖控介面，並展示如何用Python程式引用這個介面的相關知識。
3. 2 認識QT Designer
認識一下圖3-1 QT Designer視窗中4個紅字標註區域。
區域1是元件盒，裡面提供很多的元件控制項，每個項目的功能不同
，例如常用到的按鈕(Push Button)、單選紐(Radio Button)、及 標籤(Label)
、文字方塊(TextEdit)等，可以直接拖放到區域2主視窗中擺放，在區域3物件
指示器(Object Inspector)中可索引切換擺放在主視窗中不同的元件，利用屬性編輯器(Property Editor)對選中的元件編輯如寬度、高度、佈局、字型等屬性。
區域4是信號/信號槽編輯器，這是PyQt5非常重要的核心機制，當按紐按下後就會發射一個信號(signal)，信號槽(slot)接收到這個對應的信號後就會處理這個事件。
Qt Designer 這一個視覺化的GUI設計工具，對程式設計師來說真的是一大福音，便利了許多， 有一點要提想讀者的是PyQt5在GPL協議是可以完全免費使用，但如果不打算開源準備應用於商業活動還是得付費。當然啦，熟悉了Designer UI設計後，一大票相似免費軟體等著你，不怕被綁架!
如果讀者想更深入了解Qt5及程式設計，可至Qt官網下載資料好好研究。
Qt 官網 : https://www.qt.io/download-qt-installer
3. 3 使用QT Designer 設計一個UI介面
步驟 1. 點擊下拉選單[檔案]新增一個新表單(圖3-2)。
圖 3-2 新建一個新表單。
步驟2. 選Widget 表單(圖3-3)。
圖 3-3 Widget表單。
步驟3. 拖放元件到表單(圖3-4)。
從元件盒拖放一個Label 及Push Button 到表單(Form)上(圖 3-4)。
可在物件指示器及屬性編輯器上修改元件名稱、屬性。
在此為了簡化問題，我就維持不變，讀者熟悉後可自已動手試試。
圖 3-4 設計表單。
步驟4. 編輯信號與信號槽。
要讓按鈕按下有作用，還需要將信號和槽關聯起來， 如圖3-5點擊工具列[編輯信號與信號槽]
圖 3-5 編輯信號與信號槽
步驟5. 關聯信號與信號槽。
滑鼠游標移到表單(Form)的元件按鈕(PushButton)處，左鍵按著不放移動到
表單可看到一個接地線，之後放開左鍵會彈跳出一個設定連線的視窗(圖3-6)。
圖3-6 關聯信號與信號槽
步驟6. 編輯信號槽事件函數。
選定 pushButton 發射信號是clicked()，之後點擊右邊Form下的編輯按鈕
(圖3-7)和(圖3-8)。
圖3-7 pushButton -> clicked()
步驟7. 新增信號槽事件函數。
按+新增一個自訂pushButton_click()事件函數()(圖3-8)， 按OK鍵離開。
圖3-8 編輯信號槽
步驟8. UI設計完成。
自動跳回主視窗後可看到自建的UI成形了，不要忘記存檔，例如檔名myUI.ui
(副檔名ui)，要增加或修正UI也可開啟舊檔編輯，不需要從無到有再搞一 次，是不是挺方便的。
圖3-9 UI
步驟9. ui轉檔py。
Qt Designer 儲存的是.ui檔，結構類似XML格式，因為我們期望是要給Python引用，所以我們必須想辦法將.ui檔轉換成.py檔才行。
PyQt5提供一個命令列工具pyuic5可以很輕鬆地完成轉換工作，使用方式如下 :
pyuic5 source.ui -o destination.py
其中
-o : 是輸出参数，表示要產生一個文件
destination.py : 要產生.py格式的文件
source.ui : 由Qt Designer設計UI的.ui原始文件
舉個例子， 假設你設計出來的UI檔名是 myUI.ui，想轉檔成myUI.py格式
可以照著圖3-10這樣做，在相同路徑下會自動產生myUI.py檔。
如果你常用pyuic5，且對Python語法熟悉的話，建議可自已寫個簡單腳本，將上述命令列改成自動化執行，這個就留給讀者自已練習了。
圖3-10 透過pyuic5將.ui 轉換成.py
上述步驟雖多其實並不複雜，讀者還是要實際操作一次才會真正了解其中的奧義，UI美不美觀端看個人造詣，但設計的方法都是一樣的，多練習了。
緊接著下個單元會舉一個實例說明Python引用myUI.py的方法。
3. 4 Python 引用UI介面
新建一個程式碼myApp.py並繼承介面檔(myUI)的Ui_Form類別即可(打開
myUI.py 檔就可看到類別class Ui_Form)。
其中myUI.py介面檔必須放在myApp相同資料夾內，否則會錯誤。
程式碼執行如圖3-11，按一下PushButton會show出 "Hi this is my first
coding !!!"，結果正如預期完全正確。myApp.py可當作一個樣板程式，讀者可慢慢擴增一些新功能，建議每加入一個功能最好就執行一次，沒問題了再增加，以免欲速則不達，將來花更多的時間debug，會抓到瘋，畢竟最複雜的程式也是從最基本的一磚一瓦造出來的，除非讀者寫程式功力深厚以及擁有的程式庫經過多年考驗沒問題，否則還是聽我的準沒錯。
myApp.py程式碼如下:
-- coding: utf-8 --
import sys
from PyQt5.QtWidgets import QMainWindow, Qapplication
from myUI import Ui_Form
#------------------------------------------------------------------------------
class MyWindow(QMainWindow, Ui_Form):
def init(self, parent=None):
super(MyWindow, self).init(parent)
self.setupUi(self)
#-------------------------------------------------------------------------
def pushButton_click(self):
self.label.setText("Hi this is my first coding !!!")
#------------------------------------------------------------------------------
def main():
app = QApplication(sys.argv)
myWin = MyWindow()
myWin.show()
sys.exit(app.exec_())
if name == 'main':
main()
圖3-11 myApp 程式碼及執行結果