Qt：UI檔案設計和運作機制

1、項目檔案組成

在QtCreator中建立一個WidgetApplocation項目，選中視窗基類中選中QWidget作為視窗基類，并選中"GnerateForm"複選框。建立後項目檔案目錄樹如圖：

• 項目組織檔案pro：存儲項目設定的檔案
• 主程式入口檔案main.cpp，實作main函數的程式檔案
• 窗體界面檔案widget.ui：一個XML格式存儲的窗體上的檔案以及其布局的檔案
• widget.h是所設計的視窗類的頭檔案，widget.cpp是widget.h裡定義類的實作檔案。在C++裡面，任何窗體或者界面元件都是用類封裝的，一個類一般有一個頭檔案和一個源檔案。

2、項目管理檔案.pro

用于記錄項目的一些配置以及項目包含檔案的組織管理。

QT       += core gui
           

• QT       += core gui表示項目中加入core gui子產品。 core gui用于GUI設計的類子產品。如果建立控制台應用程式，就不需要添加core gui。
• QT類以子產品的形式組織各種功能的類，根據項目設計的功能添加适當的類庫子產品支援。比如如果涉及到資料庫操作的類就需要用到SQL子產品：QT       += sql

greaterThan(QT_MAJOR_VERSION, 4): QT += widgets
           

• 條件執行語句，表示當 Qt 主版本大于 4 時，才加入 widgets 子產品。

TARGET = QWidget
           

• 編譯後的可執行檔案是QWidget.exe

TEMPLATE = app
           

• 項目使用的模闆是app，是一般應用程式

後面的SOURCES、HEADERS、FORMS 記錄了項目中包含的源程式檔案、頭檔案和窗體檔案(.ui檔案)的名稱。

這些檔案清單是 Qt Creator 自動添加到項目管理檔案裡面的，使用者不需要手動修改。當添加一個檔案到項目，或從項目裡删除一個檔案時，項目管理檔案裡的條目會自動修改。

3 界面檔案

      字尾為“.ui”的檔案是可視化設計的窗體的定義檔案，如 widget.ui。輕按兩下項目檔案目錄樹中的檔案 widget.ui，會打開一個內建在 Qt Creator 中的 Qt Designer【ui設計器】 對窗體進行可視化設計

• 編輯完屬性之後，為btnClose添加功能：點選此按鈕是，關閉視窗，退出程式，使用Signal和Slots編輯器完成這個功能。
• 在信号與槽編輯器的工具欄上單擊“Add”按鈕，在出現的條目中，Sender 選擇 btnClose，Signal選擇 clicked()，Receiver 選擇窗體 Widget，Slot 選擇 close()。表示當按鈕btnClose被單擊時，就執行Widget的close函數，實作關閉視窗的功能。
• 然後對項目進行編譯和運作，可以出現如圖 2-5 所示的視窗，單擊“Close”按鈕可以關閉程式。标簽的文字内容和字型被修改了，視窗标題也顯示為所設定的标題。

4、主函數檔案main.cpp

#include "widget.h"
#include <QApplication>

/*
main是應用程式的入口。主要功能是建立應用程式，建立視窗，并
運作應用程式，開始應用程式的消息循環和事件處理。
QApplication是Qt的标準應用程式類
*/
int main(int argc, char *argv[])
{
    QApplication a(argc, argv);  //定義并建立應用程式，定義一個QApplication類的對象a，就是應用程式對象
    Widget w;  //并以并建立視窗，定義Widget類的變量w
    w.show();  //顯示視窗

    return a.exec(); //啟動并執行應用程式：開始應用程式的消息循環和事件處理
}
           

5、 窗體相關的檔案

5.1、widget.h檔案

#ifndef WIDGET_H
#define WIDGET_H

#include <QWidget> 

namespace Ui {   //命名空間ui，包含一個類Widget
class Widget;  //相當于一個外部類型聲明，這裡的類是ui_widget.h裡面定義的類，用來描述界面元件
}

class Widget : public QWidget  //窗體類Widget定義：繼承QWidget
{
    Q_OBJECT  //宏，使用Qt的信号與槽機制的類必須加入的宏

public:
    explicit Widget(QWidget *parent = 0);
    ~Widget();

private:
    Ui::Widget *ui; //使用Ui::Widget定義一個指針，這個指針是用前面聲明的namespace Ui裡面的Widget類定義的，是以指針ui是指向可視化設計的界面，後面需要通路界面上的元件，都需要通過這個指針ui
};

#endif // WIDGET_H
           

5.2、widget.cpp檔案

類Widget的實作代碼

#include "widget.h"
#include "ui_widget.h"  //自動加入

Widget::Widget(QWidget *parent) :
    QWidget(parent),    //執行父類QWidged的構造函數
    ui(new Ui::Widget)
{
    ui->setupUi(this);  //值類Ui::Widget類的setupUi函數，這個函數實作視窗的生成與各種屬性的設定，信号與槽的關聯
}

Widget::~Widget()
{
    delete ui;  //析構函數中删除new建立的指針
}
           

5.3、widget.ui 檔案

• widget.ui 是窗體界面定義檔案，是一個 XML 檔案，定義了視窗上的所有元件的屬性設定、布局，及其信号與槽函數的關聯等。
• 用 UI 設計器可視化設計的界面都由 Qt 自動解析，并以 XML檔案的形式儲存下來。
• 在設計界面時，隻需在 UI 設計器裡進行可視化設計即可，而不用管 widget.ui檔案是怎麼生成的

5.4、ui_widget.h 檔案

ui_widget.h 是對 widget.ui 檔案編譯後自動生成的，widget.ui 又是通過 UI 設計器可視化設計生成的。

• 是以，對 ui_widget.h 手工進行修改沒有什麼意義，所有涉及界面的修改都應該直接在 UI 設計器裡進行。
• 是以，ui_widget.h 也沒有必要添加到項目裡。

/********************************************************************************
** Form generated from reading UI file 'widget.ui'
**
** Created by: Qt User Interface Compiler version 5.9.1
**
** WARNING! All changes made in this file will be lost when recompiling UI file!
********************************************************************************/

#ifndef UI_WIDGET_H
#define UI_WIDGET_H

#include <QtCore/QVariant>
#include <QtWidgets/QAction>
#include <QtWidgets/QApplication>
#include <QtWidgets/QButtonGroup>
#include <QtWidgets/QHeaderView>
#include <QtWidgets/QLabel>
#include <QtWidgets/QPushButton>
#include <QtWidgets/QWidget>

QT_BEGIN_NAMESPACE
//Ui_Widget建立對象ui，然後ui->setupUi(this)就為本ui界面實作了窗體上元件的建立，屬性設定，信号與槽的關聯
class Ui_Widget    //定義了一個類Ui_Widget，用于封裝可視化設計的界面
{
public:
    QLabel *labDemo;
    QPushButton *btnClose;  //自動化生成了界面各個元件的類成員變量定義：為界面的每個元件定義了一個指針變量

    void setupUi(QWidget *Widget)  //用于建立各個界面元件，并設定其位置，大小，文字内容，字型等屬性，設定信号與槽的關聯
    {
        if (Widget->objectName().isEmpty())
            Widget->setObjectName(QStringLiteral("Widget"));
        Widget->resize(400, 300);
        labDemo = new QLabel(Widget);
        labDemo->setObjectName(QStringLiteral("labDemo"));
        labDemo->setGeometry(QRect(70, 50, 181, 31));
        QFont font;
        font.setPointSize(20);
        font.setBold(true);
        font.setWeight(75);
        labDemo->setFont(font);
        btnClose = new QPushButton(Widget);
        btnClose->setObjectName(QStringLiteral("btnClose"));
        btnClose->setGeometry(QRect(220, 130, 75, 23));
        QFont font1;
        font1.setPointSize(12);
        font1.setBold(true);
        font1.setWeight(75);
        btnClose->setFont(font1);
          //上面的第一部分根據可視化設計的界面内容，用C++代碼建立界面上各元件，并設定其屬性
        retranslateUi(Widget);
        QObject::connect(btnClose, SIGNAL(clicked()), Widget, SLOT(close()));
        //信号與槽關聯：close()槽函數可以關閉視窗
        QMetaObject::connectSlotsByName(Widget); //設定槽的關聯方式：用于将UI設計器自動生成的元件信号的槽函數與元件信号相關聯
    } // setupUi

    void retranslateUi(QWidget *Widget) //retranslateUi用來設定界面各元件的文字内容屬性，如标簽文字，案件文字，窗體标題等等
    {
        Widget->setWindowTitle(QApplication::translate("Widget", "Widget", Q_NULLPTR));
        labDemo->setText(QApplication::translate("Widget", "hello,World", Q_NULLPTR));
        btnClose->setText(QApplication::translate("Widget", "Close", Q_NULLPTR));
    } // retranslateUi

};

namespace Ui {   //定義一個從Ui_Widget繼承的類。
    class Widget: public Ui_Widget {};
} // namespace Ui


QT_END_NAMESPACE

#endif // UI_WIDGET_H
           

1. ui_widget.h 檔案裡實作界面功能的類是 Ui_Widget。
2. 在定義一個類 Widget 從 Ui_Widget 繼承而來，并定義在 namespace Ui 裡，這樣 Ui:: Widget 與 widget.h 裡的類 Widget 同名，但是用 namespace 區分開來。
3. 是以，界面的 Ui:: Widget 類與檔案 widget.h 裡定義的 Widget 類實際上是兩個類，但是 Qt 的處理讓使用者感覺不到 Ui:: Widget 類的存在，隻需要知道在 Widget 類裡用 ui 指針可以通路可視化設計的界面元件就可以了。