1、項目文件組成
在QtCreator中新建一個WidgetApplocation項目，選中窗口基類中選中QWidget作為窗口基類，並選中"GnerateForm"復選框。創建后項目文件目錄樹如圖：
項目組織文件pro：存儲項目設置的文件
主程序入口文件main.cpp，實現main函數的程序文件
窗體界面文件widget.ui：一個XML格式存儲的窗體上的文件以及其布局的文件
widget.h是所設計的窗口類的頭文件，widget.cpp是widget.h里定義類的實現文件。在C++里面，任何窗體或者界面組件都是用類封裝的，一個類一般有一個頭文件和一個源文件。
2、項目管理文件.pro
用於記錄項目的一些配置以及項目包含文件的組織管理。
1 #------------------------------------------------- 2 # 3 # Project created by QtCreator 2019-07-01T15:58:45 4 # 5 #------------------------------------------------- 6 7 QT += core gui 8 9 greaterThan(QT_MAJOR_VERSION, 4): QT += widgets 10 11 TARGET = Widget1 12 TEMPLATE = app 13 14 # The following define makes your compiler emit warnings if you use 15 # any feature of Qt which has been marked as deprecated (the exact warnings 16 # depend on your compiler). Please consult the documentation of the 17 # deprecated API in order to know how to port your code away from it. 18 DEFINES += QT_DEPRECATED_WARNINGS 19 20 # You can also make your code fail to compile if you use deprecated APIs. 21 # In order to do so, uncomment the following line. 22 # You can also select to disable deprecated APIs only up to a certain version of Qt. 23 #DEFINES += QT_DISABLE_DEPRECATED_BEFORE=0x060000 # disables all the APIs deprecated before Qt 6.0.0 24 25 CONFIG += c++11 26 27 SOURCES += \ 28 main.cpp \ 29 widget.cpp 30 31 HEADERS += \ 32 widget.h 33 34 FORMS += \ 35 widget.ui 36 37 # Default rules for deployment. 38 qnx: target.path = /tmp/$${TARGET}/bin 39 else: unix:!android: target.path = /opt/$${TARGET}/bin 40 !isEmpty(target.path): INSTALLS += target
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 = Widget1
編譯后的可執行文件是Widget1.exe
TEMPLATE = app
工程所使用的模版。app表示是一個窗口應用程序。如果是lib則表明是一個動態庫模版。
DEFINES+=QT_DEPRECATED_WARNINGS
定義編譯選項。
CONFIG += c++11
項目采用C++11，當前可支持C++14 參考https://wiki.qt.io/How_to_use_C%2B%2B11_in_your_Qt_Projects
后面的SOURCES、HEADERS、FORMS 記錄了項目中包含的源程序文件、頭文件和窗體文件(.ui文件)的名稱。這些文件列表是 Qt Creator 自動添加到項目管理文件里面的，用戶不需要手動修改。當添加一個文件到項目，或從項目里刪除一個文件時，項目管理文件里的條目會自動修改。
3 界面文件
后綴為“.ui”的文件是可視化設計的窗體的定義文件，如 widget.ui。雙擊項目文件目錄樹中的文件 widget.ui，會打開一個集成在 Qt Creator 中的 Qt Designer【ui設計器】 對窗體進行可視化設計
- 組件面板：窗口左側是界面設計組件面板，分為多個組，如Layouts、Buttons、Display Widgets等，界面設計的常見組件都可以在組件面板里找到。
- 中間主要區域是待設計的窗體。如果要將某個組件放置到窗體上時，從組件面板上拖放一個組件到窗體上即可。例如，先放一個 Label 和一個 Push Button 到窗體上。
- Signals 和 Slots 編輯器與 Action 編輯器是位於待設計窗體下方的兩個編輯器。Signals 和Slots 編輯器用於可視化地進行信號與槽的關聯，Action 編輯器用於可視化設計 Action。
- 布局和界面設計工具欄：窗口上方的一個工具欄，工具欄上的按鈕主要實現布局和界面設計。
- 對象瀏覽器（Object Inspector）：窗口右上方是 Object Inspector，用樹狀視圖顯示窗體上各組件之間的布局包含關系，視圖有兩列，顯示每個組件的對象名稱（ObjectName）和類名稱。
- 屬性編輯器（Property Editor）：窗口右下方是屬性編輯器，是界面設計時最常用到的編輯器。屬性編輯器顯示某個選中的組件或窗體的各種屬性及其取值，可以在屬性編輯器里修改這些屬性的值。
在設計窗體上，放置一個 Label 和一個 Push Button 組件，它們的主要屬性設置如下
| ObjectName | 類名稱 | 屬性設置 | 備注 |
|---|---|---|---|
| LabDemo | QLabel | Text=”Hello, World” Font.PointSize=20 Font.bold=true |
設置標簽顯示文字和字體 |
| btnClose | QPushButton | Text=”Close” | 設置按鈕的文字 |
編輯完屬性之后，為btnClose添加功能：點擊此按鈕是，關閉窗口，推出程序，使用Signal和Slots編輯器完成這個功能。
在信號與槽編輯器的工具欄上單擊“Add”按鈕，在出現的條目中，Sender 選擇 btnClose，Signal
選擇 clicked()，Receiver 選擇窗體 Widget，Slot 選擇 close()。表示當按鈕btnClose被單擊時，就執行Widget的close函數，實現關閉窗口的功能。
然后對項目進行編譯和運行，可以出現如圖 2-5 所示的窗口，單擊“Close”按鈕可以關閉程序。標簽的文字內容和字體被修改了，窗口標題也顯示為所設置的標題。
4、主函數文件main.cpp
1 #include "widget.h" 2 #include <QApplication> 3 4 /* 5 main是應用程序的入口。主要功能是創建應用程序，創建窗口，並 6 運行應用程序，開始應用程序的消息循環和事件處理。 7 QApplication是Qt的標准應用程序類 8 */ 9 int main(int argc, char *argv[]) 10 { 11 QApplication a(argc, argv); //定義並創建應用程序，定義一個QApplication類的對象a，就是應用程序對象 12 Widget w; //並以並創建窗口，定義Widget類的變量w 13 w.show(); //顯示窗口 14 15 return a.exec(); //啟動並執行應用程序：開始應用程序的消息循環和事件處理 16 }
5、 窗體相關的文件
5.1、widget.h文件
1 #ifndef WIDGET_H 2 #define WIDGET_H 3 4 #include <QWidget> 5 6 namespace Ui { //命名空間ui，包含一個類Widget 7 class Widget; //相當於一個外部類型聲明，這里的類是ui_widget.h里面定義的類，用來描述界面組件 8 } 9 10 class Widget : public QWidget //窗體類Widget定義：繼承QWidget 11 { 12 Q_OBJECT //宏，使用Qt的信號與槽機制的類必須加入的宏 13 14 public: 15 explicit Widget(QWidget *parent = 0); 16 ~Widget(); 17 18 private: 19 Ui::Widget *ui; //使用Ui::Widget定義一個指針，這個指針是用前面聲明的namespace Ui里面的Widget類定義的，所以指針ui是指向可視化設計的界面，后面需要訪問界面上的組件，都需要通過這個指針ui 20 }; 21 22 #endif // WIDGET_H
5.2、widget.cpp文件
類Widget的實現代碼
1 #include "widget.h" 2 #include "ui_widget.h" //自動加入 3 4 Widget::Widget(QWidget *parent) : 5 QWidget(parent), //執行父類QWidged的構造函數 6 ui(new Ui::Widget) 7 { 8 ui->setupUi(this); //值類Ui::Widget類的setupUi函數，這個函數實現窗口的生成與各種屬性的設置，信號與槽的關聯 9 } 10 11 Widget::~Widget() 12 { 13 delete ui; //析構函數中刪除new創建的指針 14 }
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 也沒有必要添加到項目里。
1 /******************************************************************************** 2 ** Form generated from reading UI file 'widget.ui' 3 ** 4 ** Created by: Qt User Interface Compiler version 5.9.1 5 ** 6 ** WARNING! All changes made in this file will be lost when recompiling UI file! 7 ********************************************************************************/ 8 9 #ifndef UI_WIDGET_H 10 #define UI_WIDGET_H 11 12 #include <QtCore/QVariant> 13 #include <QtWidgets/QAction> 14 #include <QtWidgets/QApplication> 15 #include <QtWidgets/QButtonGroup> 16 #include <QtWidgets/QHeaderView> 17 #include <QtWidgets/QLabel> 18 #include <QtWidgets/QPushButton> 19 #include <QtWidgets/QWidget> 20 21 QT_BEGIN_NAMESPACE 22 //Ui_Widget創建對象ui，然后ui->setupUi(this)就為本ui界面實現了窗體上組件的創建，屬性設置，信號與槽的關聯 23 class Ui_Widget //定義了一個類Ui_Widget，用於封裝可視化設計的界面 24 { 25 public: 26 QLabel *labDemo; 27 QPushButton *btnClose; //自動化生成了界面各個組件的類成員變量定義：為界面的每個組件定義了一個指針變量 28 29 void setupUi(QWidget *Widget) //用於創建各個界面組件，並設置其位置，大小，文字內容，字體等屬性，設置信號與槽的關聯 30 { 31 if (Widget->objectName().isEmpty()) 32 Widget->setObjectName(QStringLiteral("Widget")); 33 Widget->resize(400, 300); 34 labDemo = new QLabel(Widget); 35 labDemo->setObjectName(QStringLiteral("labDemo")); 36 labDemo->setGeometry(QRect(70, 50, 181, 31)); 37 QFont font; 38 font.setPointSize(20); 39 font.setBold(true); 40 font.setWeight(75); 41 labDemo->setFont(font); 42 btnClose = new QPushButton(Widget); 43 btnClose->setObjectName(QStringLiteral("btnClose")); 44 btnClose->setGeometry(QRect(220, 130, 75, 23)); 45 QFont font1; 46 font1.setPointSize(12); 47 font1.setBold(true); 48 font1.setWeight(75); 49 btnClose->setFont(font1); 50 //上面的第一部分根據可視化設計的界面內容，用C++代碼創建界面上各組件，並設置其屬性 51 retranslateUi(Widget); 52 QObject::connect(btnClose, SIGNAL(clicked()), Widget, SLOT(close())); 53 //信號與槽關聯：close()槽函數可以關閉窗口 54 QMetaObject::connectSlotsByName(Widget); //設置槽的關聯方式：用於將UI設計器自動生成的組件信號的槽函數與組件信號相關聯 55 } // setupUi 56 57 void retranslateUi(QWidget *Widget) //retranslateUi用來設置界面各組件的文字內容屬性，如標簽文字，案件文字，窗體標題等等 58 { 59 Widget->setWindowTitle(QApplication::translate("Widget", "Widget", Q_NULLPTR)); 60 labDemo->setText(QApplication::translate("Widget", "hello,World", Q_NULLPTR)); 61 btnClose->setText(QApplication::translate("Widget", "Close", Q_NULLPTR)); 62 } // retranslateUi 63 64 }; 65 66 namespace Ui { //定義一個從Ui_Widget繼承的類。 67 class Widget: public Ui_Widget {}; 68 } // namespace Ui 69 70 71 QT_END_NAMESPACE 72 73 #endif // UI_WIDGET_H
ui_widget.h 文件里實現界面功能的類是 Ui_Widget。再定義一個類 Widget 從 Ui_Widget 繼承而來，
並定義在 namespace Ui 里，這樣 Ui:: Widget 與 widget.h 里的類 Widget 同名，但是用 namespace 區分開
來。所以，界面的 Ui:: Widget 類與文件 widget.h 里定義的 Widget 類實際上是兩個類，但是 Qt 的處理讓
用戶感覺不到 Ui:: Widget 類的存在，只需要知道在 Widget 類里用 ui 指針可以訪問可視化設計的界面組
件就可以了。
相關文件：
| 談.ui文件的用法 | 這是一篇對Qt項目中ui文件用法的軟件，有對.ui文件的詳細介紹 |
| Qt之UI文件設計和運行機制 | 這是一篇對Qt項目中各個文件整體介紹的一篇軟文，講的很詳細 |
| Qt中.ui文件的使用 | .ui文件有3種使用形式在這篇文章中得到了很好的闡述 |