qt ui界面加入qsplitter-凯发ag旗舰厅登录网址下载

上一篇通过一个 “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 = target

qt 类库以模块的形式组织各种功能的类，根据项目涉及的功能需求，在项目中添加适当的类库模块支持。例如，如果项目中使用到了涉及数据库操作的类就需要用到 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 指针可以访问可视化设计的界面组件就可以了。

---

总结

以上是凯发ag旗舰厅登录网址下载为你收集整理的qt ui界面加入qsplitter_ui 文件设计与运行机制的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得凯发ag旗舰厅登录网址下载网站内容还不错，欢迎将凯发ag旗舰厅登录网址下载推荐给好友。