Qt Designer设计GUI原理及调用过程

由于在GUI界面设计过程中，会涉及到很多界面的布局和美化等操作，为了方便获得“所见即所得”的设计效果，Qt提供了Qt Designer（Qt设计师） 工具可以用来直接对界面进行可视化设计，设计之后就可以利用Qt的一些编译工具，生成对应的代码，方便在程序中调用。

大家如果用过Visual Studio下的MFC就会对这种界面设计方式非常熟悉了，但是Qt Designer提供的方式更加灵活好用。

话不多说，本篇博客的目的是让大家大致熟悉一下Qt Designer设计GUI界面的原理及其在程序中的调用过程，方便大家快速入门。

1、创建ui文件

Qt中GUI界面相关的设计由.ui格式文件控制，该文件有两种方法可以自动生成，一是通过Qt Creator在构建GUI项目时自动生成，二是通过Qt Designer工具直接建立.ui格式文件，并进行界面设计。

两种方式生成的ui文件其实最终都是用Qt Designer工具来进行具体界面设计的（在Qt Creator中可以直接双击.ui打开设计界面，其实就是用的Qt Designer）。

一个设计好的helloworld.ui文件直接用Qt Designer工具打开，打开之后的效果如下：

在利用Qt Creator新建Qt项目或直接利用Qt Designer新建ui文件时，需要注意几个要点：
（1）要设计和记住生成的主窗口的类的名字，因为后续利用这个ui文件生成的源代码中定义的类名就是对应的这个ui文件中的主窗口名。
例如上述ui文件设计的窗口类名为HelloWorld。

（2）要特别注意你的form选择的基类要和你代码中的窗体类兼容
如上述helloworld.ui中基类为QMainWindow，即在代码中实际使用这个GUI时，只能初始化QMainWindow或以QMainWindow为父类的继承类的界面。
（3）要记得给每个在程序中实际会访问到的控件起一个有意义并且好记的object name，如上述图片中的pushButton、menuBar等， 因为ui文件提供的控件将以这些object name来命名。

2、ui文件生成.h文件

ui文件方便Qt Designer可视化设计Qt界面，但是并不能直接在程序中进行调用。
为了在C++中调用和控制设计好的GUI界面控件内容，Qt提供了**uic(ui compiler)**工具可以将ui文件转为ui_<ui_file_name>.h头文件，这样就能直接在实际应用程序中进行调用了。

例如上述的helloworld.ui文件编译之后就会生成ui_helloworld.h的头文件，在该头文件中就是这个设计好的界面的内容。

我们可以直接打开生成的ui_helloworld.h看一下生成的内容，注意我在源码中加入了部分注释：

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

#ifndef UI_HELLOWORLD_H
#define UI_HELLOWORLD_H

#include <QtCore/QVariant>
#include <QtGui/QAction>
#include <QtGui/QApplication>
#include <QtGui/QButtonGroup>
#include <QtGui/QHeaderView>
#include <QtGui/QMainWindow>
#include <QtGui/QMenuBar>
#include <QtGui/QPushButton>
#include <QtGui/QStatusBar>
#include <QtGui/QToolBar>
#include <QtGui/QWidget>

QT_BEGIN_NAMESPACE

class Ui_HelloWorld
{
public:
    // 根据ui文件中的每个空间的对象名，定义对应名字的成员变量指针
    // 在程序中就是通过这些成员变量来实现对控件的访问和设置
    QWidget *centralWidget;
    QPushButton *pushButton;
    QMenuBar *menuBar;
    QToolBar *mainToolBar;
    QStatusBar *statusBar;

	// 为主窗口类QMainWindow进行界面初始化
    void setupUi(QMainWindow *HelloWorld)
    {
        if (HelloWorld->objectName().isEmpty())
            HelloWorld->setObjectName(QString::fromUtf8("HelloWorld"));
        HelloWorld->resize(918, 578);
        centralWidget = new QWidget(HelloWorld);
        centralWidget->setObjectName(QString::fromUtf8("centralWidget"));
        pushButton = new QPushButton(centralWidget);
        pushButton->setObjectName(QString::fromUtf8("pushButton"));
        pushButton->setGeometry(QRect(320, 170, 231, 81));
        HelloWorld->setCentralWidget(centralWidget);
        menuBar = new QMenuBar(HelloWorld);
        menuBar->setObjectName(QString::fromUtf8("menuBar"));
        menuBar->setGeometry(QRect(0, 0, 918, 52));
        HelloWorld->setMenuBar(menuBar);
        mainToolBar = new QToolBar(HelloWorld);
        mainToolBar->setObjectName(QString::fromUtf8("mainToolBar"));
        HelloWorld->addToolBar(Qt::TopToolBarArea, mainToolBar);
        statusBar = new QStatusBar(HelloWorld);
        statusBar->setObjectName(QString::fromUtf8("statusBar"));
        HelloWorld->setStatusBar(statusBar);

        retranslateUi(HelloWorld);

        QMetaObject::connectSlotsByName(HelloWorld);
    } // setupUi

    void retranslateUi(QMainWindow *HelloWorld)
    {
        HelloWorld->setWindowTitle(QApplication::translate("HelloWorld", "HelloWorld", 0, QApplication::UnicodeUTF8));
        pushButton->setText(QApplication::translate("HelloWorld", "Hello World!", 0, QApplication::UnicodeUTF8));
    } // retranslateUi

};

// 界面类HelloWorld是封装在命名空间Ui中的，这也是为什么在后面实际调用的时候会
// 带着一个命名空间Ui
namespace Ui {
    class HelloWorld: public Ui_HelloWorld {};
} // namespace Ui

QT_END_NAMESPACE

#endif // UI_HELLOWORLD_H

3、程序中调用ui文件内容

为了在程序中调用ui文件内容，从而生成一个图形化界面，首先阐述一下一个简单Qt完整项目中包含的文件及含义（利用Qt Creator创建，注意修改创建类名为HelloWorld）：

每个文件具体内容：

// helloworld.h
#ifndef HELLOWORLD_H
#define HELLOWORLD_H

#include <QMainWindow>

namespace Ui {
class HelloWorld;
}

class HelloWorld : public QMainWindow
{
    Q_OBJECT

public:
    explicit HelloWorld(QWidget *parent = 0); //最顶层父窗口为QWidget
    ~HelloWorld();

private:
    Ui::HelloWorld *ui;//创建一个ui指针对象,因为designer只是设计出来一个myui实体类，是个宏观概念，我们必须定义一个对象才能调用它
};

#endif // HELLOWORLD_H

// helloworld.cpp
#include "helloworld.h"
#include "ui_helloworld.h"

HelloWorld::HelloWorld(QWidget *parent) :
    QMainWindow(parent),
    ui(new Ui::HelloWorld)
{
    ui->setupUi(this);
}

HelloWorld::~HelloWorld()
{
    delete ui;
}

// main.cpp
#include "helloworld.h"
#include <QApplication>

int main(int argc, char *argv[])
{
    QApplication a(argc, argv);
    HelloWorld w;
    w.show();

    return a.exec();
}

【参考】
1、https://blog.csdn.net/sduwgl/article/details/7913763