讀古今文學網 > 父與子的編程之旅:與小卡特一起學Python > 20.1 使用 PyQt >

20.1 使用 PyQt

使用 PyQt 之前,必須確保你的計算機上已經安裝有這個模塊。如果你使用這本書的安裝程序來安裝 Python,就已經安裝有 PyQt。不然,還得另外下載安裝。PyQt 可以從 得到。要根據你的操作系統和所使用的 Python 版本得到正確的 PyQt 版本(如果運行這本書的安裝程序,PyQt 的版本是 2.7.3)。我們這裡使用 PyQt 4.1。

寫一個 GUI 程序大體上可以分為兩個主要部分。你需要創建用戶界面本身(UI),然後編寫代碼讓 UI 按照你的想法來實現功能。創建 UI 需要在窗口上排布一些東西,比如按鈕、文本框、選擇框等。然後你編寫代碼來響應按鈕點擊、文本框輸入、選擇框中選擇某項等動作。

使用 Qt 時,可以使用 Qt Designer 來創建 UI。我們來看一下它的工作方式。

Qt Designer

當你安裝完 PyQt 時,同時安裝的還有 Qt Designer。找到它的圖標(比如在 Windows 下到開始菜單中尋找),然後啟動 Qt Designer。啟動之後你應該可以看到 Qt 的窗口打開,中間有一個 New Form(新窗口)對話框:

Form 是 GUI 窗口對應的編程術語。因為你要創建一個新的 GUI 窗口,所以選擇 Main Window(主窗口)選項,然後點擊 Create(創建)按鈕。現在我們來看一下 Qt 窗口的樣子。

左邊是組件列表,其中是能用於 GUI 的各種圖形界面元素。它們被分為幾個不同的分類。

術語箱

在 GUI 中,單個的按鈕、復選框等都叫做「部件」(widget),也稱為「組件」(component), 有時還稱為「控件」(control)。

右邊是對像檢查器(Object Inspector)和屬性編輯器(Property Editor),你可以在這裡查看和修改組件的屬性。除了對象檢查器和屬性編輯器,右邊還有第三個面板,它的功能是由底部選中的標籤決定的。它可以是 Signal/Slot 檢查器、行為編輯器(Action Editor)或者資源瀏覽器(Resource Browser)。

中間是剛剛創建的空窗口。最頂上顯示著 Main Window - untitled,是因為你還沒有給它命名。中間的空白部分就是放置組件製作 UI 界面的地方。(在 Mac 上,需要在 Qt Designer > Preferences 中將 user interface mode(UI 模式)從 Multiple Top-Level Windows(浮動窗口)改為 Docked Window(集成窗口)才能看到這個界面。否則所有的面板都會浮動成獨立的窗口。)

添加按鈕

我們來為 GUI 添加一個按鈕。在 Qt Designer 窗口的左邊找到 Buttons(按鈕),然後找到 Push Button 組件。

將 Push Button 拖到空白的窗口中,然後放在某個地方。現在窗口中有了一個按鈕,它上面的文字是 PushButton。

現在注意看一下下邊的屬性編輯器。 如果按鈕仍然處於選中態(周圍有藍色小方塊),你會在屬性編輯器中看到它的屬性。可以看到按鈕的名字是 PushButton。如果你在屬性列表中向下滾動一下,還會看到其他的屬性,比如寬度(width)、高度(height),以及 x 和 y 位置,等等。

修改按鈕

要修改按鈕的大小或者按鈕在窗口中的位置,有兩種方法:用鼠標拖動按鈕,或者改變 SizePosition 屬性。可以試著用這兩種方法移動和調整按鈕大小,看看它們的作用。要想使用鼠標移動按鈕,點擊按鈕的任意部位然後拖動到新位置即可。要想使用鼠標改變按鈕的大小,則點擊按鈕邊緣的任一藍色方塊(稱為操作點,handle),然後拖動按鈕的某一邊或者某一角來進行縮放。如果要使用屬性來改變按鈕的大小,則點擊 geometry 屬性旁邊的小三角形,它就會展開,並顯示出 XYWidthHeight 屬性。輸入不同的值即可移動或者調整按鈕大小。

你還可以改變按鈕上顯示的文字。現在這個文字和按鈕的名稱是一樣的,但這不是必須的。我們來改一下,讓按鈕上的文字變為 I\'m a Button!。在屬性編輯器中,往下滾動,找到 text 屬性,將它的值改為 I\'m Button!。你也可以在按鈕上雙擊,然後直接編輯文字。

現在窗口中按鈕上的文字已經變成了 I\'m a Button!,但該組件的名字(objectName 屬性)仍然是 PushButton。如果你想在代碼中操作按鈕,則可以使用這個名字來指代該按鈕。

保存 GUI

下面保存目前為止建立的 GUI。在 PyQt 中,所有 GUI 的描述都保存在一個 .ui 文件中。這個文件包含了窗口、菜單和部件的所有信息。Qt Designer 右側的屬性窗口中顯示的正是同樣的信息,現在我們需要把這些信息保存到一個文件中,以便 PyQt 程序運行時使用。

要保存 UI,進入 File 菜單,選擇 Save As(另存為),為文件指定一個名字。下面把我們的 GUI 命名為 MyFirstGui。你會注意到,文件擴展名被自動設為了 .ui。所以這個 UI 會被保存為 MyFirstGui.ui。請確保將它保存在了你想要的文件夾中。默認情況下,Designer 會將它保存在軟件本身所在的目錄下,這可能不是你想要的結果。記得在點擊 Save 之前先切換到你保存 Python 程序的文件夾。

可以在任何文本編輯器(包含 IDLE)中查看這個文件。如果打開這個文件,會看到這樣的內容:

看起來讓人有點糊塗,不過如果再仔細看看,可以看到描述窗口的部分、描述按鈕的部分,以及還沒有討論的其他部分,比如菜單和狀態欄。