Qt 設計器（Qt Designer）內容總結

ludi

1、概述

Qt 允許程序員不通過(guò)任何設計工具，以純粹的 C++代碼來(lái)設計一個(gè)程序。但是更多的

程序員更加習慣于在一個(gè)可視化的環(huán)境中來(lái)設計程序，尤其是在界面設計的時(shí)候。這是因為

這種設計方式更加符合人類(lèi)思考的習慣，也比書(shū)寫(xiě)代碼要快速的多。

Qt 也提供了這樣一個(gè)可視化的界面設計工具：Qt 設計器（Qt Designer）。其開(kāi)始界面

如上圖所示。Qt 設計器可以用來(lái)開(kāi)發(fā)一個(gè)應用程序全部或者部分的界面組件。以 Qt 設計器

生成的界面組件最終被變成 C++代碼，因此 Qt 設計器可以被用在一個(gè)傳統的工具鏈中，并

且它是編譯器無(wú)關(guān)的。

在不同的平臺上啟動(dòng) Qt Designer 的方式有一定差別。在 Windows 環(huán)境下你可以在“開(kāi)

始->程序->Qt”這個(gè)組件中找到 Qt Designer 的圖標并點(diǎn)擊；在 Unix 環(huán)境下，在命令行模式

下輸入命令： “designer”；在 Mac Os 下，在 X    Finder 下雙擊 Designer 圖標。

默認情況下，Qt Designer 的用戶(hù)界面是由幾個(gè)頂級的窗口共同組成的。如果你更習慣

于一個(gè) MDI-style 的界面（由一個(gè)頂級窗口和幾個(gè)子窗口組成的界面），可以在菜單 Edit->User

Interface Mode 中選擇 Docked Window 來(lái)切換界面。上圖顯示的就是 MDI-style 的界面風(fēng)格。

2、開(kāi)始學(xué)習

在這個(gè)小節中，我們將使用 Qt Designer 來(lái)生成一個(gè)對話(huà)框： Go-to-cell。對話(huà)框如下圖

所示。

不管我們是使用 Qt Designer 還是編碼來(lái)實(shí)現一個(gè)對話(huà)框，都包括以下相同的步驟：

1）、創(chuàng )建并初始化子窗口部件。

2）、將子窗口部件放置到布局當中。

3）、對 Tab 的順序進(jìn)行設置。

4）、放置信號和槽的連接。

5）、完成對話(huà)框的通用槽的功能。

現在開(kāi)始工作。首先在 Qt Designer 的菜單中選擇“File->New Form”。程序將彈出一

個(gè)窗口如下：

可以看到在窗口左上方有一個(gè)“templates\forms”的菜單，下面有四個(gè)可供選擇的模板。

第一個(gè)和第二個(gè)都是對話(huà)框，區別在于對話(huà)框中按鈕的位置不同。第三個(gè)是主窗口，第四

個(gè)是窗口部件。本例中我們需要選擇第四個(gè)選項（Widget）。 現在你應該可以看到 Qt Designer

為你生成了一個(gè)窗口，標題欄是“Untitled”（也許你覺(jué)得第一個(gè)模板更加適合我們的例子，

不過(guò)，在這里，我們將手動(dòng)添加“OK”和“Cancel”這兩個(gè)按鈕）。

我們按照上面講過(guò)的順序來(lái)設計這個(gè)窗口。首先需要生成子窗口部件并將它們放置

在工作臺上。在 Qt Designer 工作界面的左側，我們可以看到很多程序設計經(jīng)常用到的窗口

部件。如果你需要它們中的那一個(gè)，用鼠標把它拖到工作臺上就可以了。我們在菜單“Display

Widgets”中選擇一個(gè)“Label”，在菜單“Input Widgets”中選擇一個(gè)“Line Edit”，在菜單

“Spacers”中選擇一個(gè)“Horizontal Spacer”（這個(gè)空白組件在最終形成的窗口中是不可見(jiàn)的，

在 Qt Designer 中，空白組件的樣子就像是一個(gè)藍色的彈簧），在菜單“Buttons”中選擇兩個(gè)

“Push Button”。按照下圖的位置，將它們擺放起來(lái)。

你可以看到，我們的工作界面顯的太大了一些，可以用鼠標拉住邊框讓它改變大小，

直到你滿(mǎn)意為止。一個(gè)類(lèi)似下圖的組件是不是已經(jīng)出現了？記住不要花費太多的時(shí)間來(lái)擺放

這些窗口部件的位置，只要大概類(lèi)似就可以了，因為他們并不是不可調整的。Qt 的布局管

理器將會(huì )對他們的位置和大小自動(dòng)進(jìn)行一些優(yōu)化。

現在我們已經(jīng)創(chuàng )建了這些子窗口部件，并把他們放置在了合適的位置，接下來(lái)要做

的就是初始化他們。這需要設定這些子窗口的屬性。在 Qt Designer 工作界面的右側也同樣

有一些窗口，這些就是屬性窗口。 可以在這些窗口中找到所有部件需要設置的屬性，并更改

它們，就可以達到我們的目的了。

1）、點(diǎn)擊 TextLabel，確認它的“objectName”屬性是“label”，然后將它的“text”屬

性設置為“&Cell Location”。

2）、點(diǎn)擊 line editor （窗口中的空白編輯框），確認它的“objectName”屬性是“lineEdit”。

3）、點(diǎn)擊第一個(gè)按鈕（左側），將其“objectName”屬性設置為“OKButton”，“enable”

屬性設置為“false”，“text”屬性設置為“OK”，“default”屬性設置為“true”。

4)、點(diǎn)擊第二個(gè)按鈕（右側），將其“objectName”屬性設置為“cancelButton”，“text”

屬性設置為“Cancel”。

5)、點(diǎn)擊工作平臺的背景，這樣我們可以選擇整個(gè)的界面。這也是一個(gè)窗口，也擁有

自己的屬性。我們把它的“objectName”屬性設置為“GoToCellDialog”，“windowtTitle”屬

性設置為“Go to Cell”。

完成后的 Form 變成了下圖的形式：

接下來(lái)我們給 Label 設置一個(gè)伙伴（buddy），在這個(gè)例子中， Label 的伙伴當然是后面

的字符編輯框 line editor。在 Qt Designer 的菜單中進(jìn)行選擇：Edit->Edit Buddies。這樣我們

進(jìn)入 Buddy 模式，可以設置子窗口的伙伴了。點(diǎn)擊 Label，Label 將會(huì )變成紅色的，同時(shí)出

現一條線(xiàn)，將這條線(xiàn)拖拽到后面的 line editor 上，然后松開(kāi)。這時(shí)兩個(gè)窗口都將變成紅色的，

中間有一條紅線(xiàn)相連。移動(dòng)鼠標到別處并點(diǎn)擊，窗口將變成藍色的。這說(shuō)明我們已經(jīng)設置成

功了（如果設置錯誤，則可以用鼠標在連接窗口的線(xiàn)條上點(diǎn)擊，這時(shí)相連的窗口又會(huì )變成紅

色的，此時(shí)按 Delete 鍵就可以取消設置）。選擇：Edit->Edit Widget，可以退出這個(gè)模式，回

到主菜單中。如下圖所示：

接下來(lái)我們對工作臺上的各個(gè)子窗口進(jìn)行布局：

1）、 點(diǎn)擊標簽“Cell Location”，按住 Shift 鍵，再點(diǎn)擊后面的字符編輯框“line editor”，

這樣它們兩個(gè)窗口被同時(shí)選中。選擇菜單：Form->Lay Out Horizontally。這樣這兩個(gè)窗口將

被一個(gè)紅色邊框的矩形包圍。

2）點(diǎn)擊空白子窗口“Spacer”，按住 Shift 鍵，再點(diǎn)擊后面的兩個(gè)按鈕，同時(shí)選定這三

個(gè)窗口，然后選擇菜單：Form->Lay Out Horizontally。這樣這三個(gè)窗口將被一個(gè)紅色邊框的

矩形包圍。

3）、點(diǎn)擊工作平臺的背景，取消任何已經(jīng)選擇的組件，然后選擇：Form->Lay Out

Vertically。這樣我們可以將第 1 步和第 2 步所生成的兩個(gè)水平布局進(jìn)行垂直布局。

4）、選擇菜單：Form->Adjust Size。這樣我們可以調整主窗口的大小。最后效果如下