2012年8月7日 星期二

[Qt] - built-in 對話方塊

Qt內建了一些程式設計師常常會使用到的一些對話方塊,其中包含顏色選取檔案瀏覽等等。這些都屬於固定式的對話視窗,當你要使用時將可以直接使用Qt內建之對話方塊進行選取即可。本章捷將介紹Qt內建之(built-in)方塊。
Qt除了內建QMesseageBox訊息方塊外,Qt也提供了其他的內建方塊,其中包含
  1. QColorDialog:色彩選取工具。
  2. QErrorMessage:顯示錯誤訊息視窗。
  3. QFileDialog:檔案選取視窗。
  4. QFontDialog:使用者選取字型工具。
  5. QInputDialog:使用者簡單輸入工具。
  6. QPageSetupDialog:配置印表機選項。
  7. QProgressDialog:處理程序進度列。
  8. QPrintDialog:印表機列印方塊
Step1.
首先你要新增一個TextEdit及八個PushButton,相關Object名稱及屬性如下表所示,並將ui設計如下圖所示。
LabelObjectObjectName

QTextEditdisplayTextEdit
ColorQPushButtoncolor_B
MessageQPushButtonMessage_B
FileQPushButtonFile_B
FontQPushButtonFont_B
InputQPushButtonInput_B
Page SetupQPushButtonPageSetup_B
ProgressQPushButtonProgress_B
PrintQPushButtonPrint_B

Step2.
include所需之檔案,於mainwindow.hpp中加入#include <QtGui/QDialog>,及mainwindow.cpp檔案中加入#include <QtGui/QtGui>。

Step3.
於個別button中加入相關程式碼。

Color
    QPalette palette = ui->displayTextEdit->palette();
    const QColor& color
            = QColorDialog::getColor(palette.color(QPalette::Base), this);
    if(color.isValid())
    {
        palette.setColor(QPalette::Base, color);
        ui->displayTextEdit->setPalette(palette);
    }                                                                                                                                                   


執行結果如下圖所示。



Message
    QErrorMessage box(this);
    box.setWindowTitle(tr("MessageBox"));
    box.showMessage(tr("MessageBox xx));
    box.showMessage(tr("MessageBox xx));
    box.showMessage(tr("MessageBox xx));
    box.showMessage(tr("MessageBox yy));
    box.showMessage(tr("MessageBox zz));

    box.exec();                                                                                                                                   

執行結果如下圖所示。

File
    QString fileName = QFileDialog::getOpenFileName(this,
                                    tr("Open File"),
                                    "/home/trong/",
                                    tr("Any File(*.*)"
                                    ";;Text File(*.txt)"
                                    ";;XML File(*.xml)"));
    ui->displayTextEdit->setText(fileName);                                                                                       

執行結果如下


Font
    bool ok;
    const QFont& font = QFontDialog::getFont(&ok,
                             ui->displayTextEdit->font(),
                             this,
                             tr("Font Select box"));
    if(ok)
    {
        ui->displayTextEdit->setFont(font);
    }                                                                                                                                                    

執行結果

Input
    bool ok;
    QString text = QInputDialog::getText(this,
                                    tr("Input"),
                                    tr("Input Text:"),
                                    QLineEdit::Normal,
                                    QDir::home().dirName(),
                                    &ok);
    if (ok && !text.isEmpty())
        ui->displayTextEdit->setText(text);                                                                                       

執行結果

Page Setup
    QPrinter printer;
    QPageSetupDialog dlg(&printer, this);
    dlg.setWindowTitle(tr("Page Setup Box"));
    if (dlg.exec() == QDialog::Accepted)
    {
            // GO To Next process
    }                                                                                                                                                  


Progress
    QProgressDialog progress(tr("Processing..."), tr("Cancel"), 0, 10000, this);
    progress.setWindowModality(Qt::WindowModal);
    progress.setWindowTitle(tr("Processing Box"));
    progress.show();
    for (int i = 0; i < 10000; i++)
    {
            progress.setValue(i);
            qApp->processEvents();
            if (progress.wasCanceled())
                    break;
            //
            qDebug() << i;
    }
    progress.setValue(10000);                                                                                                             


Print Page
    QPrinter printer;
    QPrintDialog dlg(&printer, this);
    dlg.setWindowTitle(tr("Print Box"));
    if (dlg.exec() == QDialog::Accepted)
    {
            // next processing
    }                                                                                                                                                  



參考文獻:精通Qt4視窗介面程式開發與設計

[Qt] - Dialog 排版


在這個章節裡面,我們將教導你們如何去產生一個Dialog視窗,並且如何去做簡單的排版。首先先建立一個Qt GUI application專案,這邊與我們之前所建立之MainWindow方式有點不同,因為我們要建立一個Dialog專案,所以必須在Class infomation設定中,將Base class選擇QDialog,如下圖所示。

接下來新增幾個ui物件。1.TexeLabel、2.Line Edit、3. Horizontal Spacer、4.pushButton。其排列方式如下。


ui物件相關屬性修改如下
ui物件objectNamelabel
1.TexeLabellabelCell Location:
2.Line EditlineEdit
3. Horizontal Spacer

4.pushButtonokButtonOK
5.pushButtoncancelButtonCancel

按住"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

MessageBox::question

MessageBox::warrning

MessageBox::infomation

MessageBox::critial




See also