qt ui界面加入qsplitter_UI 文件设计与运行机制
上一篇通过一个 “Hello World” 实例，演示了在 Qt Creator 里创建应用程序、设计窗体界面、编译和运行程序的基本过程。这一篇将介绍可视化设计的 UI 界面文件的原理和运行机制。
本篇目录：
1. 项目文件组成
2. 项目管理文件
3. 界面文件
4. 主函数文件
5. 窗体相关的文件
1. 项目文件组成
在 Qt Creator 中新建一个 Widget Application 项目，选择 QWidget 作为窗体基类，并选中 “创建界面” 复选框。
选择基类界面
创建后的项目文件目录树以及各文件说明如下图所示。
项目文件的目录树
说明：在 C++ 里，任何窗体或界面组件都是用类封装的，一般情况下，一个类包含一个头文件 (.h) 和一个源程序文件 (.cpp)。
2. 项目管理文件
项目管理文件 (UImechanism.pro) 用于记录项目的一些设置，以及项目包含文件的组织管理，其内容如下：(可以左右滑动以查看完整代码，下同)
#-------------------------------------------------## Project created by QtCreator 2019-03-03T14:41:29##-------------------------------------------------QT += core gui # 在项目中加入用于 GUI 设计的 core gui 模块greaterThan(QT_MAJOR_VERSION, 4): QT += widgets # 当 Qt 主版本大于 4 时，才加入 widgets 模块TARGET = UImechanism # 生成的目标可执行文件的名称，即 UImechanism.exeTEMPLATE = app # 项目使用的模板是 app，是一般的应用程序# The following define makes your compiler emit warnings if you use# any feature of Qt which has been marked as deprecated (the exact warnings# depend on your compiler). Please consult the documentation of the# deprecated API in order to know how to port your code away from it.DEFINES += QT_DEPRECATED_WARNINGS# You can also make your code fail to compile if you use deprecated APIs.# In order to do so, uncomment the following line.# You can also select to disable deprecated APIs only up to a certain version of Qt.#DEFINES += QT_DISABLE_DEPRECATED_BEFORE=0x060000 # disables all the APIs deprecated before Qt 6.0.0CONFIG += c++11SOURCES += \ main.cpp \ widget.cppHEADERS += \ widget.hFORMS += \ widget.ui# Default rules for deployment.qnx: target.path = /tmp/$${TARGET}/binelse: unix:!android: target.path = /opt/$${TARGET}/bin!isEmpty(target.path): INSTALLS += targetQt 类库以模块的形式组织各种功能的类，根据项目涉及的功能需求，在项目中添加适当的类库模块支持。例如，如果项目中使用到了涉及数据库操作的类就需要用到 sql 模块，在 .pro 文件中需要增加如下一行：
Qt += sql后面的 SOURCES, HEADERS, FORMS 记录了项目中包含的源程序文件、头文件和窗体文件(.ui 文件)的名称。这些文件列表是 Qt Creator 自动添加到项目管理文件里面的，用户不需要手动修改。当添加一个文件到项目，或从项目里删除一个文件时，项目管理文件里的条目会自动修改。
3. 界面文件
双击项目文件目录树中的窗体界面文件 (widget.ui)，打开集成在 Qt Creator 中的 UI 设计器 (Qt Designer)，其功能区域如下图所示。
集成在 Qt Creator 中的 UI 设计器
将一个 Label 组件和一个 Push Button 组件拖放到设计的窗体上面，调整好位置。设置 Label 组件的 ”text“ 属性为 “Hello, World”，“font“ -> ”点大小” 属性为 20；设置 Push Button 组件的 ”text“ 属性为 “关闭”。
窗体设计界面
选中窗体上的 Label 组件，属性编辑器的内容如下：
界面组件 Label 的属性编辑器
(属性的多个分组表示了类的继承关系，图中 QLabel 的继承关系是 QObject→QWidget→QFrame→QLabel)
选中窗体上的 Push Button 组件，属性编辑器的内容如下：
界面组件 Push Botton 的属性编辑器
编辑完两个组件的属性之后，再为 pushButton 按钮添加一个功能：单击此按钮时，关闭窗口，退出程序。使用 ”信号与槽“ 编辑器完成这个功能，步骤如下：
单击 ”信号与槽“ 编辑器左上角的 “+” 按钮；
在出现的条目中，
选择
选择
选择
选择
信号与槽编辑器中设计信号与槽的关联
对项目进行编译和运行，可以出现如下图所示的窗口，单击 “关闭” 按钮可以关闭程序。
运行结果
4. 主函数文件
主程序入口文件 main.cpp 是实现 main() 函数的文件，它的主要功能是创建应用程序，创建窗口，显示窗口，并运行应用程序，开始应用程序的消息循环和事件处理，内容如下：
#include "widget.h"#include int main(int argc, char *argv[]){ QApplication a(argc, argv); // 定义并创建应用程序 Widget w; // 定义并创建窗口 w.show(); // 显示窗口 return a.exec(); // 应用程序运行}5. 窗体相关的文件
对项目进行编译和运行后，在项目的目录下自动生成一个 ui_widget.h 文件，其中包含一个名称是 Ui_Widget 的类，它是根据窗体上的组件及其属性、信号与槽的关联等自动生成的一个类的定义文件。
为了搞清楚窗体类的定义，以及界面功能的实现原理，下面分别分析各个文件的内容及其功能，以及它们是如何联系在一起工作实现界面的创建与显示的。
窗体类的头文件 widget.h
在创建项目时，选择窗体基类是 QWidget，在 widget.h 中定义了一个继承自 QWidget 的类 Widget，下面是 widget.h 文件的内容与手动添加的注释：
#ifndef WIDGET_H#define WIDGET_H#include namespace Ui { // 一个命名空间 Ui，包含一个类 Widget class Widget;}class Widget : public QWidget // 继承于 QWidget 的类 Widget 的定义{ Q_OBJECT // 用 Qt 的信号与槽机制的类都必须加入的一个宏 public: // Widget 类的构造函数和析构函数 explicit Widget(QWidget *parent = 0); ~Widget(); private: // 使用 Ui::Widget 定义的一个指针，指向可视化设计的界面 Ui::Widget *ui; };#endif窗体类的源文件 widget.cpp
源文件 widget.cpp 是类 Widget 的实现代码，内容与手动添加的注释如下：
#include "widget.h"#include "ui_widget.h" // 编译生成的与 UI 文件 widget.ui 对应的类定义文件// 执行父类 QWidget 的构造函数，创建一个 Ui::Widget 类的对象 uiWidget::Widget(QWidget *parent) : QWidget(parent), ui(new Ui::Widget){ // 实现窗口的生成与各种属性的设置、信号与槽的关联 ui->setupUi(this);}Widget::~Widget(){ delete ui; // 删除用 new 创建的指针 ui}窗体界面定义文件 widget.ui
这是一个 XML 文件，定义了窗口上的所有组件的属性设置、布局，及其信号与槽函数的关联等。用 Qt Designer 可视化设计的界面都由 Qt 自动解析，并以 XML 文件的形式保存下来。在设计界面时，只需在 UI 设计器里进行可视化设计即可，而不用管 widget.ui 文件是怎么生成的。 widget.ui 文件的内容如下：
Widgetclass> 0x> 0y> 400width> 300height> rect> property> Widgetstring> property> 100x> 80y> 211width> 51height> rect> property> 20pointsize> font> property> Hello, Worldstring> property> widget> 160x> 220y> 89width> 24height> rect> property> 关闭string> property> widget> widget> pushButtonsender> clicked()signal> Widgetreceiver> close()slot> 204x> 231y> hint> 199x> 149y> hint> hints> connection> connections>ui> ui_widget.h 文件
对 widget.ui 文件进行编译，会生成 ui_widget.h 文件。根据项目 shadow build 编译设置不同，ui_widget.h 会出现在编译后的目录下，或与 widget.ui 同目录。
注意：ui_widget.h 是对 widget.ui 文件编译后自动生成的，widget.ui 又是通过 UI 设计器可视化设计生成的。所以，对 ui_widget.h 手工进行修改没有什么意义，所有涉及界面的修改都应该直接在 Qt Designer 里进行。故 ui_widget.h 也没有必要添加到项目里。
ui_widget.h 文件内容如下：
/********************************************************************************** Form generated from reading UI file 'widget.ui'** Created by: Qt User Interface Compiler version 5.12.1** WARNING! All changes made in this file will be lost when recompiling UI file!********************************************************************************/#ifndef UI_WIDGET_H#define UI_WIDGET_H#include #include #include #include #include QT_BEGIN_NAMESPACEclass Ui_Widget{public: QLabel *label; QPushButton *pushButton; void setupUi(QWidget *Widget){ if (Widget->objectName().isEmpty()) Widget->setObjectName(QString::fromUtf8("Widget")); Widget->resize(400, 300); label = new QLabel(Widget); label->setObjectName(QString::fromUtf8("label")); label->setGeometry(QRect(100, 80, 211, 51)); QFont font; font.setPointSize(20); label->setFont(font); pushButton = new QPushButton(Widget); pushButton->setObjectName(QString::fromUtf8("pushButton")); pushButton->setGeometry(QRect(160, 220, 89, 24)); retranslateUi(Widget); QObject::connect(pushButton, SIGNAL(clicked()), Widget, SLOT(close())); QMetaObject::connectSlotsByName(Widget); } // setupUi void retranslateUi(QWidget *Widget){ Widget->setWindowTitle(QApplication::translate("Widget", "Widget", nullptr)); label->setText(QApplication::translate("Widget", "Hello, World", nullptr)); pushButton->setText(QApplication::translate("Widget", "\345\205\263\351\227\255", nullptr)); } // retranslateUi};namespace Ui { class Widget: public Ui_Widget {};} // namespace UiQT_END_NAMESPACE#endif // UI_WIDGET_H文件 ui_widget.h 中主要做了以下的一些工作：
定义了一个 Ui_Widget 类，用于封装可视化设计的界面；
自动生成了界面各个组件的类成员变量定义；
定义了 setupUi() 函数，这个函数用于创建各个界面组件，并设置其位置、大小、文字内容、字体等属性，设置信号与槽的关联；
定义 namespace Ui 以及定义一个从 Ui_Widget 继承的 Widget 类。
提示：ui_widget.h 文件里实现界面功能的类是 Ui_Widget。再定义一个类 Widget 从 Ui_Widget 继承而来，并定义在 namespace Ui 里，这样 Ui::Widget 与 widget.h 里的类 Widget 同名，但是用 namespace 区分开来。所以，界面的 Ui::Widget 类与文件 widget.h 里定义的 Widget 类实际上是两个类，但是 Qt 的处理让用户感觉不到 Ui::Widget 类的存在，只需要知道在 Widget 类里用 ui 指针可以访问可视化设计的界面组件就可以了。
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！