本文由 伯樂在線 - Lane 翻譯，Daetalus 校稿。未經許可，禁止轉載！
英文出處：pythonforengineers.com。歡迎加入翻譯小組。

簡介

許多人在學習如何創建一個 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 項目的時候，就在這段代碼的基礎上添加你自己的代碼吧。

這段代碼如下：

其中需要注意的是第三行：

你需要在這里填入你先前創建的文件的地址。這個文件將會被內置的函數載入:

讓我們大致地看一看這段代碼：

這段主程序創建了一個新的 Qt Gui 應用。，每個 QT 應用都可以通過命令行進行配置，所以必須傳入sys.argv 參數。不過現在我們用不到這個。最后，我們創建了一個MyApp 類，這個類繼承于 Qt 庫并且調用了父類的初始化函數：

你不一定非得要了解這些代碼的細節。你只需要在它的基礎上繼續開發就好了。

下載pyqt_skeleton.py 這個文件，并將它重命名為pyqt_first.py。這是因為我們不想去改動到源文件。然后要做的第一件事就是在代碼中導入我們自己的 XML 文件，這個 XML 文件包含了我們的這個 GUI 信息。將下面的這一行：

替換為

這樣就能把我們的 GUI 文件載入到內存中。現在，我們的 GUI 中最關鍵的組件就是我們的這個按鈕了。一旦我們按下這個按鈕，就會發生一些神奇的事情。到底會發生什么？這就需要我們告訴代碼當按下Calculate Tax 按鈕的時候該怎么做了。在__init__ 函數中，添加如下的內容：

這段代碼有什么用？還記得我們把按鈕命名為了calc_tax_button 嗎？（這是這個按鈕對象的名字，不是按鈕上顯示的提示字符串。）clicked 是一個內置的函數，當有按鈕被點擊的時候它會被自動調用（很神奇吧）。所有的 QT 組件都有特定的函數，你可以通過 Google 來查看詳細。這段代碼的最后部分是connect(self.CalculateTax)。這意味著這個按鈕會被鏈接到一個叫做self.CalculateTax 的函數，這樣以后每當用戶按下這個按鈕的時候，這段代碼都會被調用。

我們還沒有實現這個函數。所以讓我們動手開始寫吧。

在MyApp 類中，添加另外一個函數。我們需要先看看整個函數，然后再去了解它的細節：

好了，讓我們一行一行的分析上面的代碼。

我們現在要做兩件事：讀取價格和稅率，然后計算最終的價格。好了開始吧。請記住，我們要通過我們設定的名字來調用這些組件（這就是我讓你不要用默認的通用名稱比如box1 的原因，否則的話我們在寫代碼的時候會很惱火）。

price_box.toPlainText() 是一個內置的可以讀取輸入框中的值的函數。順便提一句，雖然你用得多了以后肯定能記住這些函數，因為他們的名字取得很規范，但是你沒必要一開始就去記憶所有這些函數。我每次都是通過 Google 諸如 “Qt Textbox 讀取數據”一類的關鍵字來找到我所需要的函數。

通過函數讀取到的是一個 string 類型的值，所以我們需要把他轉換成 integer 類型并存在一個price變量中。

然后讀取稅率：

同樣的，value() 是讀取spinbox 中值的函數。感謝 Google。

我們現在已經得到了以上兩個值，這樣我們就能用非常高大上的數學公式來計算我們的最終價格了：

我們新建了一個 string 變量來儲存我們的最終價格。因為最終直接顯示在應用上的將會是一個 string 類型的值：

在results_window 中，我們調用了setText() 函數，它能顯示我們計算出的最終價格的字符串。

最后運行我們寫好的程序：

好了，這就是一個簡單的 PyQt 教程。

如果你還想要體驗更多好玩兒的東西，你可以試著用一用別的組件，不過先提醒一句，你要是放了太多的組件在你的應用中的話，用起來可能會有點費勁…