使用QtDesignerForm界面

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类的界面，具体步骤如下所示：

1. 在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
   
   

2. 创建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