TRong Programing World: [Qt]

在這個章節裡面，我們將教導你們如何去產生一個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函式庫進來。

#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