Qt：UI文件设计和运行机制

迈不过友情╰ 2022-05-17 10:23 265阅读 0赞

# 1、项目文件组成 #

在QtCreator中新建一个WidgetApplocation项目，选中窗口基类中选中QWidget作为窗口基类，并选中"GnerateForm"复选框。创建后项目文件目录树如图：

*  项目组织文件pro：存储项目设置的文件
 *  主程序入口文件main.cpp，实现main函数的程序文件
 *  窗体界面文件widget.ui：一个XML格式存储的窗体上的文件以及其布局的文件
 *  widget.h是所设计的窗口类的头文件，widget.cpp是widget.h里定义类的实现文件。在C++里面，任何窗体或者界面组件都是用类封装的，一个类一般有一个头文件和一个源文件。

# 2、项目管理文件.pro #

用于记录项目的一些配置以及项目包含文件的组织管理。

QT       += core gui

>  *  QT \+= core gui表示项目中加入core gui模块。 core gui用于GUI设计的类模块。如果创建控制台应用程序，就不需要添加core gui。
>  *  QT类以模块的形式组织各种功能的类，根据项目设计的功能添加适当的类库模块支持。比如如果涉及到数据库操作的类就需要用到SQL模块：QT += sql

greaterThan(QT_MAJOR_VERSION, 4): QT += widgets

>  *  条件执行语句，表示当 Qt 主版本大于 4 时，才加入 widgets 模块。

TARGET = QWidget

>  *  编译后的可执行文件是QWidget.exe

TEMPLATE = app

>  *  项目使用的模板是app，是一般应用程序

后面的SOURCES、HEADERS、FORMS 记录了项目中包含的源程序文件、头文件和窗体文件(.ui文件)的名称。

这些文件列表是 Qt Creator 自动添加到项目管理文件里面的，用户不需要手动修改。当添加一个文件到项目，或从项目里删除一个文件时，项目管理文件里的条目会自动修改。

# 3 界面文件 #

后缀为“.ui”的文件是可视化设计的窗体的定义文件，如 widget.ui。双击项目文件目录树中的文件 widget.ui，会打开一个集成在 Qt Creator 中的 Qt Designer【ui设计器】 对窗体进行可视化设计

![70][]

![70 1][]

![70 2][]

*  编辑完属性之后，为btnClose添加功能：点击此按钮是，关闭窗口，退出程序，使用Signal和Slots编辑器完成这个功能。
 *  在信号与槽编辑器的工具栏上单击“Add”按钮，在出现的条目中，Sender 选择 btnClose，Signal选择 clicked()，Receiver 选择窗体 Widget，Slot 选择 close()。表示当按钮btnClose被单击时，就执行Widget的close函数，实现关闭窗口的功能。
 *  然后对项目进行编译和运行，可以出现如图 2-5 所示的窗口，单击“Close”按钮可以关闭程序。标签的文字内容和字体被修改了，窗口标题也显示为所设置的标题。

![70 3][]

#  #

# 4、主函数文件main.cpp #

#include "widget.h"
    #include <QApplication>
    
    /*
    main是应用程序的入口。主要功能是创建应用程序，创建窗口，并
    运行应用程序，开始应用程序的消息循环和事件处理。
    QApplication是Qt的标准应用程序类
    */
    int main(int argc, char *argv[])
    {
        QApplication a(argc, argv);  //定义并创建应用程序，定义一个QApplication类的对象a，就是应用程序对象
        Widget w;  //并以并创建窗口，定义Widget类的变量w
        w.show();  //显示窗口
    
        return a.exec(); //启动并执行应用程序：开始应用程序的消息循环和事件处理
    }

# 5、 窗体相关的文件 #

## 5.1、widget.h文件 ##

#ifndef WIDGET_H
    #define WIDGET_H
    
    #include <QWidget> 
    
    namespace Ui {   //命名空间ui，包含一个类Widget
    class Widget;  //相当于一个外部类型声明，这里的类是ui_widget.h里面定义的类，用来描述界面组件
    }
    
    class Widget : public QWidget  //窗体类Widget定义：继承QWidget
    {
        Q_OBJECT  //宏，使用Qt的信号与槽机制的类必须加入的宏
    
    public:
        explicit Widget(QWidget *parent = 0);
        ~Widget();
    
    private:
        Ui::Widget *ui; //使用Ui::Widget定义一个指针，这个指针是用前面声明的namespace Ui里面的Widget类定义的，所以指针ui是指向可视化设计的界面，后面需要访问界面上的组件，都需要通过这个指针ui
    };
    
    #endif // WIDGET_H

## 5.2、widget.cpp文件 ##

类Widget的实现代码

#include "widget.h"
    #include "ui_widget.h"  //自动加入
    
    Widget::Widget(QWidget *parent) :
        QWidget(parent),    //执行父类QWidged的构造函数
        ui(new Ui::Widget)
    {
        ui->setupUi(this);  //值类Ui::Widget类的setupUi函数，这个函数实现窗口的生成与各种属性的设置，信号与槽的关联
    }
    
    Widget::~Widget()
    {
        delete ui;  //析构函数中删除new创建的指针
    }

## 5.3、widget.ui 文件 ##

>  *  widget.ui 是窗体界面定义文件，是一个 XML 文件，定义了窗口上的所有组件的属性设置、布局，及其信号与槽函数的关联等。
>  *  用 UI 设计器可视化设计的界面都由 Qt 自动解析，并以 XML文件的形式保存下来。
>  *  在设计界面时，只需在 UI 设计器里进行可视化设计即可，而不用管 widget.ui文件是怎么生成的

## 5.4、ui\_widget.h 文件 ##

> ui\_widget.h 是对 widget.ui 文件编译后自动生成的，widget.ui 又是通过 UI 设计器可视化设计生成的。
> 
>  *  所以，对 ui\_widget.h 手工进行修改没有什么意义，所有涉及界面的修改都应该直接在 UI 设计器里进行。
>  *  所以，ui\_widget.h 也没有必要添加到项目里。

/********************************************************************************
    ** Form generated from reading UI file 'widget.ui'
    **
    ** Created by: Qt User Interface Compiler version 5.9.1
    **
    ** WARNING! All changes made in this file will be lost when recompiling UI file!
    ********************************************************************************/
    
    #ifndef UI_WIDGET_H
    #define UI_WIDGET_H
    
    #include <QtCore/QVariant>
    #include <QtWidgets/QAction>
    #include <QtWidgets/QApplication>
    #include <QtWidgets/QButtonGroup>
    #include <QtWidgets/QHeaderView>
    #include <QtWidgets/QLabel>
    #include <QtWidgets/QPushButton>
    #include <QtWidgets/QWidget>
    
    QT_BEGIN_NAMESPACE
    //Ui_Widget创建对象ui，然后ui->setupUi(this)就为本ui界面实现了窗体上组件的创建，属性设置，信号与槽的关联
    class Ui_Widget    //定义了一个类Ui_Widget，用于封装可视化设计的界面
    {
    public:
        QLabel *labDemo;
        QPushButton *btnClose;  //自动化生成了界面各个组件的类成员变量定义：为界面的每个组件定义了一个指针变量
    
        void setupUi(QWidget *Widget)  //用于创建各个界面组件，并设置其位置，大小，文字内容，字体等属性，设置信号与槽的关联
        {
            if (Widget->objectName().isEmpty())
                Widget->setObjectName(QStringLiteral("Widget"));
            Widget->resize(400, 300);
            labDemo = new QLabel(Widget);
            labDemo->setObjectName(QStringLiteral("labDemo"));
            labDemo->setGeometry(QRect(70, 50, 181, 31));
            QFont font;
            font.setPointSize(20);
            font.setBold(true);
            font.setWeight(75);
            labDemo->setFont(font);
            btnClose = new QPushButton(Widget);
            btnClose->setObjectName(QStringLiteral("btnClose"));
            btnClose->setGeometry(QRect(220, 130, 75, 23));
            QFont font1;
            font1.setPointSize(12);
            font1.setBold(true);
            font1.setWeight(75);
            btnClose->setFont(font1);
              //上面的第一部分根据可视化设计的界面内容，用C++代码创建界面上各组件，并设置其属性
            retranslateUi(Widget);
            QObject::connect(btnClose, SIGNAL(clicked()), Widget, SLOT(close()));
            //信号与槽关联：close()槽函数可以关闭窗口
            QMetaObject::connectSlotsByName(Widget); //设置槽的关联方式：用于将UI设计器自动生成的组件信号的槽函数与组件信号相关联
        } // setupUi
    
        void retranslateUi(QWidget *Widget) //retranslateUi用来设置界面各组件的文字内容属性，如标签文字，案件文字，窗体标题等等
        {
            Widget->setWindowTitle(QApplication::translate("Widget", "Widget", Q_NULLPTR));
            labDemo->setText(QApplication::translate("Widget", "hello,World", Q_NULLPTR));
            btnClose->setText(QApplication::translate("Widget", "Close", Q_NULLPTR));
        } // retranslateUi
    
    };
    
    namespace Ui {   //定义一个从Ui_Widget继承的类。
        class Widget: public Ui_Widget {};
    } // namespace Ui
    
    
    QT_END_NAMESPACE
    
    #endif // UI_WIDGET_H

1.  ui\_widget.h 文件里实现界面功能的类是 Ui\_Widget。
2.  在定义一个类 Widget 从 Ui\_Widget 继承而来，并定义在 namespace Ui 里，这样 Ui:: Widget 与 widget.h 里的类 Widget 同名，但是用 namespace 区分开来。
3.  所以，界面的 Ui:: Widget 类与文件 widget.h 里定义的 Widget 类实际上是两个类，但是 Qt 的处理让用户感觉不到 Ui:: Widget 类的存在，只需要知道在 Widget 类里用 ui 指针可以访问可视化设计的界面组件就可以了。

[70]: /images/20220517/5391ff28ab714b888ae25a58a84ae8ca.png
[70 1]: /images/20220517/f5cfb0015d83412d9aae35178cbf29ef.png
[70 2]: /images/20220517/2e951ed31dce46d7b3a1c6d249426c7e.png
[70 3]: /images/20220517/1d8b68f13f3943879c6a56840249c851.png