Qt项目界面文件ui及其作用.docx
《Qt项目界面文件ui及其作用.docx》由会员分享，可在线阅读，更多相关《Qt项目界面文件ui及其作用.docx（10页珍藏版）》请在冰豆网上搜索。
Qt项目界面文件ui及其作用
Qt项目中，后缀为“.ui”的文件是可视化设计的窗体的定义文件，如widget.ui。
双击项目文件目录树中的文件widget.ui，会打开一个集成在QtCreator中的QtDesigner对窗体进行可视化设计，如图1所示。
图1集成在QtCreator中的UI设计器
本教程后面将称这个集成在QtCreator中的QtDesigner为“UI设计器”，以便与独立运行的QtDesigner区别开来。
图1中的UI设计器有以下一些功能区域：
∙组件面板：
窗口左侧是界面设计组件面板，分为多个组，如Layouts、Buttons、DisplayWidgets等，界面设计的常见组件都可以在组件面板里找到。
∙中间主要区域是待设计的窗体。
如果要将某个组件放置到窗体上时，从组件面板上拖放一个组件到窗体上即可。
例如，先放一个Label和一个PushButton到窗体上。
∙Signals和Slots编辑器与Action编辑器是位于待设计窗体下方的两个编辑器。
Signals和Slots编辑器用于可视化地进行信号与槽的关联，Action编辑器用于可视化设计Action。
∙布局和界面设计工具栏：
窗口上方的一个工具栏，工具栏上的按钮主要实现布局和界面设计。
∙对象浏览器（ObjectInspector）：
窗口右上方是ObjectInspector，用树状视图显示窗体上各组件之间的布局包含关系，视图有两列，显示每个组件的对象名称（ObjectName）和类名称。
∙属性编辑器（PropertyEditor）：
窗口右下方是属性编辑器，是界面设计时最常用到的编辑器。
属性编辑器显示某个选中的组件或窗体的各种属性及其取值，可以在属性编辑器里修改这些属性的值。
图2显示的是选中窗体上放置的标签组件后属性编辑器的内容。
最上方显示的文字“LabDemo:
QLabel”表示这个组件是一个QLabel类的组件，objectName是LabDemo。
图2界面组件的属性编辑器
属性编辑器的内容分为两列，分别为属性的名称和属性的值。
属性又分为多个组，实际上表示了类的继承关系，如在图2中，可以看出QLabel的继承关系是QObject→QWidget→QFrame→QLabel。
objectName表示组件的对象名称，界面上的每个组件都需要一个唯一的对象名称，以便被引用。
界面上的组件的命名应该遵循一定的法则，具体使用什么样的命名法则根据个人习惯而定，主要目的是便于区分和记忆，也要便于与普通变量相区分。
设置其他属性的值只需在属性编辑器里操作即可，如设置LabDemo的text属性为“Hello,World”，只需像图2那样修改text属性的值即可。
提示，标准 C++ 语言里并没有property关键字，property是Qt对标准C++的扩展，使得在QtDesigner里就可以可视化设置类的数据。
在图1显示的设计窗体上，放置一个Label和一个PushButton组件，它们的主要属性设置见表3。
表3界面组件的属性设置
ObjectName
类名称
属性设置
备注
LabDemo
QLabel
Text=”Hello,World”
Font.PointSize=20
Font.bold=true
设置标签显示文字和字体
btnClose
QPushButton
Text=”Close”
设置按钮的文字
编辑完属性之后，再为btnClose按钮增加一个功能，就是单击此按钮时，关闭窗口，退出程序。
使用Signals和Slots编辑器完成这个功能，如图4所示。
图4信号与槽编辑器中设计信号与槽的关联
在信号与槽编辑器的工具栏上单击“Add”按钮，在出现的条目中，Sender选择btnClose，Signal选择clicked（），Receiver选择窗体Widget，Slot选择close（）。
这样设置表示当按钮btnClose被单击时，就执行Widget的close（）函数，实现关闭窗口的功能。
然后对项目进行编译和运行，可以出现如图5所示的窗口，单击“Close”按钮可以关闭程序。
图5具有Close按钮的“HelloWorld”程序
标签的文字内容和字体被修改了，窗口标题也显示为所设置的标题，而我们并没有编写一行程序语句，Qt是怎么实现这些功能的呢？
为了搞清楚窗体类的定义，以及界面功能的实现原理，这里将项目进行编译。
编译后在项目目录下会自动生成一个文件ui_widget.h，这样对于一个窗体，就有4个文件了，各文件的功能说明见表6。
表6窗体相关的4个文件
文件名
功能
widget.h
定义窗体类的头文件，定义了类Widget
widget.cpp
Widget类的功能实现源程序文件
widget.ui
窗体界面文件，由UI设计器自动生成，存储了窗体上各个组件的属性设置和布局
ui_widget.h
编译后，根据窗体上的组件及其属性、信号与槽的关联等自动生成的一个类的定义文件，类的名称是Ui_Widget
下面分别分析各个文件的内容及其功能，以及它们是如何联系在一起工作，实现界面的创建与显示的。
widget.h文件
widget.h文件是窗体类的头文件。
在创建项目时，选择窗体基类是QWidget，在widget.h中定义了一个继承自QWidget的类Widget。
下面是widget.h文件的内容：
#ifndefWIDGET_H
#defineWIDGET_H
#include
namespaceUi{
classWidget;
}
classWidget:
publicQWidget
{
Q_OBJECT
public:
explicitWidget（QWidget*parent=0）;
~Widget（）;
private:
Ui:
:
Widget*ui;
};
#endif//WIDGET_H
widget.h文件有几个重要的部分。
namespace声明
代码中有如下的一个namespace声明：
namespaceUi{
classWidget;
}
这是声明了一个名称为Ui的命名空间（namespace），包含一个类Widget。
但是这个类Widget并不是本文件里定义的类Widget，而是ui_widget.h文件里定义的类，用于描述界面组件的。
这个声明相当于一个外部类型声明（具体要看完ui_widget.h文件内的解释之后才能搞明白）。
Widget类的定义
widget.h文件的主体部分是一个继承于QWidget的类Widget的定义，也就是本实例的窗体类。
在Widget类中使用了宏Q_OBJECT，这是使用Qt的信号与槽（signal和slot）机制的类都必须加入的一个宏（信号与槽在后面详细介绍）。
在public部分定义了Widget类的构造函数和析构函数。
在private部分又定义了一个指针。
Ui:
:
Widget*ui;
这个指针是用前面声明的namespaceUi里的Widget类定义的，所以指针ui是指向可视化设计的界面，后面会看到要访问界面上的组件，都需要通过这个指针ui。
widget.cpp文件
widget.cpp文件是类Widget的实现代码，下面是widget.cpp文件的内容。
#include"widget.h"
#include"ui_widget.h"
Widget:
:
Widget（QWidget*parent）:
QWidget（parent）,
ui（newUi:
:
Widget）
{
ui->setupUi（this）;
}
Widget:
:
~Widget（）
{
deleteui;
}
注意到，在这个文件的包含文件部分自动加入了如下一行内容：
#include"ui_widget.h"
这个就是Qt编译生成的与UI文件widget.ui对应的类定义文件。
目前只有构造函数和析构函数。
其中构造函数头部是：
Widget:
:
Widget（QWidget*parent）:
QWidget（parent）,ui（newUi:
:
Widget）
其意义是：
执行父类QWidget的构造函数，创建一个Ui:
:
Widget类的对象ui。
这个ui就是Widget的private部分定义的指针变量ui。
构造函数里只有一行语句：
ui->setupUi（this）
它是执行了Ui:
:
Widget类的setupUi（）函数，这个函数实现窗口的生成与各种属性的设置、信号与槽的关联（后面会具体介绍）。
析构函数只是简单地删除用new创建的指针ui。
所以，在ui_widget.h文件里有一个namespace名称为Ui，里面有一个类Widget是用于描述可视化设计的窗体，且与widget.h里定义的类同名。
在Widget类里访问Ui:
:
Widget类的成员变量或函数需要通过Widget类里的ui指针，如同构造函数里执行ui->setupUi（this）函数那样。
widget.ui文件
widget.ui是窗体界面定义文件，是一个XML文件，定义了窗口上的所有组件的属性设置、布局，及其信号与槽函数的关联等。
用UI设计器可视化设计的界面都由Qt自动解析，并以XML文件的形式保存下来。
在设计界面时，只需在UI设计器里进行可视化设计即可，而不用管widget.ui文件是怎么生成的。
ui_widget.h文件
ui_widget.h是在对widget.ui文件编译后生成的一个文件，ui_widget.h会出现在编译后的目录下，或与widget.ui同目录（与项目的shadowbuild编译设置有关）。
文件ui_widget.h并不会出现在QtCreator的项目文件目录树里，当然，可以手工将ui_widget.h添加到项目中。
方法是在项目文件目录树上，右击项目名称节点，在调出的快捷菜单中选择“AddExistingFiles…”，找到并添加ui_widget.h文件即可。
注意，ui_widget.h是对widget.ui文件编译后自动生成的，widget.ui又是通过UI设计器可视化设计生成的。
所以，对ui_widget.h手工进行修改没有什么意义，所有涉及界面的修改都应该直接在UI设计器里进行。
所以，ui_widget.h也没有必要添加到项目里。
下面是ui_widget.h文件的内容：
1./********************************************************************************
2.**FormgeneratedfromreadingUIfile'widget.ui'
3.**
4.**Createdby:
QtUserInterfaceCompilerversion5.9.1
5.**
6.**WARNING!
AllchangesmadeinthisfilewillbelostwhenrecompilingUIfile!
7.********************************************************************************/
8.
9.#ifndefUI_WIDGET_H
10.#defineUI_WIDGET_H
11.
12.#include
13.#include
14.#include
15.#include
16.#include
17.#include
18.#include
19.#include
20.
21.QT_BEGIN_NAMESPACE
22.
23.classUi_Widget
24.{
25.public:
26.QLabel*label;
27.QPushButton*btnClose;
28.
29.voidsetupUi（QWidget*Widget）
30.{
31.if（Widget->objectName（）.isEmpty（））
32.Widget->setObjectName（QStringLiteral（"Widget"））;
33.Widget->resize（336,216）;
34.label=newQLabel（Widget）;
35.label->setObjectName（QStringLiteral（"label"））;
36.label->setGeometry（QRect（100,70,141,61））;
37.QFontfont;
38.font.setPointSize（12）;
39.font.setBold（true）;
40.font.setWeight（75）;
41.label->setFont（font）;
42.btnClose=newQPushButton（Widget）;
43.btnClose->setObjectName（QStringLiteral（"btnClose"））;
44.btnClose->setGeometry（QRect（210,150,75,23））;
45.
46.retranslateUi（Widget）;
47.QObject:
:
connect（btnClose,SIGNAL（clicked（））,Widget,SLOT（close（）））;
48.
49.QMetaObject:
:
connectSlotsByName（Widget）;
50.}//setupUi
51.
52.voidretranslateUi（QWidget*Widget）
53.{
54.Widget->setWindowTitle（QApplication:
:
translate（"Widget","MyFirstDemo",Q_NULLPTR））;
55.label->setText（QApplication:
:
translate（"Widget","Hello\357\274\214World",Q_NULLPTR））;
56.btnClose->setText（QApplication:
:
translate（"Widget","Close",Q_NULLPTR））;
57.}//retranslateUi
58.
59.};
60.
61.namespaceUi{
62.classWidget:
publicUi_Widget{};
63.}//namespaceUi
64.
65.QT_END_NAMESPACE
66.
67.#endif//UI_WIDGET_H
查看ui_widget.h文件的内容，发现它主要做了以下的一些工作：
1.定义了一个类Ui_Widget，用于封装可视化设计的界面。
2.自动生成了界面各个组件的类成员变量定义。
在public部分为界面上每个组件定义了一个指针变量，变量的名称就是设置的objectName。
比如，在窗体上放置了一个QLabel和一个QPushButton并命名后，自动生成的定义是：
QLabel*LabDemo;
QPushButton*btnClose;
3.定义了setupUi（）函数，这个函数用于创建各个界面组件，并设置其位置、大小、文字内容、字体等属性，设置信号与槽的关联。
setupUi（）函数体的第一部分是根据可视化设计的界面内容，用C++代码创建界面上各组件，并设置其属性。
接下来，setupUi（）调用了函数retranslateUi（Widget），用来设置界面各组件的文字内容属性，如标签的文字、按键的文字、窗体的标题等。
将界面上的文字设置的内容独立出来作为一个函数retranslateUi（），在设计多语言界面时会用到这个函数。
setupUi（）函数的第三部分是设置信号与槽的关联，本文件中有以下两行：
QObject:
:
connect（btnClose,SIGNAL（clicked（））,Widget,SLOT（close（）））;
QMetaObject:
:
connectSlotsByName（Widget）;
4.定义namespaceUi，并定义一个从Ui_Widget继承的类Widget。
namespaceUi{
classWidget:
publicUi_Widget{};
}
提示：
ui_widget.h文件里实现界面功能的类是Ui_Widget。
再定义一个类Widget从Ui_Widget继承而来，并定义在namespaceUi里，这样Ui:
:
Widget与widget.h里的类Widget同名，但是用namespace区分开来。
所以，界面的Ui:
:
Widget类与文件widget.h里定义的Widget类实际上是两个类，但是Qt的处理让用户感觉不到Ui:
:
Widget类的存在，只需要知道在Widget类里用ui指针可以访问可视化设计的界面组件就可以了。
升级会员 