Qt設計用戶界面的三種方法

今天閱讀了《C++ GUI Qt4編程》的中創建對話框的章節,內容不難也不多,易於掌握。雖然此章的標題爲“創建對話框”;但我卻認爲其內容的重點可放在如何使用Qt設計界面上。

  Qt設計界面有三種方式:

手工編寫創建界面的代碼 :此方法比較複雜,不夠直觀; 

使用Qt Designer界面編輯器設計 :可直接拖放控件、設置控件的屬性,簡單、直觀、易於操作;  

動態加載UI文件並生成界面 :此方法很靈活,當需要更改界面時只需更改.UI文件即可,無需重新編譯程序。

  下面簡要總結這三種設計界面的操作方法。

手工設計界面

  使用手工創建代碼時,需要從Qt已有的GUI類庫中選擇一個類作爲基類繼承,並且添加必要的其它成員。通常,我們會選擇從QDialog、 QWidget、QMainWindow等類中選擇一個作爲主窗體;然後創建其它的控件,並使用佈局管理器佈局這些控件;最後將該佈局設置爲主窗體的布 局。此步驟用圖描述如下:

 

 

  例如,對於下圖所示的FindDialog對話框,就可以通過從QDialog繼承,並添加按鈕、佈局管理器等到派生類中完成該對話框的設計。

 

 

  相關的代碼如下:

class FindDialog : public QDialog[喝小酒的網摘]http://blog.hehehehehe.cn/a/8574.htm
{
    Q_OBJECT

public:
    FindDialog(QWidget *parent = 0);

signals:
    void findNext(const QString &str, Qt::CaseSensitivity cs);
    void findPrevious(const QString &str, Qt::CaseSensitivity cs);

private slots:
    void findClicked();
    void enableFindButton(const QString &text);

private:                                                    // 窗體中的控件
    QLabel *label;
    QLineEdit *lineEdit; 
    QCheckBox *caseCheckBox;
    QCheckBox *backwardCheckBox;
    QPushButton *findButton;
    QPushButton *closeButton;
};

FindDialog::FindDialog(QWidget *parent)
    : QDialog(parent)
{

   // 下面的代碼創建窗體中的控件
    label = new QLabel(tr("Find &what:"));
    lineEdit = new QLineEdit;
    label->setBuddy(lineEdit);

    caseCheckBox = new QCheckBox(tr("Match &case"));
    backwardCheckBox = new QCheckBox(tr("Search &backward"));

    findButton = new QPushButton(tr("&Find"));
    findButton->setDefault(true);
    findButton->setEnabled(false);

    closeButton = new QPushButton(tr("Close"));

    connect(lineEdit, SIGNAL(textChanged(const QString &)),
            this, SLOT(enableFindButton(const QString &)));
    connect(findButton, SIGNAL(clicked()),
            this, SLOT(findClicked()));
    connect(closeButton, SIGNAL(clicked()),
            this, SLOT(close()));

    // 使用佈局管理器佈局控件
    QHBoxLayout *topLeftLayout = new QHBoxLayout;
    topLeftLayout->addWidget(label);
    topLeftLayout->addWidget(lineEdit);

    QVBoxLayout *leftLayout = new QVBoxLayout;
    leftLayout->addLayout(topLeftLayout);
    leftLayout->addWidget(caseCheckBox);
    leftLayout->addWidget(backwardCheckBox);

    QVBoxLayout *rightLayout = new QVBoxLayout;
    rightLayout->addWidget(findButton);
    rightLayout->addWidget(closeButton);
    rightLayout->addStretch();

    QHBoxLayout *mainLayout = new QHBoxLayout;
    mainLayout->addLayout(leftLayout);
    mainLayout->addLayout(rightLayout);

    // 設置窗口的佈局管理器
    setLayout(mainLayout); 
     setWindowTitle(tr("Find"));
    setFixedHeight(sizeHint().height());
}

使用Qt Designer設計界面

  採用Qt Designer,使得快速創建對話框成爲可能。在Qt Designer環境中,所有的操作都採用可視化的操作,可拖放控件、關聯信號與槽、設置特定控件的屬性。使用Qt Designer設計界面的方法如下圖所示:

 

 

  使用Qt Creator的Qt設計器設置Sort Dialog對話框時的操作界面如下圖所示。

 

 

動態加載UI文件並生成界面

  前面的兩種方法需要事先創建好相應的文件或代碼,然後連同其它文件進行編譯,如果後期要修改界面則必須修改代碼或UI文件並重新編譯。

  而不需要重新編譯整個程序的方法是採用動態加載UI文件的方式。基本的操作方法爲先使用Qt Designer設計界面,然後按下圖的流程操作:

 

 

  如下圖所示,創建一個mainwindow.ui的UI文件。之後就可以採用QUILoader類動態加載該文件,並生成該窗體。

 

 

  參考的代碼如下:

#include <QUiLoader>
#include <QFile>

int main(int argc, char *argv[])
{
    QApplication a(argc, argv);

    QUiLoader loader;
    QFile file("mainwindow.ui");
    loader.load(&file)->show();

    return a.exec();
}

  上面的代碼中UiLoader::load()使用了QFile對像作爲數據源,並且會生成QWidget對像,最後使用了QWidget::show()顯示上圖中的窗體界面。

  另外需要注意的是,如果要使能UiLoader動態加載特性,必須在工程文件*.pro中添加如下行:

      CONFIG += uitools

小結

  綜合前面的分析來看,使用手工設計界面的方法最爲繁瑣、複雜;使用Qt Designer設計界面最靈活、直觀、快速;而採用動態加載*.ui文件的方法則可以做到在需要修改*.ui文件時不需要重新編譯程序。

  因而在實際使用時,常常使用Qt Designer繪製界面,然後添加額外的代碼進行更爲完善的設計。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章