## 5.1 使用 Qt Designer 進行 GUI 設計 ### 5.1.1 簡介 Qt Designer，又被稱作是 Qt 設計師，是一個所見即所得的全方位 GUI 構造器，它所 設計出來的用戶界面能夠在多種平臺上使用。它是 Qt SDK 的一部分，也是最為重要的開發 工具之一。利用 Qt Designer，我們可以拖放各種 Qt 控件構造圖形用戶界面并可預覽效 果。 通常一個 Qt Designer 的樣子如圖 5-1 所示。  圖 5-1 Qt Designer 的觀感 使用 Qt Designer，開發人員既可以創建“對話框”樣式的應用程序、又可以創建帶有菜單、工具欄、氣球幫助以及其他標準功能的 “主窗口”樣式的應用程序。Qt Designer 提供了多種窗體模板，開發人員可以創建自己的模板，確保某一應用程序或某一系列應用程序界面的一致性。編程人員可以創建自己的自定義窗體，這些窗體可以輕松與 Qt Designer集成。 Qt Designer 支持采用基于窗體的方式來開發應用程序。窗體是由用戶界面 (.ui) 文 件來表示的，這種文件既可以轉換成 C++ 并編譯成一個應用程序，也可以在運行時加以處 理，從而生成動態用戶界面。Qt 的構建系統能將用戶界面的編譯構建過程自動化，使設計 過程更輕松。 Qt Designer 可以輕松的與許多常見的 IDE 集成 Windows 平臺的商業許可證持有人可 以在 Microsoft Visual Studio? 內充分享受到 Qt Designer 用戶界面設計所帶來的便 利。在 Mac OS X 中，開發人員則可在 Apple's Xcode? 環境內使用 Qt Designer。另外， Nokia 還為跨平臺的 Eclipse 集成環境開發了 Qt 的集成插件，以將 Qt Designer 及其他 Qt 技術嵌入到集成環境框架中。 ### 5.1.2 啟動并設置 Qt Designer 要運行 Qt Designer，在 Windows 下，可單擊“開始”菜單中的“Qt SDK by Nokia v2009.3(Open Source) | designer”；在 UNIX 下，可在命令行終端中輸入 designer 命 令；在 Mac OS X Finder 中，只需雙擊 designer 即可。以 Linux 系統為例，啟動 Qt Designer 通常有 2 種方法： 1\.程序組啟動 一般的，如果你的 Qt 是采用發行版已經編譯好的 Qt 包的話，安裝完畢后就已經在程 序組中設置了鏈接項，一般是在【開發】或是在【編程】組中。以筆者的 Red Flag 為例， 依次點擊【應用程序】→【開發】→【Qt】→【Qt4 Designer–Interface Designer】 后，Qt Designer 就會啟動了。 2\.命令行啟動 如果你是自己采用編譯源代碼的方式安裝 Qt，并且沒有設置快捷方式的話，你可以從 命令行啟動 Qt Designer。方法是進入到命令行方式，或者打開一個終端，進入你 Qt 安裝 的目錄，以筆者的 Red Flag 為例，進入 /usr/bin/目錄，輸入 ./designer-qt4，即可啟 動 Qt Designer。 注意，不同的 Linux 發行版的菜單設置以及可執行文件命名可能會有所不同。 3.設置 Qt Designer啟動 Qt Designer 后，首先需要需要對它進行設置。 Qt Designer 支持兩種界面排列形式：一種是多個頂極窗口并列分布形式；一種是與Windows 上常見的 IDE 類似的單窗口（即多停靠窗錨接）形式。 多個頂級窗口的樣子如圖 5-2 所示，Qt Designer 的各個子窗口都作為獨立的頂級窗口 排列在屏幕中，用戶可以自由改變其位置和尺寸大小。  圖 5-2 處于“多個頂級窗口”模式下的 Qt Designer 錨接窗口模式下的 Qt Designer 的樣子如圖 5-3 所示。  圖 5-3 處于“錨接的窗口” 模式下的 Qt Designer 在 Qt4.5 版以前，Qt Designer 默認情況下以多個頂極窗口并列的形式顯示，在 Qt4.5 之后，默認是錨接窗口的形式。這一改動受到了大多數開發者的歡迎，因為大家還是習慣使 用錨接窗口的界面布局形式。 如果你想變更 Qt Designer 的界面布局形式，在主菜單上依次選擇【設置 】→【屬性】→【外觀】→【錨接的窗口/多個頂極窗口】即可。 ### 5.1.3 功能說明 1\.界面布局 Qt Designer 主要由窗口部件盒、對象查看器、屬性編輯器、資源瀏覽器、動作編輯器 和信號/槽編輯器組成，它們都是錨接窗口，通常排列在窗體的兩側，也可以定制它們的位 置。如圖所示，界面中間是新建立的窗體。  圖 5-4 Qt Designer 的布局 2\.功能項說明 表 5-1 示出了 Qt Designer 主菜單項的功能說明。 表 5-1 菜單項功能說明 | 菜單項 | 說明 | | --- | --- | | 文件 | 提供文件的新增、讀取、存儲、打印以及退出 Qt Designer 等命令 | | 編輯 | 提供數據的剪貼、復制、查找，光標的跳轉、代碼補全；編輯窗口部件、編輯信號/槽、伙伴、Tab 順序等命令 | | 窗體 | 提供窗體屬性設定、布局設置、調整 大小、預覽等命令 | | 視圖 | 提供各種配置窗口、工具欄等的顯示和隱藏設置等命令 | | 設置 | 提供窗體屬性設定，附加字體設定等命令 | | 窗口 | 提供窗口的切換以及最小化等命令 | | 幫助 | 提供調用 Qt Asssistant 等幫助命令 | 表 5-2 示出了文件工具欄功能說明。 表 5-2 文件工具欄功能說明 | 名稱與圖標 | 功能 | | --- | --- | |  | 新建窗體 | |  | 打開窗體 | |  | 保存窗體 | 表 5-3 示出了編輯工具欄功能說明。 表 5-3 編輯工具欄功能說明 | 名稱與圖標 | 功能 | | --- | --- | |  | 撤銷上一次操作 | |  | 恢復操作 | |  | 剪切 | |  | 復制 | |  | 粘貼 | |  | 放到后面 | |  | 放到前面 | |  | 編輯窗口部件 | |  | 編輯信號/槽 | |  | 編輯伙伴 | |  | 編輯標簽順序 | 表 5-4 示出了窗體布局工具欄功能說明。 表 5-4 窗體布局工具欄功能說明 | 名稱和圖標 | 功能 | | --- | --- | |  | 設置為水平布局 | |  | 設置為垂直布局 | |  | 設置為分裂器水平布局 | |  | 設置為分裂器垂直布局 | |  | 設置為柵格布局 | |  | 設置為表單布局 | |  | 打破布局 | |  | 調整大小; | 3\.主要部件的使用 窗口部件盒（Widget Box） 窗口部件盒是 Qt Designer 為使用者提供的窗口部件集合，根據你安裝的 Qt 包的版本 和種類的不同，窗口部件盒中部件的種類也不盡相同，通常有 Layouts、Spacers、 Buttons、Items Widgets(Model-Based)、Item Widgets(Item-Based)、Containers、Input Widgets、Display Widgets 等大類。 以筆者使用的 Qt4.5.2 開源版為例，通常一個窗口部件盒的樣子如圖 5-5 所示  圖 5-5 窗口部件盒 使用窗口部件盒的方法是用左鍵選中某一個部件，將它拖動到你的窗體屏幕上去，并 釋放鼠標左鍵，這樣就在界面上添加了這個部件。 屬性編輯器（Property Editor） 屬性編輯器是另一個非常重要的組件，當我們將界面上的窗體放置好后，就需要對各個組件的屬性進行設置，通常一個屬性編輯器的樣子如圖 5-6 所示。  圖 5-6 屬性編輯器 屬性編輯器的使用也是非常簡單的，使用者點擊界面上的某一個部件，然后在屬性編 輯器中設置屬性即可，屬性編輯器中屬性欄的項目都是以英文來顯示的，只要你對常用的計 算機編程中的英文詞匯有所了解，理解它們的意思并正確的設置屬性并不難。我們會在后面 結合具體實例為大家講解。 對象查看器（Object Inspector） 對象查看器用來查看和設置窗體中的各個對象及其屬性。  圖 5-7 對象查看器 對象查看器通常與屬性編輯器配合使用，一般是在設置好界面元素后，在對象查看器 中查閱各個元素的分布以及總體的布局情況，然后選中其中某個窗口部件，切換到屬性編輯 器中編輯它的屬性。 Qt Designer 還有幾個重要的部件如資源瀏覽器、動作編輯器、信號 /槽編輯器等，我 們將在下面各節以及后面的各章中結合實例為大家介紹。 ### 5.1.4 Qt GUI 設計基本流程 使用 Qt Designer 設計窗體十分簡單,一般遵循如下的步驟。 第 1 步，啟動 Qt Designer，選擇要創建的應用類型。 啟動 Qt Designer 后，將出現如圖 5-8 所示的新建窗體對話框。  圖 5-8 新建窗體對話框 Qt 4.5 默認為使用者提供了 3 大類模板供選擇，即常見的窗口模板（templates\forms）、窗口部件盒自定義窗口部件。我們最為常用的是第 1 大類，其中包 括了對話框、主窗口和普通窗口部件等幾種應用類型模板。這里我們以最后一項 Widget 為 例，選中它，再點擊【創建】按鈕，一個空白的 Widget 就創建好了,如圖 5-9 所示。  圖 5-9 創建 Widget 類型界面 第 2 步，將控件從窗口部件盒拖到窗體上，然后使用標準編輯工具來選擇、剪切、粘 貼窗體并重新調整大小。以圖 5-10 為例說明，我們從窗口部件盒里面，拖動出 2 個 Label、2 個 LineEdit、1 個 PushButton 和 1 個 Horizontal Spacer，大致排列一下放在窗體上。  圖 5-10 添加窗口部件 第 3 步，使用屬性編輯器來更改窗體和每個控件的屬性。 基本的屬性包括窗口部件的 objectName、text 以及大小位置等。在表 5-5 中列出 了這幾個窗口部件的常見屬性設置，這里我僅僅舉出 objectName 和 text 這兩個最為 常用的屬性，其它的屬性設置與此類似。這樣設置完成后的界面大致如圖 5-11 所示的 樣子。 表 5-5 窗口部件的屬性設置 | 部件類別 | objectName | text(WindowTitle) | | --- | --- | --- | | Widget | myForm | 布局示例 | | Label | label_name | 姓名 | | Label | label_phone | 電話 | | LineEdit | lineEdit_name | 無 | | LineEdit | lineEdit_phone | 無 | | Horizontal Spacer | horizontalSpacer | 無 | | PushButton | pushButton_ok | 確定 |  圖 5-11 設置好部件屬性的窗體 第 4 步，保存窗口設置，按下 Ctrl+Shift+S 組合鍵，在彈出的如圖 5-12 所示的【窗 體另存為】對話框中輸入文件名，然后點擊保存按鈕。  圖 5-12 保存窗體 第 5 步，設置界面布局。 與我們習慣的在 MS Visual Studio 中不同，Qt Designer 在設計界面時時，不必 刻意手工調整窗體的大小和精確位置，我們只需選中窗體，并對它們運用布局。例 如，您可以選中一些按鈕控件，并通過選擇 【水平布局】選項將它們水平并列排放。 采用這種方法，可以使設計更快速，設計完成后，控件會根據最終用戶需要的窗體大 小正確縮放。 在 Qt 4.5 中，常見的窗體布局有 6 種，表 5-6 示出了這些布局的種類和功用。 表 5-6 常見的布局類型 | 布局類型 | 作用 | | --- | --- | | 水平布局 | 按規則水平排列布局內的窗口部件 | | 垂直布局 | 按規則垂直排列布局內的窗口部件 | | 分裂器水平布局 | 按規則水平排列布局內的窗口部件，并將整體作為一個水平分裂器 | | 分裂器垂直布局 | 按規則垂直排列布局內的窗口部件，并將整體作為一個垂直分裂器 | | 柵格布局 | 按二維柵格的方式排列布局內的窗口部件 | | 窗體布局中布局 | 將布局內的窗體部件分成兩列，通常用于有輸出輸出的 GUI 場合 | 好了，有了上面的指導思想，回到我們的界面設計上來。我們同時按下 Ctrl 和 A鍵，這就選中了窗體上的所有部件，在它們上面點擊鼠標右鍵，在上下文菜單上依次 選擇【布局】->【柵格布局】，我們就選中柵格布局，這時界面情形如圖 5-13 所示，是不是比較美觀了。其實，這樣設置還是有一些問題存在，比如最好還要設置窗體的頂級布局（Top Level Layout）等。我們在后面再為大家詳細講解，這里不再深入討 論了。  圖 5-13 采用柵格布局后的效果 第 6 步，設置窗口部件的標簽順序。 說到標簽順序，大家可能聽起來有些糊涂，在 Windows 平臺上我們通常稱作焦點順序 或者 Tab 順序，顧名思義，就是按下 Tab 鍵時，窗口焦點在這些部件間的移動順序。 設置方法是點擊工具欄上的那個帶有數字圖標的按鈕，或者依次點擊主菜單的 【編 輯】->【編輯 Tab 順序】，這就進入了標簽設置模式，如圖 5-14 所示，窗體中各個具有獲 得焦點能力的部件上會出現一個藍色的小框，框內的數字表示該部件的標簽順序，即焦點順 序。我們可以通過單擊藍色小框來修改標簽順序，被點中的小框將變為紅色，完成設置后按 下 F3 鍵，切換回到編輯窗口部件模式。  圖 5-14 設置窗口部件的標簽（Tab）順序 第 7 步，設置信號與槽 按下 F4 鍵，或者依次點擊【編輯】->【編輯信號/槽】，進入編輯信號/槽模式，如圖5-15 所示。  圖 5-15 創建信號/槽 這時單擊【確定】按鈕，然后拖動鼠標，可以發現有一根紅色的類似接地線形狀的標志線被拖出，松開鼠標，彈出信號 /槽連接配置窗口，注意選中左下角的 【顯示從 Qwidget 繼承的信號和槽】按鈕，界面上將列出所有可以使用的信號和槽， 如圖 5-16 所示。  圖 5-16 連接信號/槽 在這個連接配置窗口的左側列出了【確定】按鈕的所有信號，右側列出了 myForm 這個 Widget 的所有槽，選擇按鈕的 clicked()信號和 myForm 的 close()槽，單擊【確定】按 鈕，完成設置，如圖 5-17 所示。  圖 5-17 完成信號/槽的連接 到此，有關 Designer 的操作就結束了，它將生成一個.ui 文件。 注意，Qt Designer 有 4 種編輯模式，即編輯窗口部件模式、編輯信號 /槽模式、編輯 伙伴模式和編輯 Tab 順序模式，其中編輯伙伴模式不常用到。 關于 Qt Designer 的使用，有非常豐富的內容，這里只是使大家有一個初步的感性認 識，在下面的各章中，筆者將結合具體實例向大家詳細的一一介紹。