【QT入门到晋级】用开源的自定义控件开发

前言

有AI辅助，没必要手搓自定义控件(1年前用QGraphics+QPainter手搓过1个)，可以先找找开源可用的自定义控件，不满足的再让AI辅助进行微创新。本文讲的是feiyangqingyun提供的quc控件。

效果图

以上刻度控件是每秒更新一次，曲线是每秒更新100次。

quc安装方法

安装下文安装即可，此处不重复这些基础操作。【QT自定义控件】qwt6.13/quc 安装教程（图文教程）_qt quc-CSDN博客文章浏览阅读2.7k次，点赞36次，收藏22次。该博客记录了QT自定义控件qwt6.13和quc的安装教程。环境为QT5.11.0、Win10、MinGW - 32。qwt6.13安装涉及编译环境配置、文件复制等操作；quc安装需选对应编译环境、复制文件、修改工程.pro文件，使用时都需用qt designer打开ui文件查看控件。https://blog.csdn.net/m0_54522601/article/details/140327968?utm_medium=distribute.pc_relevant.none-task-blog-2~default~baidujs_baidulandingword~default-1-140327968-blog-53307988.235^v43^pc_blog_bottom_relevance_base3&spm=1001.2101.3001.4242.1&utm_relevant_index=4

QT引用自定义控件

直接点击mainwindow.ui文件是看不到quc控件的，关键步骤是右键点击mainwindow.ui，右键菜单选择【Qt Designer】,在UI设计器中才能找到"Quc Widget"。

注意：以上是前端调用自定义控件的方式，需要编译动态库等操作，相对要麻烦一些。如果有自定义控件的源码.h和.cpp文件，直接加入到现有qt项目中，以后台方式直接调用即可，以下是我分享过一个手搓的自定义控件类

【QT自定义2D控件】QGraphics绘制仪表盘_qt仪表盘控件-CSDN博客文章浏览阅读592次，点赞4次，收藏11次。本文介绍如何使用Qt的QGraphics框架绘制自定义2D仪表盘控件，包含背景圆、进度弧、刻度线、中心文本及底部文字的分步实现方法，并提供完整源码结构和绘制逻辑。https://blog.csdn.net/liangyuna8787/article/details/154545504?spm=1001.2014.3001.5502

quc测试案例

与效果图配套的测试代码，按要求把3个控件拉入到窗口中即可完成UI设计

增加两个定时器，一个是获取0~100以内的随机数，一个是获取正弦sin值

复制代码

//mainwindow.h
#ifndef MAINWINDOW_H
#define MAINWINDOW_H

#include <QMainWindow>
#include <QTimer>
QT_BEGIN_NAMESPACE
namespace Ui { class MainWindow; }
QT_END_NAMESPACE

class MainWindow : public QMainWindow
{
    Q_OBJECT

public:
    MainWindow(QWidget *parent = nullptr);
    ~MainWindow();
private slots:
    void RandonTimeout();
    void WareonTimeout();

private:
    Ui::MainWindow *ui;
    QTimer *m_rand_timer;
    QTimer *m_ware_timer;
    double m_phase = 0.0;
};
#endif // MAINWINDOW_H

//mainwindow.cpp
#include "mainwindow.h"
#include "ui_mainwindow.h"
#include <QRandomGenerator>
#include <QDebug>
#include <QtCore/qmath.h>
MainWindow::MainWindow(QWidget *parent)
    : QMainWindow(parent)
    , ui(new Ui::MainWindow)
{
    ui->setupUi(this);
    ui->gaugeCar->setAnimation(true);   // 开启动画，过渡更平滑
    ui->gaugeCar->setAnimationStep(2);  // 每帧走 2，约半秒到位
    ui->gaugeCar->setValue(0);          // 初始值
    ui->rulerTemp->setValue(0);
    // 创建定时器，1000ms = 1秒
    m_rand_timer = new QTimer(this);
    connect(m_rand_timer, &QTimer::timeout, this, &MainWindow::RandonTimeout);
    m_rand_timer->start(1000);

    ui->waveChart->setTitle("实时波形");
    ui->waveChart->setMinValue(0);
    ui->waveChart->setMaxValue(100);   // 注意：数据不能为负
    ui->waveChart->setXStep(1);
    ui->waveChart->setYStep(10);
    ui->waveChart->setSpace(10);
    ui->waveChart->setSmooth(true);    // 平滑曲线，出圆弧效果
    ui->waveChart->setShowHLine(true);
    ui->waveChart->setBgColorStart(QColor(30, 30, 30));
    ui->waveChart->setBgColorEnd(QColor(60, 60, 60));
    ui->waveChart->setTextColor(Qt::white);
    ui->waveChart->setPointColor(Qt::cyan);

    // 创建定时器，1000ms = 1秒
    m_ware_timer = new QTimer(this);
    connect(m_ware_timer, &QTimer::timeout, this, &MainWindow::WareonTimeout);
    m_ware_timer->start(10);
}

MainWindow::~MainWindow()
{
    delete ui;
    delete m_rand_timer;
    delete m_ware_timer;

}

void MainWindow::RandonTimeout()
{
    // Qt 5.10+ 推荐写法：生成 [0, 100] 的随机整数
    int val = QRandomGenerator::global()->bounded(0, 101);

    ui->gaugeCar->setValue(val);
    ui->rulerTemp->setValue(val);
}

void MainWindow::WareonTimeout()
{
    double value = 50 + 40 * qSin(m_phase);   // 你的实际采集值
    m_phase += 0.1;
    ui->waveChart->addData(value);
}

代码很简洁，直接调用接口，这些接口可以直接跳转到头文件去看。