使用QtDesignerForm界面
- 1. 概述
- 2. UI文件的使用分析
- 2.2 QtDesignerForm 界面的使用
- 3. Demo
1. 概述
在进行QT开发创建UI文件通常有两种方式,分别是通过Qt 设计师界面类、Qt Designer Form创建。两者创建的区别如下。
通过Qt 设计师界面类创建的界面通常会包括对应的关联类。假如通过Qt 设计师界面类创建一个mainwindow.ui则创建结果如下所示:

此时就可以通过创建mainwindow.h中的MainWindow类的对象进行界面显示了,代码如下:
#include "mainwindow.h"
#include <QApplication>
int main(int argc, char *argv[])
{
QApplication a(argc, argv);
MainWindow w;
w.show();
return a.exec();
}
通过Qt Designer Form创建的界面文件则是单独的UI文件。通过Qt Designer Form创建一个Widget UI,文件名为DesignerForm.ui,则创建结果如下所示:

可以看到只有一个的ui文件,而没有对应使用此ui文件的类。
接下来就看看ui文件是如何被对应类所使用的吧!!!
2. UI文件的使用分析
以mainwindow.ui为例进行分析(仅描述核心部分)。
先看下mainwindow.h
#ifndef MAINWINDOW_H
#define MAINWINDOW_H
#include <QMainWindow>
QT_BEGIN_NAMESPACE
namespace Ui { class MainWindow; }
QT_END_NAMESPACE
class MainWindow : public QMainWindow
{
Q_OBJECT
public:
MainWindow(QWidget *parent = nullptr);
~MainWindow();
private:
Ui::MainWindow *ui;
};
#endif // MAINWINDOW_H
其中Ui::MainWindow *ui;则是声明了ui文件对象,接下再看此对象的初始化mainwindow.cpp:
#include "mainwindow.h"
// ui_mainwindow.h 头文件则是根据 mainwindow.ui 生成的,在构建项目时生成
#include "ui_mainwindow.h"
MainWindow::MainWindow(QWidget *parent)
: QMainWindow(parent)
// 初始化了ui对象
, ui(new Ui::MainWindow)
{
// 这里则是将 UI 界面关联到了 MainWindow 类,所以可以通过 MainWindow 显示被关联的UI
// setupUI的作用就是为 Widget 设置用户界面
ui->setupUi(this);
}
MainWindow::~MainWindow()
{
delete ui;
}
2.2 QtDesignerForm 界面的使用
创建使用DesignerForm.ui的类UseDesignerForm,如下所示:

类创建好后需要创建ui对象,并将其设置为UseDesignerForm类的界面,具体步骤如下所示:
-
在
usedesignerform.h中声明对象#ifndef USEDESIGNERFORM_H #define USEDESIGNERFORM_H #include <QWidget> QT_BEGIN_NAMESPACE // 声明UI类 namespace Ui { class DesignerForm; } QT_END_NAMESPACE class UseDesignerForm : public QWidget { Q_OBJECT public: explicit UseDesignerForm(QWidget *parent = nullptr); ~UseDesignerForm(); signals: private: // 声明ui对象 Ui::DesignerForm *ui; }; #endif // USEDESIGNERFORM_H -
创建
ui对象并绑定到UseDesignerForm类#include "usedesignerform.h" #include "ui_DesignerForm.h" UseDesignerForm::UseDesignerForm(QWidget *parent) : QWidget(parent) , ui(new Ui::DesignerForm) { ui->setupUi(this); } UseDesignerForm::~UseDesignerForm() { delete ui; }
按照上述步骤操作后,构建时会发现报错error: C2027: 使用了未定义类型“Ui::DesignerForm”。这是通过Qt Designer Form创建的Widget UI中 QWidget 类的对象名称默认为Form,这样会导致生成的ui_DesignerForm.h中Ui名称空间下的类名均为Form。所以会找不到Ui::DesignerForm,此时只要将DesignerForm.ui中QWidget的对象名改为DesignerForm即可。修改后如下所示:

3. Demo
UseDesignerForm



















