## 7.3 快速設計對話框 （續上面的例子，使用 Qt Designer 設計界面） 在這一節中將通過使用 Qt Designer 來創建與上一節相同的可擴展對話框 ，并且使用 Qt Creator 作為 IDE 來管理這個工程。 我們將在 Qt Designer 中創建這個對話框的擴展外觀，并且在運行時根據需要隱藏 擴 展信息。這個窗口看起來有些復雜，但在 Qt Designer 中可以輕易的完成它。 第 1 步，新建 Qt Creator 工程。 首先啟動 Qt Creator，依次單擊菜單項【File】->【New】，在彈出的對話框中選擇工 程類型為【Empty Qt4 Project】，如圖 7-3 所示。點擊【Next】按鈕進入下一步。  圖 7-3 創建新工程 然后，像圖 7-4 那樣設置工程名稱和存放的路徑（根據自己的情況調整）。點擊【Next】按鈕進入下一步。  圖 7-4 設置項目名稱和存放的位置 在彈出的如圖 7-5 所示的對話框中，點擊【Finish】按鈕完成工程的創建。  圖 7-5 完成工程的創建 第 2 步，啟動 Qt Designer，新建窗體。 依次單擊菜單【File】->【New Form】，如圖 7-6 所示，在【新建窗體】對話框中選 擇【Dialog without Buttons】模板。  圖 7-6 第 2 步 新建窗體 第 3 步，創建【基本信息】窗體的界面元素。 創建一個 GroupBox 部件，使它足夠大，將它的 objectName 屬性修改為 basicGroupBox，將它的 title 屬性設置為 Basic。 接下來在 basicGroup 部件的內部創建下述的各個部件。 創建【Name】和【Sex】標簽，使它們上下排列，將它們的 objectName 屬性分別設置為 nameLabel 和 sexLabel，將它們的 text 屬性分別設置為 Name 和 Sex。 再創建 Name 標簽對應的編輯框，從窗口部件盒中拖出 LineEdit 控件。把它的 objectName 屬性設置為 nameLineEdit。 創建 Sex 標簽對應的組合框，從窗口部件盒中拖出 ComboBox 窗口部件，把它的 objectName 屬性設置為 sexComboBox。 接下來為 Sex 標簽對應的組合框創建列表項，方法是雙擊該組合框，如圖 7-7 所示，在【編輯組合框】對話框中添加。  圖 7-7 編輯組合框 創建【OK】按鈕并把它拖放到【Sex】標簽的下方。將它的 objectName 屬性修改為 okButton，并將它的 defaults 屬性設置為 true。 創建【Detail】按鈕并將它拖放到 OK 按鈕的水平右方，將它的 objectName 屬性修改 為 detailButton,并將它的 defaults 屬性設置為 true。 接下來，再創建一個垂直分隔符并把它拖放到 【Basic】分組框的下方。 不必刻意調整各個窗口部件的位置，只需大致排列一下即可。布置好后的情形如圖 7-8所示。  圖 7-8 第 3 步 創建基本信息窗體的界面元素 第 4 步，設置【基本信息】窗體的布局。 單擊【OK】按鈕，按下 Shift 鍵后再單擊【Detail】按鈕，然后單擊工具欄上的【Lay Out Horizontally】按鈕，設置一個水平布局。 選中【Name】和【Sex】標簽，以及它們對應的 LineEdit 窗口部件，然后單擊工具欄 上的【Lay Out In a Form】按鈕，設置為表單布局。 最后點擊【Basic】分組框，然后單擊工具欄上的【Lay Out Vertically】按鈕，設置一個垂直布局。 設置到這里的界面情形如圖 7-9 所示。  圖 7-9 第 4 步 基本信息界面布局 第 5 步，創建【擴展信息】窗體界面元素。 拖動窗體的右下角，使其足夠高和寬，以便能夠容納所有的界面元素。 創建一個 GroupBox 部件，使它足夠大，將它的 objectName 屬性修改為 extensionGroupBox，將它的 title 屬性設置為 Extension。 像創建【基本信息】窗體界面元素那樣，依次創建 Age 標簽、Department 標簽、 Address 標簽以及和它們對應的 LineEdit 和 ComboBox，并把它們放入到 extensionGroupBox 分組框之中。 為 Department 標簽對應的 ComboBox 添加列表項。 這樣設置后的界面情形如圖 7-10 所示。  圖 7-10 第 4 步 設置【擴展信息】窗體界面元素。 第 6 步，設置【擴展信息】窗體布局。 選中【Age】、【Department】和【Adress】標簽，以及它們對應的編輯框、組合框窗 口部件，然后單擊工具欄上的【Lay Out In a Form】按鈕，設置為表單布局。 選中【Extension】分組框，然后單擊工具欄上的【Lay Out Vertically】按鈕，設置 為垂直布局，如圖 7-11 所示。  圖 7-11 第 6 步 設置【擴展信息】信息窗體布局 第 7 步，設置窗體的頂級（Top Level）布局。 用鼠標左鍵點擊窗體，注意不要選中任何窗口部件，然后單擊工具欄上的 【Lay Out Vertically】按鈕，設置窗體的頂級布局為一個垂直布局，如圖 7-12 所示。  圖 7-12 第 7 步 設置窗體的頂級布局 小貼士：如果沒能生成你所希望的那種布局效果，或者是不小心做錯了，那么總是可以隨時先通過單擊菜單項【Edit】->【Unto】，或者是【Form】->【Break Layout】，然后再重 新放置這些要擺放的窗口部件，最后試著對它們重新布局，直到滿意為止。 第 8 步，設置 Tab 順序。 單擊菜單項【編輯】->【編輯 Tab 順序】，或者點擊工具欄上對應的按鈕，像圖 7-13 所示那樣編輯 Tab 順序。  圖 7-13 第 8 步 設置 Tab 順序 第 9 步，設置信號/槽 按下 F3 鍵，離開 Tab 順序設置模式，進入窗口編輯模式。 現在，窗體設計已經完成，可以開始著手設置一些信號 /槽的連接來實現窗體的功能了。Qt Designer 允許我們在構成同一窗體的不同部分內的窗口部件之間建立連接。我們需要建立兩個連接。 單擊菜單項【編輯】->【編輯信號/槽】，或者按下 F4 鍵，進入 Qt Designer 的信號- 槽連接設置模式。窗體中各個窗口部件之間的連接用藍色箭頭表示，如圖 7-14 所示。并且 它們也會同時在 Qt Designer 的信號/槽編輯器窗口中顯示出來。  圖 7-14 窗體中各個部件的連接是藍色的線 小貼士：要在兩個窗口部件之間建立連接，可以單擊作為發射器的窗口部件并且拖動所產 生的紅色箭頭線到作為接收器的窗口部件上，然后松開鼠標按鍵。這時會彈出一個對話框， 可以從中選擇建立連接的信號和槽。 要建立的第一個連接位于 okButton 按鈕和窗體的 accept()槽之間。把從 okButton 按 鈕開始的紅色箭頭線拖動到窗體的空白區域，然后松開按鍵，這樣會彈出圖所示的設置連接 對話框（Configure Connection dialog）。從該對話框中選擇 clicked()作為信號，選擇 accept()作為槽，然后單擊 OK 按鈕，如圖 7-15 所示。  圖 7-15 連接按鈕的 clicked()信號和窗體的 accept()槽 要建立的第 2 個連接位于【Detail】按鈕和【extensionGroupBox】群組框之間。在這 兩個窗口部件之間拖動紅色箭頭線，然后選擇 toggled(bool)作為信號，選擇 setVisible(bool)作為槽，如圖 7-15 所示。  圖 7-15 連接按鈕的 toggled(bool)槽和分組框的 setVisible(bool)槽 小貼士：默認情況下，setVisible(bool)槽不會顯示在 Qt Designer 的槽列表中，但是選 中了【顯示從 Qwidget 繼承的信號和槽】選項，就可以看到這個槽了。 最后設置完成的信號和槽如圖 7-16 所示。  圖 7-16 設置完成的信號和槽的情形 第 10 步，保存文件。 將這個對話框保存在前面建立的工程目錄下，即 extensionDlgDesigner 目錄里面，文 件名為 extensionDlgDesigner.ui。接下來要給這個窗體添加代碼，將使用多重繼承的方法。 首先用如下內容創建一個 extensionDlg.h 文件： ``` #ifndef EXTENSIONDLG_H #define EXTENSIONDLG_H #include <QDialog> #include "ui_extensionDlg.h" Class ExtensionDlg:public QDialog,public Ui::Dialog { Q_OBJECT public: ExtensionDlg(QWidget *parent = 0); }; #endif ``` 這里采用的是多重繼承的方法，而 Q_OBJECT 宏則是必需的，并且要放在類聲明體內最為靠前的地方。 然后再創建 extension.cpp 文件，以下是其內容： ``` #include <QtGui> #include "extensionDlg.h" ExtensionDlg::ExtensionDlg(QWidget *parent) :QDialog(parent) { setupUi(this); this->extensionGroupBox->hide(); mainVerticalLayout->setSizeConstraint(QLayout::SetFixedSize); } ``` 第 1 行調用 setupUi()函數初始化窗體界面元素的布局。 第 2 行表示隱藏了擴展信息窗體，直到用戶點擊了 【Detail】按鈕才顯示出來。 第 3 行把窗體布局的 sizeConstraint 屬性設置為 QLayout::SetFixedSize，這樣會使 用戶不能再重新修改這個對話框窗體的大小。前面也講過，這樣一來，布局就會負責對話框 重新定義大小的職責，并且也會在顯示或者隱藏子窗口部件的時候自動重新定義這個對話框 的大小，從而可以確保對話框總是能以最佳的尺寸顯示出來。 最后用下面的代碼創建 main()函數，主要就是顯示這個對話框。 ``` #include "extensionDlg.h" #include <QApplication> int main(int argc,char *argv[]) { QApplication app(argc,argv); ExtensionDlg *dlg = new ExtensionDlg; dlg->show(); return app.exec(); } ``` 添加完這些文件后，可以看看工程文件 extensionDlgDesigner.pro 的內容，這是 Qt Creator 根據程序的情況自動為我們添加好的。 ``` HEADERS += extensionDlg.h SOURCES += extensionDlg.cpp \ main.cpp FORMS += extensionDlgDesigner.ui ``` 程序最后的運行效果如圖 7-17 所示，可以看出與手動編寫代碼的情形是一致的。  圖 7-17 程序運行效果 到此，關于擴展對話框的構建就講解完了。設計一個擴展對話框并不比設計一個簡單 對話框困難：所需要的就是一個切換按鈕、一些信號 -槽連接以及一個不可以改變尺寸大小 的布局。 小貼士：在實際的應用程序中，控制擴展對話框的按鈕通常會在只顯示了基本對話框時顯 示為 Advanced>>，而在顯示了擴展對話框時才顯示為 Advanced<<。這在 Qt 中非常容易實 現，只需在單擊這個按鈕時調用 QPushButton 的 setText()函數即可。 通過這個例子，我們講述了通過子類化構建自定義對話框的方法，以及使用 Qt Designer 輔助設計對話框的方法，在工程實踐中，這兩種方法往往是結合使用的。 擴展閱讀：在 Qt 中，無論是使用手工編碼的方式還是使用 Qt Designer，都可以輕松的創建另一種常用的可以改變形狀的對話框：多頁對話框。可以通過多種不同的方式創建這種對話框： QTabWidget 的用法就像它自己的名字一樣。它提供了一個可以控制內置 QStackedWidget 的 Tab 欄。 QListWidget 和 QStackedWidget 可以一起使用，將 QListWidget::currentRowChanged()信號與 QStackedWidget::setCurrentIndex()槽連接， 然后再利用 QListWidget 的當前項就可以確定應該顯示 QStackedWidget 中的哪一頁。 與上述 QListWidget 的用法相似，也可以將 QTextWidget 和 QStackedWidget 一起 使用。 在后面的《布局管理》一章中，我們將講解 QStackedWidget 類。