QT程序中引入designer自定义窗口部件

作为一个科班出生的程序猿，总喜欢亲力亲为，包括UI也总要通过代码实现。但是QT designer提供了一种高效率、简洁美观的绘制UI的方法，总有它存在的必要和优点吧。所以，今天操刀来把绘制的UI文件（.ui格式）引入自己的工程中。

（一）绘制xx.ui

作为一款所见即所得的UI绘制工具，qt designer足够强大和简易，新建一个文件保存该ui文件。qt designer怎么用不是今天的重点，傻瓜式的操作，呵呵。

注意:

（1）部件的命名要符合自己的一贯风格，方便后续开发。

(2)顶层窗口部件的objectName就是xx.ui文件生成的ui_xx.h文件中Ui命名空间自动产生的类名。

比如在绘制xx.ui时，我把顶层窗口命名为finddialog，那么通过uic生成的ui_xx.h文件自动命名的类名就为finddialog

其他的问题遇到再补充。

（二）uic编译工具编译xx.ui

这一步成功的关键是正确配置qmake工具，在安装QT 时就要注意，如果qmake工具变量配置不正确，重新配置环境变量。

我在win7下： 打开 qt command prompt会提示一些配置好的环境变量：

（1）如果qmake工具配置正确，打开qmake，windows下打开QT安装时产生的 qt command prompt即可。

（2）切换到保存xx.ui文件的目录下

windows下切换路径相比linux有点蛋疼，要再确定盘符才能进入目录：

（三）uic -o ui_xx.h xx.ui

调用UIC编译工具将XML的xx.ui文件编译成C++源文件:ui_xx.h

注意命名规则：ui_xx.h

执行完后，工作目录中中会产生ui_xx.h文件，打开看看：

（1）自动生成的注释，提示修改该文件无效。自动添加用到的头文件。

（2）头文件定义了一个POD（plain old data）类Ui_finddialog，所用到的部件都声明为public，所以，你可以放心的继承该类，放心的直接调用其成员。

（3）头文件里定义了几个内联函数，是公有函数。最重要的就是函数setUi(),它对传入的窗口部件设置标题、大小、子部件和窗口和布局等，并作为顶层窗口部件，该函数还限制了传入窗口部件的类型，该类型是绘制xx.ui时顶层窗口的类型。所以在绘制xx.ui时考虑清楚选择什么类型作为顶层窗口。

（4）自动生成一个Ui命名空间，在该命名空间里共有继承了自动生成的类Ui_xx,新的类名就是顶层窗口的objectName。

（四）在程序中引入生成的窗口部件，生成.pro工程

注意：此时还没有建立.pro工程，只有一个头文件。

引入生成的窗口部件其实就是该如何使用生成的类。

有三种方式：

（1）直接使用

直接把生成的头文件当做普通头文件，只不过不用实现.cpp文件啦，放在自己的程序中使用。

（2）单一继承

在QT creator中直接创建带UI文件的工程时，默认采用单一继承的方式。把UI文件产生的类当做私有成员，其内联函数通过类名调用。

#ifndef WIDGET_H
#define WIDGET_H

#include <QWidget>

namespace Ui {
class Widget;
}

class Widget : public QWidget
{
    Q_OBJECT

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

private:
    Ui::Widget *ui;
};

#endif // WIDGET_H

#include "widget.h"
#include "ui_widget.h"

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

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

（3）多重继承

（五）直接使用的例子

（1）在工作目录下新建main.cpp空白文件，使用喜欢的编辑器编辑该文件，调用ui_xx.h

#include<QApplication>
#include<QDialog>
#include "ui_finddialog.h"
int main(int argc, char *argv[])
{
    QApplication app(argc, argv);
    Ui::finddialog ui;
	QDialog *dialog = new QDialog;
	ui.setupUi(dialog);
	dialog->show();
	return app.exec();
}

要点：添加头文件，调用生成类和共有函数。测试程序，这里先不考虑内存泄露问题。

（2）qmake -project

该命令生成一个和之前新建保存xx.ui文件的文件夹名一样的.pro文件，所以文件夹命名也要注意。

######################################################################
# Automatically generated by qmake (2.01a) ?? ?? 7 20:44:34 2014
######################################################################

TEMPLATE = app
TARGET = 
DEPENDPATH += .
INCLUDEPATH += .

# Input
FORMS += finddialog.ui
SOURCES += main.cpp

修改该.pro文件：

加入头文件：

HEADERS +=ui_finddialog.h

（3）.pro修改完成后，在QT IDE下编译即可，运行结果：