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

发布于:2025-03-23 ⋅ 阅读:(15) ⋅ 点赞:(0)

一 。没有使用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_NAMESPACE

class 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);
    } // setupUi

    void 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 Ui

QT_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)