使用PyQt來編寫第一個Python GUI程序

本文由 伯樂在線 - 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 項目的時候，就在這段代碼的基礎上添加你本身的代碼吧。

這段代碼以下：

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 教程。

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

關於做者： Lane