Qt自定义控件：关于大佬“飞扬青云“的自定义UI控件的使用教程(MinGw,MSVC)

前言

最近在搞自定义控件，无意间发现大佬飞扬青云的开源项目，Qt/C++编写超精美自定义控件

这里先贴出大佬项目地址和博客

码云：wwlzq5/qucsdk (gitee.com)（旧版下载地址Qt4.7到Qt5.14）
github：https://github.com/feiyangqingyun/qucsdk (高版本下载地址Qt5.15到Qt6.5)
csdn：https://me.csdn.net/feiyangqingyun

由于没有在网上看到别人导入大佬的控件并使用(大多只是显示ui界面，没有使用控件图片，即有导入，但是没有使用，也不知道能不能用)，我想把它导入到Qt Creater并且能正常编译运行，废话不多说，直接上操作，因为我Qt 是低版本(5.14)的，所以我就按照旧版本的来说了，旧版新版操作一样，这里我将从两种编译方式讲，一篇到位

MinGw

第一步：

首先在帮助中可以看下自己Qt版本

记住自己的这个版本，下面要用到，这里可以看到我的是Qt5.14.1 MSVC2017 32位

第二步：

打开你下载的文件，应该是，解压后应该是这样的

​

新版是这样的

​

第三步：

根据自己的Qt版本，也就是上面我说的要用到的，我的是Qt5.14.1 MSVC2017 32位，根据自己的版本去文件夹里面找相应版本的文件夹

旧版去SDK开头那三个文件夹找(SDKDemo是作者的一个教学例子)，新版就去shared里面找,这里我解压过了，没必要全解压，就解压和你版本对应的就行

第四步：

打开文件夹，将图中的这两个文件，复制到你的Qt下Tools的designer中，这里我的路径是

E:\Qt\Qt\Tools\QtCreator\bin\plugins\designer

这时就可以打开qt,任意创建一个项目，就会发现，控件已经加载到Qt Creater中了，还可以拖动控件到ui界面中

第五步：

新建一个Qt项目，编译器选择MinGw,记住自己编译器的位数

第六步：

进入ui设计拉去一个控件(最好和我拉取的一样，因为不一样的控件，要引入的头文件不一样）

第七步：

右键项目任意文件，在explorer中展示，然后在项目中创建两个文件夹,bin和include

第八步：

根据自己的编译器位数，就是第五步中的编译器，这里我的是5.14.2 MinGW 64位，去下载的文件中去找和自己版本对应的文件夹，然后解压

旧版去SDK开头那三个文件夹找(SDKDemo是作者的一个教学例子)，新版就去shared里面找

第九步：

打开文件夹，然后将这四个文件复制到我们新建的bin文件夹中

复制到bin中

然后在下载的文件夹的include去找gaugecar.h这个头文件，将它复制到我们新建的项目的include文件夹中 

复制到include中

第十步：

打开你新建的项目pro文件添加如下代码

INCLUDEPATH += $$PWD/include
DEPENDPATH += $$PWD/includeCONFIG(debug, debug|release){
LIBS += -L$$PWD/bin/ -lqucd
} else {
LIBS += -L$$PWD/bin/ -lquc
}

第十一步：

编译并运行项目，可以看到能正常编译运行，而且控件也有

第十二步：

这一步我们测试控件能否正常使用先在ui界面中添加两个按钮，更改控件内容为开始和停止，再更改控件名称，分别为startBtn和stopBtn

然后在mainwindow.h中添加如下代码

#ifndef MAINWINDOW_H
#define MAINWINDOW_H#include <QMainWindow>
#include <QTimer>QT_BEGIN_NAMESPACE
namespace Ui { class MainWindow; }
QT_END_NAMESPACEclass MainWindow : public QMainWindow
{Q_OBJECTpublic:MainWindow(QWidget *parent = nullptr);~MainWindow();private slots:void timeOut();void on_startBtn_clicked();void on_stopBtn_clicked();private:Ui::MainWindow *ui;QTimer* m_timer;
};
#endif // MAINWINDOW_H

在mainwindow.cpp中添加如下代码 

#include "mainwindow.h"
#include "ui_mainwindow.h"
#include <QTime>
#include <QColor>
MainWindow::MainWindow(QWidget *parent): QMainWindow(parent), ui(new Ui::MainWindow)
{ui->setupUi(this);//创建一个定时器m_timer = new QTimer(this);//设置时间间隔1msm_timer->setInterval(100);//connect(m_timer, SIGNAL(timeout()), this, SLOT(timeOut()));
}MainWindow::~MainWindow()
{delete ui;
}void MainWindow::timeOut()
{static int value = 0;if (value < 100) {value++;ui->gaugeCar->setValue(value);} else if (value >= 100 && value < 200) {value++;int temp = 200 - value;ui->gaugeCar->setValue(temp);} else if (value == 200) {value = 0;}
}void MainWindow::on_startBtn_clicked()
{//开始计时m_timer->start();
}void MainWindow::on_stopBtn_clicked()
{//停止m_timer->stop();
}

第十三步：

编译，运行项目，可以看到，仪表盘的数字和指针在变化

运行效果视频

测试完成

MSVC

第一步：

首先在帮助中可以看下自己Qt版本

​

​

记住自己的这个版本，下面要用到，这里可以看到我的是Qt5.14.1 MSVC2017 32位

第二步：

打开你下载的文件，应该是，解压后应该是这样的

新版是这样的

第三步：

根据自己的Qt版本，也就是上面我说的要用到的，我的是Qt5.14.1 MSVC2017 32位，根据自己的版本去文件夹里面找相应版本的文件夹

旧版去SDK开头那三个文件夹找(SDKDemo是作者的一个教学例子)，新版就去shared里面找,这里我解压过了，没必要全解压，就解压和你版本对应的就行

第四步：

打开文件夹，将图中的这两个文件，复制到你的Qt下Tools的designer中，这里我的路径是

E:\Qt\Qt\Tools\QtCreator\bin\plugins\designer

这时就可以打开qt,任意创建一个项目，就会发现，控件已经加载到Qt Creater中了，还可以拖动控件到ui界面中

第五步：

新建一个Qt项目，编译器选择MSVC,记住自己编译器的位数

第六步：

进入ui设计拉去一个控件(最好和我拉取的一样，因为不一样的控件，要引入的头文件不一样）

第七步：

右键项目任意文件，在explorer中展示，然后在项目中创建两个文件夹,bin和include

第八步：

根据自己的编译器位数，就是第五步中的编译器，这里我的是5.14.2 MSVC2017 64位，去下载的文件中去找和自己版本对应的文件夹，然后解压

旧版去SDK开头那三个文件夹找(SDKDemo是作者的一个教学例子)，新版就去shared里面找

第九步：

打开文件夹，然后将这四个文件复制到我们新建的bin文件夹中

复制到bin中

然后在下载的文件夹的include去找gaugecar.h这个头文件，将它复制到我们新建的项目的include文件夹中  

复制到include中

第十步：

打开你新建的项目pro文件添加如下代码

INCLUDEPATH += $$PWD/include
DEPENDPATH += $$PWD/includeCONFIG(debug, debug|release){
LIBS += -L$$PWD/bin/ -lqucd
} else {
LIBS += -L$$PWD/bin/ -lquc
}

第十一步：

编译并运行项目，可以看到能正常编译运行，而且控件也有

第十二步：

这一步我们测试控件能否正常使用先在ui界面中添加两个按钮，更改控件内容为开始和停止，再更改控件名称，分别为startBtn和stopBtn

然后在mainwindow.h中添加如下代码

#ifndef MAINWINDOW_H
#define MAINWINDOW_H#include <QMainWindow>
#include <QTimer>QT_BEGIN_NAMESPACE
namespace Ui { class MainWindow; }
QT_END_NAMESPACEclass MainWindow : public QMainWindow
{Q_OBJECTpublic:MainWindow(QWidget *parent = nullptr);~MainWindow();private slots:void timeOut();void on_startBtn_clicked();void on_stopBtn_clicked();private:Ui::MainWindow *ui;QTimer* m_timer;
};
#endif // MAINWINDOW_H

在mainwindow.cpp中添加如下代码 

#include "mainwindow.h"
#include "ui_mainwindow.h"
#include <QTime>
#include <QColor>
MainWindow::MainWindow(QWidget *parent): QMainWindow(parent), ui(new Ui::MainWindow)
{ui->setupUi(this);//创建一个定时器m_timer = new QTimer(this);//设置时间间隔1msm_timer->setInterval(100);//connect(m_timer, SIGNAL(timeout()), this, SLOT(timeOut()));
}MainWindow::~MainWindow()
{delete ui;
}void MainWindow::timeOut()
{static int value = 0;if (value < 100) {value++;ui->gaugeCar->setValue(value);} else if (value >= 100 && value < 200) {value++;int temp = 200 - value;ui->gaugeCar->setValue(temp);} else if (value == 200) {value = 0;}
}void MainWindow::on_startBtn_clicked()
{//开始计时m_timer->start();
}void MainWindow::on_stopBtn_clicked()
{//停止m_timer->stop();
}

第十三步：

编译，运行项目，可以看到，仪表盘的数字和指针在变化

运行效果视频

测试完成

小结

首先还是要感谢飞扬青云大佬的开源，大佬博客还有很多其它开源项目，非常给力。

在说一说，当我们添加多个控件时，需要导入多个相应的头文件，当然只需要放到你项目include文件夹中就行，也可以将所有的头文件放入到一个文件夹中然后每次新建项目都引入这文件夹，这样就不用每次一个一个的导入头文件，缺点就是很多资源都用不到，造成项目的庞大冗余。