QT二 QT使用generate form 生成常用UI，各种UI控件

一 。没有使用general form  和  使用 general form 后，file层面和代码层面的不同比较

file层面的不同

代码层面的不同，

在 使用了general form之后，在主界面的构造方法中，使用ui->setupUi(this),就完成了所有UI的处理。

而之前我们的没有使用general form的时候，需要自己通过写代码一步一步的完成。

比较多出来的file 以及 代码层面的不同 后的 疑问：

在没有使用general form时，我们的代码生成是使用了一系列函数生成的，那么是不是 ui->setupUi(this);的内部也是和我们使用一系列函数差不多呢？

验证：

1.我们先来看多出来的mainwindow.ui是个啥？

在QT Creator中双击 mainwindow.ui，看到会跳转到一个可以操作的UI界面

使用 UE 打开 mainwindow.ui，可以看到是一个xml格式的文件

 结论：mainwindow.ui是一个xml的文件。该文件中用xml格式记录了当前mainwindow中的组件。QT Creator在打开这个xml的时候，做了事情，将xml文件变成了可视化的UI。如果我们通过可视化UI，给里面的增添改UI，然后QT Creator会将我们的操作变成xml文件。

验证QT Creator 将开发者可视化UI的操作变成xml实验：

之前界面和xml是这样：

我们往界面上通过可视化UI 添加一个 qpushbutton，保存后，可以看到xml文件多了一些东西

2. 那么这个 ui->setupUi(this)是干啥的呢？

我们按照以往的经验，在 ui->setupUi(this) 这一行上，按住ctrl+鼠标左键，看一下这一行代码跳转到哪里？--结果跳出来error，

这个error的意思是：我们找不到ui_mainwindows.h这个文件。或者没有权限打开这个文件。该文件是在这个目录下：

D:\code_qt\build-004qtUIstudy-Desktop_Qt_5_14_2_MinGW_32_bit-Debug\ui_mainwindow.h

那我们在磁盘里面找一下这个文件。发现确实没有这个文件。

我们再来看一下给出的error信息 路径是在

D:\code_qt\build-004qtUIstudy-Desktop_Qt_5_14_2_MinGW_32_bit-Debug\ui_mainwindow.h

这时候就想到了，这个应该是 项目build 之后生成的吧，于是查看了一下该项目的配置，果然是在D:\code_qt\build-004qtUIstudy-Desktop_Qt_5_14_2_MinGW_32_bit-Debug下面，也就是我们需要构建之后，才会生成 ui_mainwindow.h这个文件。

构建此项目

构建完成后，发现就生成了这个目录了。

在QT Creator 中 打开ui_mainwindow.h文件查看，还是ctrl+鼠标左键打开。为什么不用UE直接打开呢？因为在 QT Creator 中打开代码有关联性，方便查看。我们终于看到了熟悉的画面，和我们不使用general form时候的代码。

二 使用general form 后，QT 帮我们到底做了什么 的回答

1.QT Creator 提供了可视化的UI，方便开发者增删改UI，

2.改动的UI，QTCreator 会变成本质上是xml的 xxx.ui文件

3.然后QT 会在build 的过程中，将 xxx.ui文件变成ui_xxx.h文件。而这个 ui_xxx.h 文件并不是.h文件，实际上也含有.cpp的内容。

总结

                通过QT build 的过程

xxx.ui--------------------------------------> 变成 最终的 ui_xxx.h 文件

在代码中 通过 ui->setupUi(this); 这一行代码 加载 ui_xxx.h，完成 UI的创建。

好处1：

开发者可以通过可视化UI ，实现自己想要的UI界面。QT 帮忙转换成代码，最终通过ui->setupUi(this)加载这些代码生成UI。

 好处2：

开发者可以通过 查看这些可视化UI的最终代码，学习在代码层面实现，而不是借助可视化UI工具。

另一个问题：既然QT给了我们可视化UI的界面，为什么还要在第一章学习用代码生成UI呢？这是因为两个原因：1是在实际工作用，用代码生成UI的部分也不少。作为开发者首先就要要弄清楚这个原理。2是因为我们在后面学习到深度定制某一个UI控件的时候（假设我们这里的需求是自己开发一个button，自己的这个button 不能接受鼠标的点击事件，），这就需要我们自己create mybutton，并重写 mybutton的click事件，或者直接屏蔽click事件，这些的基础都是自己创建UI并。如果这块暂时想不明白也没有关系，学到后面知识就了解了。

三。 QT控件学习

实际上就是学习如下图的所有，但是有些UI不常用，有些UI，常用的部分，会在标题前面加上红色的"常用"两个字

四 ，Layouts 部分详解

1.垂直布局Vertical Layout 对应类为（QVBoxLayout）

学习思路是这样的，我们先在UI上拖拽一个 Vertical Layout 进去，然后给 Vertical Layout里面加上两个button。弄好UI后，保存一下，然后 使用 QT 的 "构建"，最后看QT 生成的源码 ui_xxx.h

结合源码 和 QT api助手，学习垂直布局的常用写法，以及参数。

1.1拖入UI后的效果

1.2 构建

1.3 结合 QT-API助手 和  QT生成代码 学习

代码位置ui_mainwindow.h

D:\code_qt\build-004qtUIstudy-Desktop_Qt_5_14_2_MinGW_32_bit-Debug\ui_mainwindow.h

全部代码：

/********************************************************************************
** Form generated from reading UI file 'mainwindow.ui'
**
** Created by: Qt User Interface Compiler version 5.14.2
**
** WARNING! All changes made in this file will be lost when recompiling UI file!
********************************************************************************/#ifndef UI_MAINWINDOW_H
#define UI_MAINWINDOW_H#include <QtCore/QVariant>
#include <QtWidgets/QAction>
#include <QtWidgets/QApplication>
#include <QtWidgets/QMainWindow>
#include <QtWidgets/QMenuBar>
#include <QtWidgets/QPushButton>
#include <QtWidgets/QStatusBar>
#include <QtWidgets/QVBoxLayout>
#include <QtWidgets/QWidget>QT_BEGIN_NAMESPACEclass Ui_MainWindow
{
public:QAction *actionsave;QWidget *centralwidget;QWidget *verticalLayoutWidget;QVBoxLayout *verticalLayout;QPushButton *pushButton;QPushButton *pushButton_2;QMenuBar *menubar;QStatusBar *statusbar;void setupUi(QMainWindow *MainWindow){if (MainWindow->objectName().isEmpty())MainWindow->setObjectName(QString::fromUtf8("MainWindow"));MainWindow->resize(888, 666);actionsave = new QAction(MainWindow);actionsave->setObjectName(QString::fromUtf8("actionsave"));centralwidget = new QWidget(MainWindow);centralwidget->setObjectName(QString::fromUtf8("centralwidget"));verticalLayoutWidget = new QWidget(centralwidget);verticalLayoutWidget->setObjectName(QString::fromUtf8("verticalLayoutWidget"));verticalLayoutWidget->setGeometry(QRect(70, 60, 241, 191));verticalLayout = new QVBoxLayout(verticalLayoutWidget);verticalLayout->setObjectName(QString::fromUtf8("verticalLayout"));verticalLayout->setContentsMargins(0, 0, 0, 0);pushButton = new QPushButton(verticalLayoutWidget);pushButton->setObjectName(QString::fromUtf8("pushButton"));verticalLayout->addWidget(pushButton);pushButton_2 = new QPushButton(verticalLayoutWidget);pushButton_2->setObjectName(QString::fromUtf8("pushButton_2"));verticalLayout->addWidget(pushButton_2);MainWindow->setCentralWidget(centralwidget);menubar = new QMenuBar(MainWindow);menubar->setObjectName(QString::fromUtf8("menubar"));menubar->setGeometry(QRect(0, 0, 888, 21));MainWindow->setMenuBar(menubar);statusbar = new QStatusBar(MainWindow);statusbar->setObjectName(QString::fromUtf8("statusbar"));MainWindow->setStatusBar(statusbar);retranslateUi(MainWindow);QMetaObject::connectSlotsByName(MainWindow);} // setupUivoid retranslateUi(QMainWindow *MainWindow){MainWindow->setWindowTitle(QCoreApplication::translate("MainWindow", "MainWindow", nullptr));actionsave->setText(QCoreApplication::translate("MainWindow", "save", nullptr));pushButton->setText(QCoreApplication::translate("MainWindow", "\346\214\211\351\222\2561", nullptr));pushButton_2->setText(QCoreApplication::translate("MainWindow", "\346\214\211\351\222\2562", nullptr));} // retranslateUi};namespace Ui {class MainWindow: public Ui_MainWindow {};
} // namespace UiQT_END_NAMESPACE#endif // UI_MAINWINDOW_H

关键代码：

结论（重点）：

1.我们拖拽的垂直布局Vertical Layout 实际上会做两件事情

        第一，生成一个新widget，该新的widget 的主控件是 centralwidget。

        第二，然后基于这个新的widget创建QVBoxLayout

2. 最后的两个button 也是基于 新widget 创建的。

也就是说，button的生命周期依存于 新的widget

3. 但是UI上的显示在layout上 --------通过 layout->addwidget(pushbutton) 实现。

4.layout在构造方法中的第一个参数，表示了这个layout是那个widget的layout。

除了这个构造方法外，QT api 助手中给了setLayout方法

      QWidget *window = new QWidget;QPushButton *button1 = new QPushButton("One");QPushButton *button2 = new QPushButton("Two");QPushButton *button3 = new QPushButton("Three");QPushButton *button4 = new QPushButton("Four");QPushButton *button5 = new QPushButton("Five");QHBoxLayout *layout = new QHBoxLayout;layout->addWidget(button1);layout->addWidget(button2);layout->addWidget(button3);layout->addWidget(button4);layout->addWidget(button5);window->setLayout(layout);window->show();

1.4 自己写代码验证。

这里创建一个 QT设计师界面类，写代码完成我们的代码验证

这里选择main window 和 widget其实都是可以的，反正都是学习用的

2.水平布局Horizontal Layout 对应类为（QHBoxLayout）

3.网络布局Grid Layout 对应类为 （QGridLayout）

4.表格布局Form Layout 对应类为  （QFormLayout）