Qt_designer入门教程
2013-01-18 10:16
246 查看
OpenSource版的QT4 Designer功能比较少，只能只能设计窗体布局以及连接已有的信号与
槽，因此需要手动添加一些代码，不是很容易 上手，今天试验了一下午，终于搞定了，写
篇文章给QT初学者们参考，互相 学习。
Windows下QT的安装可以参考我博客上的转帖《Eclipse + MinGW + Qt开发环境设置》，
安装成功后会在开始菜单中出现“QT Designer”，打开后的界面如下所示：
界面分为几个部分，最常用的是左边的工具箱和右边的属性窗口、信号/槽编辑器。
下面就开始创建第一个QT程序QTDemo。 这个程序是一个最简单的对话框程序，对话
框上有一个按钮，点击该按钮后退出应用程序。
话框：
拖拽一个Push Button到对话框中，双击该 按钮，将按钮文本改为Exit：
在右侧的属性窗口中将objectName改为Form， 这将影响到自动生成的头文件中的类名：
点击信号/槽编辑器中的“+”，添加pushButton的一个信号clicked()，并把该信号连接到Form的close()
槽上：
完成以上设置后将文件保存为form1.ui
“属性”->“环 境变量”，找到“Path”变量，在变量值最后添加：
;E:"Qt"4.4.3"bin;E:"MinGW"bin
所在文件夹，输入以下命令：
uic –o form1.h form1.ui
生成moc的命令：
moc mainwindow.h -o moc_mainwindow.cpp
运行完后将会生成一个form1.h头文件，内容如下（函数内容省略）：
#ifndef FORM1_H
#define FORM1_H
#include <QtCore/QVariant>
#include <QtGui/QAction>
#include <QtGui/QApplication>
#include <QtGui/QButtonGroup>
#include <QtGui/QDialog>
#include <QtGui/QPushButton>
QT_BEGIN_NAMESPACE
class Ui_Form
{
public:
QPushButton *pushButton;
void setupUi(QDialog *Form)
{
…
} // setupUi
void retranslateUi(QDialog *Form)
{
…
} // retranslateUi
};
namespace Ui {
class Form: public Ui_Form {};
} // namespace Ui
QT_END_NAMESPACE
#endif // FORM1_H
最好不要修改这个文件，因为每次修改了ui文件后再重新生成头文件时，所做的修改将都会丢失。下
面简要分析一下这个文件：
（1）首先声明了一个类Ui_Form，该类中包含了一个QPushButton对象和两个成员方法
（2）其次声明了一个名字空间Ui，其中包含了一个类Form
（3）类Form继承了类Ui_Form，但是并没有增加什么新的内容，这样做的目的仅仅是为了将比较怪异
的类名Ui_Form改为Form，这 样在其他文件中直接使用Form类就行了
#ifndef __DLG_H__
#define __DLG_H__
#include <QDialog.h>
#include <form1.h>
class MyDlg : public QDialog
{
Q_OBJECT
public:
MyDlg();
private:
Ui::Form ui;
};
#endif
该头文件首先包 含了form1.h，然后声明了一个类MyDlg，并添加了一个私有成员对象Ui::Form ui，
这样就可以通过该对象控制界面上的所有部件了。
2．新建一个C++文件MyDlg.cpp，内容如下：
#include "MyDlg.h"
MyDlg::MyDlg()
{
ui.setupUi(this);
QObject::connect(ui.pushButton, SIGNAL(clicked()), this, SLOT(close()));
}
在类MyDlg的构造方法中首先调用ui的setupUi()方法，对界面上的部件进行初始化，
然后将pushButton的click()信 号和对话框的close()槽连接起来。
3．新建一个C++文件main.cpp， 写主函数，内容如下：
#include <QApplication>
#include "MyDlg.h"
int main(int argc, char **argv)
{
QApplication app(argc, argv);
MyDlg *mydlg= new MyDlg;
return mydlg->exec();
}
首先创建一个Qapplication对象app，然后 创建一个MyDlg对象mydlg，最后调用mydlg
的exec()方法使其进入窗口消息循环。
进入程序所在目录，在命 令行窗口中输入以下命令：
qmake –project
运行后将生成工程文件QTDemo.pro，内容如下：
TEMPLATE = app
TARGET =
DEPENDPATH += .
INCLUDEPATH += .
# Input
HEADERS += form1.h MyDlg.h
FORMS += form1.ui
SOURCES += main.cpp MyDlg.cpp
该文件归类了程序中的所 有文件。
2．编译工程
在命令行中输入qmake，生成Makefile文件
在命令行中输入make，编译整个工程，生成QTDemo.exe
打开QTDemo.pro，添加如下语句：
TRANSLATIONS += en.ts zh_CN.ts zh_TW.ts
然后在命令行窗口中输入 以下命令：
lupdate QTDemo.pro
这样就生成了3个语言文件：en.ts，zh_CN.ts，zh_TW.ts，分别存放英文、中文、繁体中
文的字符串。en.ts的内容如下：
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE TS><TS version="1.1">
<context>
<name>Form</name>
<message>
<location filename="form1.ui" line="13"/>
<source>Dialog</source>
<translation type="unfinished"></translation>
</message>
<message>
<location filename="form1.ui" line="25"/>
<source>Exit</source>
<translation type="unfinished"></translation>
</message>
</context>
</TS>
这是一个XML文件，其中存放了所有工程中涉及到的字符串。
用linguist（在QT安装目录下的bin目录中）打开zh_CN.ts，选择“编辑”->“翻译文件设置…”，选择
Chinese/China：
选中某一个字符串，在译文文本框中输入对应于中文的字符串：
在翻译完成后一定要记得点击一下字符串前面的“?”，使其变成一个“√”：
最 后选择“文件”->“另外发布为…”，将语言文件发布为zh_CN.qm文件
用同样的方法生成zh_TW.qm文件，唯一不同的地方就是翻译文件设置中应该选择Chinese/Taiwan。
对于en.ts文 件，不需要翻译，直接发布为en.qm即可。
下面在程序中添加对国际 化的支持，将main.cpp修改为如下内容：
#include <QApplication>
#include <QTranslator>
#include "MyDlg.h"
int main(int argc, char **argv)
{
QApplication app(argc, argv);
QTranslator translator;
translator.load(QString(argv[1]));
app.installTranslator(&translator);
MyDlg *mydlg = new MyDlg;
return mydlg->exec();
}
重新执行make命令，生成可执行程序。
在运行程序时通过传递命 令行参数指定所使用的语言，注意不需要指定扩展名.qm，例
如：
QTDemo zh_CN
这样运行程序时界面就编 程中文的了，是不是很简单啊~
在QT Designer中再添加一个按钮，对象名为pushButton_2，按钮文本为ShowInfo，点击该按钮后会弹出
一个消息框，显示HelloWorld。
然后修改MyDlg.h，添加自定义槽ShowInfo()：
#ifndef __DLG_H__
#define __DLG_H__
#include <QDialog.h>
#include <form1.h>
class MyDlg : public QDialog
{
Q_OBJECT
public:
MyDlg();
public slots:
void ShowInfo();
private:
Ui::Form ui;
};
#endif
再修改MyDlg.cpp，将pushButton_2的click()信号和对话框的ShowInfo()槽连接起来，
并且添加消息响应代码ShowInfo()：
#include <QMessageBox>
#include "MyDlg.h"
MyDlg::MyDlg()
{
ui.setupUi(this);
QObject::connect(ui.pushButton, SIGNAL(clicked()), this, SLOT(close()));
QObject::connect(ui.pushButton_2, SIGNAL(clicked()), this,
SLOT(ShowInfo()));
}
void MyDlg::ShowInfo()
{
QMessageBox::information(this, tr("Hello"), tr("Hello World"), tr("OK"));
}
修改完毕后按照本文所介 绍的步骤编译工程，即可将自定义槽添加到应用程序中，运行
结果如下：
槽，因此需要手动添加一些代码，不是很容易 上手，今天试验了一下午，终于搞定了，写
篇文章给QT初学者们参考，互相 学习。
Windows下QT的安装可以参考我博客上的转帖《Eclipse + MinGW + Qt开发环境设置》，
安装成功后会在开始菜单中出现“QT Designer”，打开后的界面如下所示：
界面分为几个部分，最常用的是左边的工具箱和右边的属性窗口、信号/槽编辑器。
下面就开始创建第一个QT程序QTDemo。 这个程序是一个最简单的对话框程序，对话
框上有一个按钮，点击该按钮后退出应用程序。
一、创建用户界面
首先创建一个对话框，“文件”->“新建…”，选择“Dialog without Buttons”， 创建一个不带任何部件的对话框：
拖拽一个Push Button到对话框中，双击该 按钮，将按钮文本改为Exit：
在右侧的属性窗口中将objectName改为Form， 这将影响到自动生成的头文件中的类名：
点击信号/槽编辑器中的“+”，添加pushButton的一个信号clicked()，并把该信号连接到Form的close()
槽上：
完成以上设置后将文件保存为form1.ui
二、设置QT和minGW路径
由于需要用到一些工具程序，为了方便起见，将程序路径添加到环境变量Path中，右击“我的电脑”->“属性”->“环 境变量”，找到“Path”变量，在变量值最后添加：
;E:"Qt"4.4.3"bin;E:"MinGW"bin
三、生成头文件
工具程序uic可以根据ui文件 自动生成.h 文件，以供编程使用。在命令行窗口中，首先进入form1.ui所在文件夹，输入以下命令：
uic –o form1.h form1.ui
生成moc的命令：
moc mainwindow.h -o moc_mainwindow.cpp
运行完后将会生成一个form1.h头文件，内容如下（函数内容省略）：
#ifndef FORM1_H
#define FORM1_H
#include <QtCore/QVariant>
#include <QtGui/QAction>
#include <QtGui/QApplication>
#include <QtGui/QButtonGroup>
#include <QtGui/QDialog>
#include <QtGui/QPushButton>
QT_BEGIN_NAMESPACE
class Ui_Form
{
public:
QPushButton *pushButton;
void setupUi(QDialog *Form)
{
…
} // setupUi
void retranslateUi(QDialog *Form)
{
…
} // retranslateUi
};
namespace Ui {
class Form: public Ui_Form {};
} // namespace Ui
QT_END_NAMESPACE
#endif // FORM1_H
最好不要修改这个文件，因为每次修改了ui文件后再重新生成头文件时，所做的修改将都会丢失。下
面简要分析一下这个文件：
（1）首先声明了一个类Ui_Form，该类中包含了一个QPushButton对象和两个成员方法
（2）其次声明了一个名字空间Ui，其中包含了一个类Form
（3）类Form继承了类Ui_Form，但是并没有增加什么新的内容，这样做的目的仅仅是为了将比较怪异
的类名Ui_Form改为Form，这 样在其他文件中直接使用Form类就行了
四、添加自定义代码
1．新建一个头文件MyDlg.h，内容如下：#ifndef __DLG_H__
#define __DLG_H__
#include <QDialog.h>
#include <form1.h>
class MyDlg : public QDialog
{
Q_OBJECT
public:
MyDlg();
private:
Ui::Form ui;
};
#endif
该头文件首先包 含了form1.h，然后声明了一个类MyDlg，并添加了一个私有成员对象Ui::Form ui，
这样就可以通过该对象控制界面上的所有部件了。
2．新建一个C++文件MyDlg.cpp，内容如下：
#include "MyDlg.h"
MyDlg::MyDlg()
{
ui.setupUi(this);
QObject::connect(ui.pushButton, SIGNAL(clicked()), this, SLOT(close()));
}
在类MyDlg的构造方法中首先调用ui的setupUi()方法，对界面上的部件进行初始化，
然后将pushButton的click()信 号和对话框的close()槽连接起来。
3．新建一个C++文件main.cpp， 写主函数，内容如下：
#include <QApplication>
#include "MyDlg.h"
int main(int argc, char **argv)
{
QApplication app(argc, argv);
MyDlg *mydlg= new MyDlg;
return mydlg->exec();
}
首先创建一个Qapplication对象app，然后 创建一个MyDlg对象mydlg，最后调用mydlg
的exec()方法使其进入窗口消息循环。
五、编译工程
1．生成工程文件进入程序所在目录，在命 令行窗口中输入以下命令：
qmake –project
运行后将生成工程文件QTDemo.pro，内容如下：
TEMPLATE = app
TARGET =
DEPENDPATH += .
INCLUDEPATH += .
# Input
HEADERS += form1.h MyDlg.h
FORMS += form1.ui
SOURCES += main.cpp MyDlg.cpp
该文件归类了程序中的所 有文件。
2．编译工程
在命令行中输入qmake，生成Makefile文件
在命令行中输入make，编译整个工程，生成QTDemo.exe
六、QT国际化（i18n）
要使得应用程序支持多种 语言，并且能够灵活切换，就需要添加QT的国际化支持。打开QTDemo.pro，添加如下语句：
TRANSLATIONS += en.ts zh_CN.ts zh_TW.ts
然后在命令行窗口中输入 以下命令：
lupdate QTDemo.pro
这样就生成了3个语言文件：en.ts，zh_CN.ts，zh_TW.ts，分别存放英文、中文、繁体中
文的字符串。en.ts的内容如下：
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE TS><TS version="1.1">
<context>
<name>Form</name>
<message>
<location filename="form1.ui" line="13"/>
<source>Dialog</source>
<translation type="unfinished"></translation>
</message>
<message>
<location filename="form1.ui" line="25"/>
<source>Exit</source>
<translation type="unfinished"></translation>
</message>
</context>
</TS>
这是一个XML文件，其中存放了所有工程中涉及到的字符串。
用linguist（在QT安装目录下的bin目录中）打开zh_CN.ts，选择“编辑”->“翻译文件设置…”，选择
Chinese/China：
选中某一个字符串，在译文文本框中输入对应于中文的字符串：
在翻译完成后一定要记得点击一下字符串前面的“?”，使其变成一个“√”：
最 后选择“文件”->“另外发布为…”，将语言文件发布为zh_CN.qm文件
用同样的方法生成zh_TW.qm文件，唯一不同的地方就是翻译文件设置中应该选择Chinese/Taiwan。
对于en.ts文 件，不需要翻译，直接发布为en.qm即可。
下面在程序中添加对国际 化的支持，将main.cpp修改为如下内容：
#include <QApplication>
#include <QTranslator>
#include "MyDlg.h"
int main(int argc, char **argv)
{
QApplication app(argc, argv);
QTranslator translator;
translator.load(QString(argv[1]));
app.installTranslator(&translator);
MyDlg *mydlg = new MyDlg;
return mydlg->exec();
}
重新执行make命令，生成可执行程序。
在运行程序时通过传递命 令行参数指定所使用的语言，注意不需要指定扩展名.qm，例
如：
QTDemo zh_CN
这样运行程序时界面就编 程中文的了，是不是很简单啊~
七、添 加自定义槽（slot）
上 面使用的都是系统定义的槽，如果希望在点击某个按钮后产生特定的动作，则需要自定义槽。首先在QT Designer中再添加一个按钮，对象名为pushButton_2，按钮文本为ShowInfo，点击该按钮后会弹出
一个消息框，显示HelloWorld。
然后修改MyDlg.h，添加自定义槽ShowInfo()：
#ifndef __DLG_H__
#define __DLG_H__
#include <QDialog.h>
#include <form1.h>
class MyDlg : public QDialog
{
Q_OBJECT
public:
MyDlg();
public slots:
void ShowInfo();
private:
Ui::Form ui;
};
#endif
再修改MyDlg.cpp，将pushButton_2的click()信号和对话框的ShowInfo()槽连接起来，
并且添加消息响应代码ShowInfo()：
#include <QMessageBox>
#include "MyDlg.h"
MyDlg::MyDlg()
{
ui.setupUi(this);
QObject::connect(ui.pushButton, SIGNAL(clicked()), this, SLOT(close()));
QObject::connect(ui.pushButton_2, SIGNAL(clicked()), this,
SLOT(ShowInfo()));
}
void MyDlg::ShowInfo()
{
QMessageBox::information(this, tr("Hello"), tr("Hello World"), tr("OK"));
}
修改完毕后按照本文所介 绍的步骤编译工程，即可将自定义槽添加到应用程序中，运行
结果如下：
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- Qt入门视频教程（录制中。。。）提出你宝贵的建议吧
- Qt系列教程-yafeilinx Qt入门教程
- Qt快速入门系列教程目录（转）
- qt-designer使用教程--编写自己的槽
- qt入门教程收集
- 树莓派入门教程——使用Qt开发界面程序
- 【QT】QT从零入门教程(五)：图像文件操作 [新建打开保存]
- 【QT】QT从零入门教程(八)：QT常用控件 [QLabel、QPushButton、QLineEdit、QTextEdit]
- Qt快速入门系列教程目录
- Qt QpenGL 入门教程
- 【QT】QT从零入门教程(十二)：实现工具箱QButtonGroup
- 【QT】QT从零入门教程(十六)：QSS样式表
- Qt快速入门系列教程
- qt-designer使用教程1--HelloWorld.txt
- qt3 designer 入门例子
- Pentaho Report Designer 入门教程(一)
- qt-designer使用教程2--调用退出.txt
- 【QT】QT从零入门教程(十四)：标准颜色对话框类QColorDialog
- 介绍一个很不错的QT入门教程
- 【QT】QT从零入门教程(九)：QT常用控件 [QSlider、QSpinBox、QComboBox、QRadioButton]