Qt 設(shè)計(jì)器(Qt Designer)內(nèi)容總結(jié)

huangmeifang

1、概述
Qt 允許程序員不通過任何設(shè)計(jì)工具，以純粹的 C++代碼來設(shè)計(jì)一個(gè)程序。但是更多的
程序員更加習(xí)慣于在一個(gè)可視化的環(huán)境中來設(shè)計(jì)程序，尤其是在界面設(shè)計(jì)的時(shí)候。這是因?yàn)?br /> 這種設(shè)計(jì)方式更加符合人類思考的習(xí)慣，也比書寫代碼要快速的多。
Qt 也提供了這樣一個(gè)可視化的界面設(shè)計(jì)工具：Qt 設(shè)計(jì)器（Qt Designer）。其開始界面
如上圖所示。Qt 設(shè)計(jì)器可以用來開發(fā)一個(gè)應(yīng)用程序全部或者部分的界面組件。以 Qt 設(shè)計(jì)器
生成的界面組件最終被變成 C++代碼，因此 Qt 設(shè)計(jì)器可以被用在一個(gè)傳統(tǒng)的工具鏈中，并
且它是編譯器無關(guān)的。
在不同的平臺(tái)上啟動(dòng) Qt Designer 的方式有一定差別。在 Windows 環(huán)境下你可以在“開
始->程序->Qt”這個(gè)組件中找到 Qt Designer 的圖標(biāo)并點(diǎn)擊；在 Unix 環(huán)境下，在命令行模式
下輸入命令： “designer”；在 Mac Os 下，在 X    Finder 下雙擊 Designer 圖標(biāo)。
默認(rèn)情況下，Qt Designer 的用戶界面是由幾個(gè)頂級(jí)的窗口共同組成的。如果你更習(xí)慣
于一個(gè) MDI-style 的界面（由一個(gè)頂級(jí)窗口和幾個(gè)子窗口組成的界面），可以在菜單 Edit->User
Interface Mode 中選擇 Docked Window 來切換界面。上圖顯示的就是 MDI-style 的界面風(fēng)格。
2、開始學(xué)習(xí)
在這個(gè)小節(jié)中，我們將使用 Qt Designer 來生成一個(gè)對(duì)話框： Go-to-cell。對(duì)話框如下圖
所示。
不管我們是使用 Qt Designer 還是編碼來實(shí)現(xiàn)一個(gè)對(duì)話框，都包括以下相同的步驟：
1）、創(chuàng)建并初始化子窗口部件。
2）、將子窗口部件放置到布局當(dāng)中。
3）、對(duì) Tab 的順序進(jìn)行設(shè)置。
4）、放置信號(hào)和槽的連接。
5）、完成對(duì)話框的通用槽的功能。
現(xiàn)在開始工作。首先在 Qt Designer 的菜單中選擇“File->New Form”。程序?qū)�彈出�?br /> 個(gè)窗口如下：
可以看到在窗口左上方有一個(gè)“templates\forms”的菜單，下面有四個(gè)可供選擇的模板。
第一個(gè)和第二個(gè)都是對(duì)話框，區(qū)別在于對(duì)話框中按鈕的位置不同。第三個(gè)是主窗口，第四
個(gè)是窗口部件。本例中我們需要選擇第四個(gè)選項(xiàng)（Widget）。 現(xiàn)在你應(yīng)該可以看到 Qt Designer
為你生成了一個(gè)窗口，標(biāo)題欄是“Untitled”（也許你覺得第一個(gè)模板更加適合我們的例子，
不過，在這里，我們將手動(dòng)添加“OK”和“Cancel”這兩個(gè)按鈕）。
我們按照上面講過的順序來設(shè)計(jì)這個(gè)窗口。首先需要生成子窗口部件并將它們放置
在工作臺(tái)上。在 Qt Designer 工作界面的左側(cè)，我們可以看到很多程序設(shè)計(jì)經(jīng)常用到的窗口
部件。如果你需要它們中的那一個(gè)，用鼠標(biāo)把它拖到工作臺(tái)上就可以了。我們?cè)诓藛巍癉isplay
Widgets”中選擇一個(gè)“Label”，在菜單“Input Widgets”中選擇一個(gè)“Line Edit”，在菜單
“Spacers”中選擇一個(gè)“Horizontal Spacer”（這個(gè)空白組件在最終形成的窗口中是不可見的，
在 Qt Designer 中，空白組件的樣子就像是一個(gè)藍(lán)色的彈簧），在菜單“Buttons”中選擇兩個(gè)
“Push Button”。按照下圖的位置，將它們擺放起來。
你可以看到，我們的工作界面顯的太大了一些，可以用鼠標(biāo)拉住邊框讓它改變大小，
直到你滿意為止。一個(gè)類似下圖的組件是不是已經(jīng)出現(xiàn)了？記住不要花費(fèi)太多的時(shí)間來擺放
這些窗口部件的位置，只要大概類似就可以了，因?yàn)樗麄儾⒉皇遣豢烧{(diào)整的。Qt 的布局管
理器將會(huì)對(duì)他們的位置和大小自動(dòng)進(jìn)行一些優(yōu)化。
現(xiàn)在我們已經(jīng)創(chuàng)建了這些子窗口部件，并把他們放置在了合適的位置，接下來要做
的就是初始化他們。這需要設(shè)定這些子窗口的屬性。在 Qt Designer 工作界面的右側(cè)也同樣
有一些窗口，這些就是屬性窗口。 可以在這些窗口中找到所有部件需要設(shè)置的屬性，并更改
它們，就可以達(dá)到我們的目的了。
1）、點(diǎn)擊 TextLabel，確認(rèn)它的“objectName”屬性是“l(fā)abel”，然后將它的“text”屬
性設(shè)置為“&Cell Location”。
2）、點(diǎn)擊 line editor （窗口中的空白編輯框），確認(rèn)它的“objectName”屬性是“l(fā)ineEdit”。
3）、點(diǎn)擊第一個(gè)按鈕（左側(cè)），將其“objectName”屬性設(shè)置為“OKButton”，“enable”
屬性設(shè)置為“false”，“text”屬性設(shè)置為“OK”，“default”屬性設(shè)置為“true”。
4)、點(diǎn)擊第二個(gè)按鈕（右側(cè)），將其“objectName”屬性設(shè)置為“cancelButton”，“text”
屬性設(shè)置為“Cancel”。
5)、點(diǎn)擊工作平臺(tái)的背景，這樣我們可以選擇整個(gè)的界面。這也是一個(gè)窗口，也擁有
自己的屬性。我們把它的“objectName”屬性設(shè)置為“GoToCellDialog”，“windowtTitle”屬
性設(shè)置為“Go to Cell”。
完成后的 Form 變成了下圖的形式：
接下來我們給 Label 設(shè)置一個(gè)伙伴（buddy），在這個(gè)例子中， Label 的伙伴當(dāng)然是后面
的字符編輯框 line editor。在 Qt Designer 的菜單中進(jìn)行選擇：Edit->Edit Buddies。這樣我們
進(jìn)入 Buddy 模式，可以設(shè)置子窗口的伙伴了。點(diǎn)擊 Label，Label 將會(huì)變成紅色的，同時(shí)出
現(xiàn)一條線，將這條線拖拽到后面的 line editor 上，然后松開。這時(shí)兩個(gè)窗口都將變成紅色的，
中間有一條紅線相連。移動(dòng)鼠標(biāo)到別處并點(diǎn)擊，窗口將變成藍(lán)色的。這說明我們已經(jīng)設(shè)置成
功了（如果設(shè)置錯(cuò)誤，則可以用鼠標(biāo)在連接窗口的線條上點(diǎn)擊，這時(shí)相連的窗口又會(huì)變成紅
色的，此時(shí)按 Delete 鍵就可以取消設(shè)置）。

技術(shù)交流可以加黃工QQ2685896890