C/C++图形化之QT6教程

作者
董佳辉的头像董佳辉
发布于 2025/03/30更新于 2026/08/20

简介

C++的GUI设计,GUI 中文译为 "图形用户界面"(英文全称是 Graphical User Interface),读作GUI或者guyi.

除了C++以外,还有Python等语言的版本,但是只有C++是最原生的版本。

常见的QT软件有微信等软件都是用QT做的图形化。

学QT6之前需要会CMake和C/C++!

Vinci机器人队培养路线

Vinci机器人队C/C++教程

CMake C/C++编译环境配置

安装

机器人开发环境搭建

到底是学QT5还是QT6呢?当然是QT6。

qt6是个大趋势,只是一些老公司不愿意换罢了。而且qt5和qt6区别本身也没有那么那么大,学起来基本一样的,你学懂了qt6,自然也就会qt5了,学懂了qt5,自然也就会qt6了。

资料参考

更细致的版本(但使用了qmake,无所谓,反正代码都一样)

https://www.bilibili.com/video/BV1km4y1k7CW

更精简的版本(使用cmake)

https://www.bilibili.com/video/BV1G94y1Q7h6

教程

HelloWorld

参考搭建环境中运行的历程:

机器人开发环境搭建

#include "QT6TEST/inc/qt6_test.hpp"
#include <QApplication>
#include <QWidget>
#include "ui_mywidget.h"

int qt6_test(int argc,char **argv)
{
    QApplication app(argc, argv);

    // 创建主窗口和 UI 对象
    QWidget mainWindow;
    Ui::MyWidget ui;        // Ui 命名空间中的类名与 .ui 文件中的 class 属性一致
    ui.setupUi(&mainWindow);

    // 设置窗口标题
    mainWindow.setWindowTitle("Hello Qt6!");

    // 显示窗口
    mainWindow.show();

    return app.exec();
}

GUI基础设计

GUI程序结构与运行机制

image\.png

image\.png

image\.png

我们使用的是CMake,所以这里可以不用看。

CMake也是同样的配置,只不过写的不一样罢了。下面是CMake同样的配置:

image\.png

image\.png

image\.png

下面是qt designer的界面介绍:

image\.png

image\.png

image\.png

image\.png

要用信号槽,必须加上Q_OBJECT,那我们现在就加上就行,万一以后要用呢。

image\.png

image\.png

上面的看不懂没关系,以后就懂了。

创建一个新的ui文件,也是选用widget.

下面只有这俩属性,最上面的是基类。

image\.png

然后想改窗口的标题,可以搜索属性windowsTitle

image\.png

image\.png

也可以用代码给窗口命名:

image\.png

image\.png

image\.png

也可以拖拽窗口来改变窗口大小。

image\.png

给按钮改个名字叫close

image\.png

image\.png

可以改个名

image\.png

如图设置是,当按钮被点击,那么我的widget就关闭。

image\.png

可以查看下setupUi这个函数,里面能看到很多在qt designer上的设置。

image\.png

这个界面的内存管理是当根被摧毁,叶子也会跟着摧毁。

image\.png

这个就是显示刚才设置那个按钮的代码。

image\.png

#include "QT6TEST/inc/qt6_test.hpp"
#include <QApplication>
#include <QWidget>
#include "ui_mywidget.h"

int qt6_test(int argc,char **argv)
{
    QApplication app(argc, argv);

    // 创建主窗口和 UI 对象
    QWidget mainWindow;
    Ui::MyWidget ui;        // Ui 命名空间中的类名与 .ui 文件中的 class 属性一致
    ui.setupUi(&mainWindow);
    ui.label->setText("你好");
    ui.pushButton->setText("关闭");


    // 显示窗口
    mainWindow.show();

    return app.exec();
}

可视化UI设计原理

image\.png

image\.png

image\.png

image\.png

如果想要窗口有自动排版功能,窗口变大也会自动排版,那么我们常用的就是右上角那俩,spacers是占位符。

image\.png

横竖按钮的布局就是靠图中的这个。

image\.png

connect本身就没有限制,可以不同类型或者相同类型的东西互相连接。

image\.png

image\.png

image\.png

在cmake要打开这三个东西。

代码实现

image\.png