在這個章節裡面，我們將教導你們如何去產生一個Dialog視窗，並且如何去做簡單的排版。首先先建立一個Qt GUI application專案，這邊與我們之前所建立之MainWindow方式有點不同，因為我們要建立一個Dialog專案，所以必須在Class infomation設定中，將Base class選擇QDialog，如下圖所示。
接下來新增幾個ui物件。1.TexeLabel、2.Line Edit、3. Horizontal Spacer、4.pushButton。其排列方式如下。
ui物件相關屬性修改如下
| ui物件 | objectName | label |
| 1.TexeLabel | label | Cell Location: |
| 2.Line Edit | lineEdit |
|
| 3. Horizontal Spacer |
|
|
| 4.pushButton | okButton | OK |
| 5.pushButton | cancelButton | Cancel |
按住"Ctrl"並點選ui物件""textLabel與LineEdit後，點選滑鼠右鍵開啟選單，點選Layout->LayOut Horizontally進行水平排列，再利用相同方式點選"Horizontal Spacer"及兩個"pushButton"並利用相同方式進行水平排列，最後將兩個進行水平排列之物件，利用相同方式Layout->LayOut Vertically 進行垂直排列，做完上述動作之後所有ui物件將完成較規則的排列方式。如果你覺得物件間的距離還不是很好，你可以再度點選Layout->Adjust Size進行重新排列大小，其結果如下所示。
輸入表單中同常伴隨Tab按鍵進行物件間資切換，此時你可以編輯你的tab順序，點選Edit->Edit Tab Order進入編輯畫面。
此時將出現tab編輯畫面，畫面中之1、2、3所代表的就是你點選tab按鈕時，所切換的順序，你可以點選你要的位置，進行編輯順序，編輯還成後點選"F3"恢復Edit Widgets介面。
UI介面設計完成之後，如果你要先觀看該UI介面是否如你預期的結果，你可以點選Tools->Form Editor->Preview進行預覽。
接下來建立幾個簡單上面建立之UI之基本動作，打開dialog.cpp檔案，假設我們預先設定lineEdit在未輸入文字的時候不可以按下ok按鈕，並且限定lineEdit中第一個字只可以輸入英文單字，第二三只可以輸入數字，且只能輸入這三個字，那要如何進行設計呢?
於dialog.cpp檔案中新增下列程式碼。
//預先將okButton按鈕進行關閉動作
ui->okButton->setEnabled(false);
//設定一regExp屬性，改屬性中限制，第一個單字[A-Za-z]也就是說只可以輸入英文單字，第二格[1-9]只能輸入數字1-9，第三個[0-9]只能輸入數字，最後{0,2}代表輸入字元由0-2也就是三個字元，並將該屬性設定給lineEdit使用
QRegExp regExp("[A-Za-z][1-9][0-9]{0,2}");
ui->lineEdit->setValidator(new QRegExpValidator(regExp,this));
//最後新增按鈕動作，下列方式均可以將Dialog進行關閉，而acceot(0將可於QDialog::Accept()回傳1，reject則回傳0，利用該方式可以進行動作傳遞
connect(ui->okButton,SIGNAL(clicked()),this,SLOT(accept()));
connect(ui->cancelButton,SIGNAL(clicked()),this,SLOT(reject())); |
最後於lineEdit ui上面點選右鍵，Go to slot，點選textChanged(QStrong)進行新增動作，該動作將於lineEdit輸入文字後啟動，該啟動內容主要判定lineEdit有輸入文字，且輸入文字都符合上面regExp規則的話，將okButton啟用，其程式碼如下所示。
| ui->okButton->setEnabled(ui->lineEdit->hasAcceptableInput()); |
執行結果如下
接下來我們嘗試處理按鈕按下後的事件，按鈕按下的事件你可以使用點選右鍵的方式新增Go to slot的方式建立點擊事件，也可以如我上述所使用之方式，直接用SLOT的方式指定要執行的指令。我們在這邊預計讓你點選ok之後會出現一個MessageBox視窗，顯示OK訊息。點選Cancel按鈕之後會出現警告視窗，會出現警告視窗，問你是否關閉。首先在dialog.hpp檔案中include QMessageBox函式庫進來。
接下來在private:中加入
void accept();
void reject(); |
再開啟dialog.cpp檔案，並於最下方輸入該兩個動作所要執行的內容，建立MessageBox的方式很簡單，你可以直接使用QMessageBox來建立QMessageBOX::後面所帶的屬性為MessageBox所顯示的圖示，其中包含about、aboutQt、infomation、question、warning、critical等。輸入屬性(QWidget *parent,const QString &title,const QString &text)，使用方式如下。
//accept動作
void Dialog::accept()
{
QMessageBox::about(this,tr("ok"),tr("ok"));
}
//reject動作
void Dialog::reject()
{
QMessageBox box;
box.setWindowTitle(tr("Exit!"));
box.setIcon(QMessageBox::Question);
box.setText(tr("Are you sure want to cancel?"));
box.setStandardButtons(QMessageBox::Yes|QMessageBox::Cancel);
box.setDetailedText(tr("test"));
switch(box.exec())
{
case QMessageBox::Yes:
QDialog::done(1);
break;
case QMessageBox::No:
break;
}
} |
第二個動作reject中，相同使用QMessageBox的方式建立，但比較不相同的地方在於我們直接設定相關屬性，該方式可以讓你針對該屬性一一進行設定，並於最後用switch的方式來判定所按下的按鈕，並執行想要執行的指令，其做法如上所示。
MessageBox::about
MessageBox::warrning
MessageBox::infomation
MessageBox::critial
See also
.png)
.png)
.png)
.png)
.png)
.png)
.png)
.png)
.png)
.png)
.png)
.png)
.png)
.png)
.png)
.png)
.png)
.png)
.png)
.png)
.png)
.png)
