使用VS2010调用QtDesigner设计的UI文件，并实现控件功能

文档名称	Qt学习笔记20120816
创建时间	2012/8/16
修改时间	2012/8/16
创建人	Baifx
内容简介	阅读此文可以收获一下内容： 1、使用QtDesigner设计UI； 2、使用VS2010调用QtDesigner设计的UI； 3、QtDesigner设计中的槽函数的实现。 4、自己定义的槽函数与UI中的控件的关联。 5、原理说明。

一、利用Qt Designer设计UI。

参见《Linux窗口程序设计—Qt4精彩实例分析》

1、使用Qt Designer设计对话框的步骤：

2、Qt Designer5中表单模板。

3、创建窗体，在窗体放置控件（拖动控件到窗体界面）；

4、布局控件；

       选择位于同一行的所有控件，选择Qt Designer菜单中的Form->LayOut Horizontally命令，完成所选控件的水平布局。完成布局后适当调整整个窗体的大小，以适应控件的大小。

5、设置各控件标签顺序；

       选择Qt Designer菜单中的Edit->Edit Tab Order命令，进入标签设置模式，窗体中各个空间上出现蓝色的小框，框内的数字表示该控件的标签顺序，即焦点顺序，如下图所示，可以单击蓝色小框修改标签顺序。完成后选择QtDesigner菜单中的Edit->Edit Widgets命令（或者F3）离开标签设置模式。

6、创建和连接信号和槽

       选择Qt Designer菜单中的Edit->EditSignals/Slots命令，进入信号/槽连接模式，如下图所示。

此时单击控件，然后拖动鼠标，可以发现一根红色的类似接地线的标志线被拖出，松开鼠标，弹出信号/槽的连接配置窗口，如下图所示。

注：选择左边列表框中的信号，然后才可以选择右边槽函数，之后点击确定即可。

疑问：这些槽函数所代表的意思分别是？？

至此，关于QtDesigner的操作就结束了，生成一个.ui文件。此文件即是UI文件，使用前需要加入工程并被编译。

 

【使用QtDesigner设计对话框的优劣】可以节省设计对话框的时间，而且修改方便、直观，对于初学者来说，这是一种入门的好方法。带随着程序越来越复杂，QtDesigner也有不利的地方：首先，使用QtDesigner生成的代码比较庞大，很多代码是自动生成的，不利于开发者阅读；其次，不利于对Qt编程本质的理解。

 

二、调用QtDesigner生成的ui文件。

说明：我的开发环境是在VS2010中开发Qt程序，所以以下所有内容均是在此基础上做的实现。此开发环境的搭建见博文《QT介绍以及配置QT使用VS2010开发》

1、单纯的调用ui文件。

在上面生成的ui文件为myui.ui，如何将其添加到工程中并使用呢，步骤如下：

a、使用VS2010新建Qt Application，工程名myui；

b、使用QtDesigner生成的myui.ui文件覆盖VS2010建立Qt工程中的myui.ui；

c、在VS2010解决方案树状图中找到myui.ui，右键选择“编译”命令，VS会自动调用Qt的uic工具编译ui文件，生成头文件ui_myui.h。这个文件包含了在Designer中所做的所有工作。

【对生成的ui_myui.h说明】

c1、该文件是自动生成的，如果在UI设计过程中连接了信号和槽，那么生成的代码中将出现如下类似代码：

retranslateUi(Dialog);

QObject::connect(pushButtonOK, SIGNAL(clicked()), Dialog, SLOT(accept()));

QObject::connect(pushButtonCancel, SIGNAL(clicked()), Dialog, SLOT(reject()));

 

QMetaObject::connectSlotsByName(Dialog);

用于将UI中控件的信号和槽函数绑定。

这样在自己实现槽函数的时候就不用再写绑定函数了。

c2、在此.h文件中有定义了一个类class Ui_Dialog，并且有一个Dialog类以public的方式继承Ui_Dialog，在namespace ui中，class Dialog: public Ui_Dialog {} 名字可能有些不同。特别说明：Dialog即是我们用designer设计的ui实体类。在main函数中就是使用此类声称对象。

d、修改myui工程的main.cpp文件。如下：

将原有包含的头文件“myui.h”修改为新生成的ui_myui.h，包含Dialog头文件。在main函数中添加如图所示代码运行即可运行调用UI文件。目前只是调用了UI，并没有实现槽函数。

 

2、实现UI中添加的系统定义槽函数。

自己定义类实现槽函数。为什么要自己定义类呢？是这样的，如果我们直接调用的话，有很大的弊端：当我们的工程很浩大的时候，如果我们要修改ui文件了，则要相应改很多源程序来继续当前的功能，而如果我们定义一个类来继承它的话，随你ui怎么变，跟我关系不是很大。参见：

http://hi.baidu.com/togethershore/blog/item/302ba89af858ebbdc9eaf4e9.html

myclass.h
#include

#include “ui_myui.h”
namespace Ui
{
    class myui;//注：designer生成的ui类为ui_DialogClass,而我们只是用它的派生类myui ，即myui是ui_DialogClass的一个实体
}

class myclass : public QDialog//自定义一个类myclass,通过调用ui类
{
    Q_OBJECT
public:
    myclass(QWidget *parent = 0);//最顶层父窗口为QWidget
    ~myclass();

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

myclass::myclass(QWidget *parent) :QDialog(parent),ui(new Ui::myui)
{
    ui->setupUi(this);//使用ui类
   //如果没有在UI设计过程中连接信号和槽函数则在此处添加。
}
myclass::~myclass()
{
    delete ui;
}
OK!我们的类已经定义好，写main函数调用自定义的类
#include
#include"myclass.h"//注:为什么只要这个头文件就可以了呢？因为当我们创建一个myclass的对象的时候，会自动调用它的构造函数，释放时自动调用其析构函数。事实上我们不止只用一个构造函数与析构函数，这时候怎么办呢？在myclass.h中声明该函数，在myclass.cpp中写具体实现方法。
int main(int argc,char *argv[])
{
    QApplication app(argc,argv);
    myclass window;
    window.show();
    return app.exec();
}

3、如果没有在UI设计过程中连接信号和槽函数则在自己定义的实现类中添加槽函数，并连接，连接位置一般在实现类的构造函数中。此时connect函数在使用UI上的控件时一定要加前缀。如下：

connect( ui->pushButton, SIGNAL( clicked() ), this, SLOT( close() ) );

 

三、原理。稍后更新...