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

一、概述

Qt 容許程序員不經過任何設計工具，以純粹的 C++代碼來設計一個程序。可是更多的

程序員更加習慣於在一個可視化的環境中來設計程序，尤爲是在界面設計的時候。這是由於

這種設計方式更加符合人類思考的習慣，也比書寫代碼要快速的多。

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

如上圖所示。Qt 設計器能夠用來開發一個應用程序所有或者部分的界面組件。以 Qt 設計器

生成的界面組件最終被變成 C++代碼，所以 Qt 設計器能夠被用在一個傳統的工具鏈中，並

且它是編譯器無關的。

在不一樣的平臺上啓動 Qt Designer 的方式有必定差異。在 Windows 環境下你能夠在「開

始->程序->Qt」這個組件中找到 Qt Designer 的圖標並點擊；在 Unix 環境下，在命令行模式

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

默認狀況下，Qt Designer 的用戶界面是由幾個頂級的窗口共同組成的。若是你更習慣

於一個 MDI-style 的界面（由一個頂級窗口和幾個子窗口組成的界面），能夠在菜單 Edit->User

Interface Mode 中選擇 Docked Window 來切換界面。上圖顯示的就是 MDI-style 的界面風格。

二、開始學習

在這個小節中，咱們將使用 Qt Designer 來生成一個對話框： Go-to-cell。對話框以下圖

所示。

無論咱們是使用 Qt Designer 仍是編碼來實現一個對話框，都包括如下相同的步驟：

1）、建立並初始化子窗口部件。

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

3）、對 Tab 的順序進行設置。

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

5）、完成對話框的通用槽的功能。

如今開始工做。首先在 Qt Designer 的菜單中選擇「File->New Form」。程序將彈出一

個窗口以下：

能夠看到在窗口左上方有一個「templates\forms」的菜單，下面有四個可供選擇的模板。

第一個和第二個都是對話框，區別在於對話框中按鈕的位置不一樣。第三個是主窗口，第四

個是窗口部件。本例中咱們須要選擇第四個選項（Widget）。 如今你應該能夠看到 Qt Designer

爲你生成了一個窗口，標題欄是「Untitled」（也許你以爲第一個模板更加適合咱們的例子，

不過，在這裏，咱們將手動添加「OK」和「Cancel」這兩個按鈕）。

咱們按照上面講過的順序來設計這個窗口。首先須要生成子窗口部件並將它們放置

在工做臺上。在 Qt Designer 工做界面的左側，咱們能夠看到不少程序設計常常用到的窗口

部件。若是你須要它們中的那一個，用鼠標把它拖到工做臺上就能夠了。咱們在菜單「Display

Widgets」中選擇一個「Label」，在菜單「Input Widgets」中選擇一個「Line Edit」，在菜單

「Spacers」中選擇一個「Horizontal Spacer」（這個空白組件在最終造成的窗口中是不可見的，

在 Qt Designer 中，空白組件的樣子就像是一個藍色的彈簧），在菜單「Buttons」中選擇兩個

「Push Button」。按照下圖的位置，將它們擺放起來信盈達企鵝要妖氣嗚嗚吧九林就要。

你能夠看到，咱們的工做界面顯的太大了一些，能夠用鼠標拉住邊框讓它改變大小，

直到你滿意爲止。一個相似下圖的組件是否是已經出現了？記住不要花費太多的時間來擺放

這些窗口部件的位置，只要大概相似就能夠了，由於他們並非不可調整的。Qt 的佈局管

理器將會對他們的位置和大小自動進行一些優化。

如今咱們已經建立了這些子窗口部件，並把他們放置在了合適的位置，接下來要作

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

有一些窗口，這些就是屬性窗口。 能夠在這些窗口中找到全部部件須要設置的屬性，並更改

它們，就能夠達到咱們的目的了。

1）、點擊 TextLabel，確認它的「objectName」屬性是「label」，而後將它的「text」屬

性設置爲「&Cell Location」。

2）、點擊 line editor （窗口中的空白編輯框），確認它的「objectName」屬性是「lineEdit」。

3）、點擊第一個按鈕（左側），將其「objectName」屬性設置爲「OKButton」，「enable」

屬性設置爲「false」，「text」屬性設置爲「OK」，「default」屬性設置爲「true」。

4)、點擊第二個按鈕（右側），將其「objectName」屬性設置爲「cancelButton」，「text」

屬性設置爲「Cancel」。

5)、點擊工做平臺的背景，這樣咱們能夠選擇整個的界面。這也是一個窗口，也擁有

本身的屬性。咱們把它的「objectName」屬性設置爲「GoToCellDialog」，「windowtTitle」屬

性設置爲「Go to Cell」。

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

接下來咱們給 Label 設置一個夥伴（buddy），在這個例子中， Label 的夥伴固然是後面

的字符編輯框 line editor。在 Qt Designer 的菜單中進行選擇：Edit->Edit Buddies。這樣咱們

進入 Buddy 模式，能夠設置子窗口的夥伴了。點擊 Label，Label 將會變成紅色的，同時出

現一條線，將這條線拖拽到後面的 line editor 上，而後鬆開。這時兩個窗口都將變成紅色的，

中間有一條紅線相連。移動鼠標到別處並點擊，窗口將變成藍色的。這說明咱們已經設置成

功了（若是設置錯誤，則能夠用鼠標在鏈接窗口的線條上點擊，這時相連的窗口又會變成紅

色的，此時按 Delete 鍵就能夠取消設置）。選擇：Edit->Edit Widget，能夠退出這個模式，回

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

接下來咱們對工做臺上的各個子窗口進行佈局：

1）、 點擊標籤「Cell Location」，按住 Shift 鍵，再點擊後面的字符編輯框「line editor」，

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

被一個紅色邊框的矩形包圍。

2）點擊空白子窗口「Spacer」，按住 Shift 鍵，再點擊後面的兩個按鈕，同時選定這三

個窗口，而後選擇菜單：Form->Lay Out Horizontally。這樣這三個窗口將被一個紅色邊框的

矩形包圍。

3）、點擊工做平臺的背景，取消任何已經選擇的組件，而後選擇：Form->Lay Out

Vertically。這樣咱們能夠將第 1 步和第 2 步所生成的兩個水平佈局進行垂直佈局。

4）、選擇菜單：Form->Adjust Size。這樣咱們能夠調整主窗口的大小。最後效果以下

圖（圖中的紅線在程序最終生成的時候不會被顯示）：

而後咱們對 Tab 的順序進行設置。選擇菜單：Edit->Edit Tab Order。一個帶有數字的

藍色矩形會顯示在每個窗口部件上（因爲咱們將 Label 和 line editor 設置爲 buddy，這樣

它們在指定 Tab 的時候被視爲一個組件）。點擊這些帶數字的矩形能夠調整到你想要的順序

上，而後選擇:Edit->Edit Widgets 離開這個模式。

如今咱們的對話框的外形已經完成了。選擇菜單：Form->Preview。這樣你能夠預覽我

們設計的窗口。能夠反覆按下 Tab 鍵來驗證順序是否和咱們設置的一致。點擊頂部的關閉按

鈕就能夠關閉這個預覽窗口。