簡介
許多人在學習如何建立一個 GUI 應用的時候都感到十分的困難。其中最重要的原因是，他們不知道應該從何下手。大多數的教程都只有文字，但事實上僅僅依靠文字很難學會 GUI 程式設計，因為 GUI 應用大多數都是基於視覺上的。
我們將通過建立一個簡單的 GUI 應用來避免上面提到的這些問題，並且向你展示著手開始這件事其實是多麼的簡單。一旦你明白了這些基本的知識，以後的進一步學習將會變得十分的容易。
這就是我們即將完成的東西：
這是一個簡單的 GUI 應用，根據輸入的價格（price）和稅率（tax rate），計算出最終的價格（final price）。
大多數的教程都試圖直接通過程式碼來對 GUI 應用進行佈局，但是這樣做實在是很費勁。我們將要做的是利用優秀的 QT Designer 工具來對我們的應用進行佈局。
所以不要再勞神費力的用程式碼來設計介面了。現在開始所有的東西都將通過圖形介面來搞定。
所有的程式碼都在這裡。
前提條件
如果你已經接受了我的建議並且安裝了 Anaconda，你應該已經安裝好了 PyQt4。如果沒有的話，你需要從這裡先下載它。
同時你還需要一個 Qt Designer。我建議你下載整個的 QT 套件，因為其中還包含了許多其他有用的工具。
開始著手
提示：當你需要檢視更多細節的時候，你可以通過點選下方的任意圖片來檢視其原圖。（譯者注：你可能需要檢視原始連結來檢視原圖）
開啟 QT Designer。在彈出的視窗中，選擇 Main Window，這樣它會給你一個空白的畫板。
接下來在左側選擇Text Edit：
將Text Edit 拖動到主視窗：
看見右邊我粗略的用紅圈框起來的部分了嗎？那就是定義這個物件的名字的地方。這個名字將是我們通過 Python 程式碼呼叫到這個物件的變數名，所以請儘量取一個有意義的名稱。
我將它取名為price_box，因為我們會在這裡輸入價格。然後我們需要給這個輸入框新增一個 label，以便讓使用者更加清楚這個輸入框的作用。
我在上圖中圈出了 label。把它拖動到主視窗當中來。
現在它被預設稱作TextLabel。雙擊並將其命名為Price。你還可以將這段文字字型加大並且設定為粗體，就像下邊看到的這樣：
對於稅率（tax）輸入框，我們會使用另外的一個東西。找到spin box：
左側用圈框起來的部分就是一個spin box。它會限定你能輸入的值。其實並不是非得要用spin box，這樣做只不過是為了更好地展示 QT Creator 所能提供的各種不同的元件。將spin box 拖到視窗中。然後我們要做的第一件事情就是將objectName 改為一個有意義的名字，例如我將其設定為tax_rate。請記住這將會是你在 Python 程式碼中呼叫它的時候會使用到的變數名。
我們可以為我們的spin box 設定一個預設值。我選擇將其設定為 20：
如果你仔細觀察上圖，你會發現我們也可以設定它的最小值和最大值。不過我並不打算去更改他們。
同樣地，我會為它新增一個標籤叫做Tax Rate。然後看看我們接下來會用到的圈起來的Push Button：
好的，現在選擇Push Button 然後將其拖動到我們的視窗中來。
這個按鈕現在顯示的是PushButton，這並不是一個很有意義的名字。到了這一步，你應該知道該怎麼更改它了。不過在此之前，我們要把這個按鈕的名字（不是顯示用的文字列）改為calc_tax_button。
然後，我們可以修改真正的顯示文字列了：
然後選擇另外一個Text Edit 並將其拖動到視窗中。你不需要給它新增標籤，因為我們會把我們的結果輸出到這裡。把它的名字改為results_window（下圖中沒有畫出來，但你應該已經知道該如何操作了）。
如果你覺得需要的話，你可以新增一個大標題。這是一個簡單的label box 並且將字型加大了。
現在儲存你的成果：
這個檔案在下一部分我們編寫程式碼的時候將會用到，所以最好把它存在一個我們方便訪問的地方。
我們建立的只是一個簡單的 XML 檔案。用任意一個文字編輯器開啟它，你可以看到這樣的內容：
編寫程式碼
Qt 程式碼是物件導向的，並且簡單易學。所有我們新增的元件都是一個物件，並且都擁有自己的方法比如toPlainText()（用來讀取輸入框中的值）。這讓它使用起來非常方便。
在你編寫程式碼之前，你必須要使用一些函式來進行配置。我確信官方的文件中肯定有提到過這個，但是我現在打死也找不到這些文件了，所以我只能通過官方的例程（以及網上的一些教程）中總結出了這一小段程式碼來進行配置。我已經把這些函式上傳到了 pyqt_skeleton.py。
這些程式碼非常有用，每當你想要建立一個新的 PyQt 專案的時候，就在這段程式碼的基礎上新增你自己的程式碼吧。
這段程式碼如下：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
import sys from PyQt4 import QtCore, QtGui, uic qtCreatorFile = "" # Enter file here. Ui_MainWindow, QtBaseClass = uic.loadUiType(qtCreatorFile) class MyApp(QtGui.QMainWindow, Ui_MainWindow): def __init__(self): QtGui.QMainWindow.__init__(self) Ui_MainWindow.__init__(self) self.setupUi(self) if __name__ == "__main__": app = QtGui.QApplication(sys.argv) window = MyApp() window.show() sys.exit(app.exec_()) |
其中需要注意的是第三行：
|
1 |
qtCreatorFile = "" # Enter file here. |
你需要在這裡填入你先前建立的檔案的地址。這個檔案將會被內建的函式載入:
|
1 |
Ui_MainWindow, QtBaseClass = uic.loadUiType(qtCreatorFile) |
讓我們大致地看一看這段程式碼：
|
1 2 3 4 5 |
if __name__ == "__main__": app = QtGui.QApplication(sys.argv) window = MyApp() window.show() sys.exit(app.exec_()) |
這段主程式建立了一個新的 Qt Gui 應用。，每個 QT 應用都可以通過命令列進行配置，所以必須傳入sys.argv 引數。不過現在我們用不到這個。最後，我們建立了一個MyApp 類，這個類繼承於 Qt 庫並且呼叫了父類的初始化函式：
|
1 2 3 4 5 |
class MyApp(QtGui.QMainWindow, Ui_MainWindow): def __init__(self): QtGui.QMainWindow.__init__(self) Ui_MainWindow.__init__(self) self.setupUi(self) |
你不一定非得要了解這些程式碼的細節。你只需要在它的基礎上繼續開發就好了。
下載pyqt_skeleton.py 這個檔案，並將它重新命名為pyqt_first.py。這是因為我們不想去改動到原始檔。然後要做的第一件事就是在程式碼中匯入我們自己的 XML 檔案，這個 XML 檔案包含了我們的這個 GUI 資訊。將下面的這一行：
|
1 |
qtCreatorFile = "" # Enter file here. |
替換為
|
1 |
qtCreatorFile = "tax_calc.ui" |
這樣就能把我們的 GUI 檔案載入到記憶體中。現在，我們的 GUI 中最關鍵的元件就是我們的這個按鈕了。一旦我們按下這個按鈕，就會發生一些神奇的事情。到底會發生什麼？這就需要我們告訴程式碼當按下Calculate Tax 按鈕的時候該怎麼做了。在__init__ 函式中，新增如下的內容：
|
1 |
self.calc_tax_button.clicked.connect(self.CalculateTax) |
這段程式碼有什麼用？還記得我們把按鈕命名為了calc_tax_button 嗎？（這是這個按鈕物件的名字，不是按鈕上顯示的提示字串。）clicked 是一個內建的函式，當有按鈕被點選的時候它會被自動呼叫（很神奇吧）。所有的 QT 元件都有特定的函式，你可以通過 Google 來檢視詳細。這段程式碼的最後部分是connect(self.CalculateTax)。這意味著這個按鈕會被連結到一個叫做self.CalculateTax 的函式，這樣以後每當使用者按下這個按鈕的時候，這段程式碼都會被呼叫。
我們還沒有實現這個函式。所以讓我們動手開始寫吧。
在MyApp 類中，新增另外一個函式。我們需要先看看整個函式，然後再去了解它的細節：
|
1 2 3 4 5 6 |
def CalculateTax(self): price = int(self.price_box.toPlainText()) tax = (self.tax_rate.value()) total_price = price + ((tax / 100) * price) total_price_string = "The total price with tax is: " + str(total_price) self.results_window.setText(total_price_string) |
好了，讓我們一行一行的分析上面的程式碼。
我們現在要做兩件事：讀取價格和稅率，然後計算最終的價格。好了開始吧。請記住，我們要通過我們設定的名字來呼叫這些元件（這就是我讓你不要用預設的通用名稱比如box1 的原因，否則的話我們在寫程式碼的時候會很惱火）。
|
1 |
price = int(self.price_box.toPlainText()) |
price_box.toPlainText() 是一個內建的可以讀取輸入框中的值的函式。順便提一句，雖然你用得多了以後肯定能記住這些函式，因為他們的名字取得很規範，但是你沒必要一開始就去記憶所有這些函式。我每次都是通過 Google 諸如 “Qt Textbox 讀取資料”一類的關鍵字來找到我所需要的函式。
通過函式讀取到的是一個 string 型別的值，所以我們需要把他轉換成 integer 型別並存在一個price 變數中。
然後讀取稅率：
|
1 |
tax = (self.tax_rate.value()) |
同樣的，value() 是讀取spinbox 中值的函式。感謝 Google。
我們現在已經得到了以上兩個值，這樣我們就能用非常高大上的數學公式來計算我們的最終價格了：
|
1 2 |
total_price = price + ((tax / 100) * price) total_price_string = "The total price with tax is: " + str(total_price) |
我們新建了一個 string 變數來儲存我們的最終價格。因為最終直接顯示在應用上的將會是一個 string 型別的值：
|
1 |
self.results_window.setText(total_price_string) |
在results_window 中，我們呼叫了setText() 函式，它能顯示我們計算出的最終價格的字串。
最後執行我們寫好的程式：
|
1 |
python pyqt_first.py |
好了，這就是一個簡單的 PyQt 教程。
如果你還想要體驗更多好玩兒的東西，你可以試著用一用別的元件，不過先提醒一句，你要是放了太多的元件在你的應用中的話，用起來可能會有點費勁…