文章的目的为了记录使用C++ 进行QT Widget 开发学习的经历。临时学习，完成app的开发。开发流程和要点有些记忆模糊，赶紧记录，防止忘记。
 
相关链接：

开源 C++ QT Widget 开发（一）工程文件结构-CSDN博客

开源 C++ QT Widget 开发（二）基本控件应用-CSDN博客

开源 C++ QT Widget 开发（三）图表--波形显示器-CSDN博客

开源 C++ QT Widget 开发（四）文件--二进制文件查看编辑-CSDN博客

 开源 C++ QT Widget 开发（五）通讯--串口调试-CSDN博客

开源 C++ QT Widget 开发（六）通讯--TCP调试-CSDN博客

开源 C++ QT Widget 开发（七）线程--多线程及通讯-CSDN博客

开源 C++ QT Widget 开发（八）网络--Http文件下载-CSDN博客

开源 C++ QT Widget 开发（九）图表--仪表盘-CSDN博客

开源 C++ QT Widget 开发（十）IPC进程间通信--共享内存-CSDN博客

开源 C++ QT Widget 开发（十一）进程间通信--Windows 窗口通信-CSDN博客

开源 C++ QT Widget 开发（十二）图表--环境监测表盘-CSDN博客

推荐链接：

开源 java android app 开发（一）开发环境的搭建-CSDN博客

开源 java android app 开发（二）工程文件结构-CSDN博客

开源 java android app 开发（三）GUI界面布局和常用组件-CSDN博客

开源 java android app 开发（四）GUI界面重要组件-CSDN博客

开源 java android app 开发（五）文件和数据库存储-CSDN博客

开源 java android app 开发（六）多媒体使用-CSDN博客

开源 java android app 开发（七）通讯之Tcp和Http-CSDN博客

开源 java android app 开发（八）通讯之Mqtt和Ble-CSDN博客

开源 java android app 开发（九）后台之线程和服务-CSDN博客

开源 java android app 开发（十）广播机制-CSDN博客

开源 java android app 开发（十一）调试、发布-CSDN博客

开源 java android app 开发（十二）封库.aar-CSDN博客

推荐链接：

开源C# .net mvc 开发（一）WEB搭建_c#部署web程序-CSDN博客

开源 C# .net mvc 开发（二）网站快速搭建_c#网站开发-CSDN博客

开源 C# .net mvc 开发（三）WEB内外网访问(VS发布、IIS配置网站、花生壳外网穿刺访问)_c# mvc 域名下不可訪問內網,內網下可以訪問域名-CSDN博客

开源 C# .net mvc 开发（四）工程结构、页面提交以及显示_c#工程结构-CSDN博客

开源 C# .net mvc 开发（五）常用代码快速开发_c# mvc开发-CSDN博客

内容：环境传感器监测面板

目录：

1.功能介绍

2.核心代码分析

3.所有源码

4.显示效果

一、功能介绍

实时数据监测：显示温度、湿度、PM2.5、光照强度和大气压力

可视化仪表盘：温度和PM2.5使用圆形仪表盘显示，带有彩色刻度

数据卡片：湿度、光照和压力使用卡片式布局

空气质量评级：根据PM2.5值自动显示空气质量等级

实时时钟：显示当前日期和时间

模拟数据更新：每2秒自动生成新的模拟传感器数据

二、核心代码分析

1.抗锯齿渲染：QPainter的Antialiasing确保平滑图形

使用setViewport和setWindow实现坐标系统一化

锥形渐变(QConicalGradient)创建彩色刻度弧

三角函数计算指针角度和位置

保存和恢复 painter 状态确保绘制隔离
 

2.自定义控件：GaugeWidget(仪表盘)和DataCardWidget(数据卡片)

CSS样式：使用QSS实现现代化界面风格

布局管理：嵌套布局实现灵活的界面结构

3.定时器系统：QTimer实现数据刷新和时钟更新

定时器系统：多定时器分别处理数据和时钟更新

三、所有源码

1.mainwindow.h文件

#ifndef MAINWINDOW_H
#define MAINWINDOW_H#include <QMainWindow>
#include <QTimer>
#include <QLabel>
#include <QGridLayout>
#include <QWidget>
#include <QTime>
#include <QVBoxLayout>
#include <QHBoxLayout>// 自定义仪表盘控件
class GaugeWidget : public QWidget
{Q_OBJECT
public:explicit GaugeWidget(QWidget *parent = nullptr, const QString &title = "",double minValue = 0, double maxValue = 100,const QString &unit = "", const QColor &color = Qt::blue);void setValue(double value);void setAlertLevels(double low, double medium, double high);protected:void paintEvent(QPaintEvent *event) override;private:QString m_title;double m_minValue;double m_maxValue;double m_currentValue;QString m_unit;QColor m_color;double m_lowAlert;double m_mediumAlert;double m_highAlert;
};// 数据卡片控件
class DataCardWidget : public QWidget
{Q_OBJECT
public:explicit DataCardWidget(QWidget *parent = nullptr,const QString &title = "",const QString &icon = "",const QString &unit = "");void setValue(double value);private:QLabel *m_valueLabel;QLabel *m_unitLabel;QLabel *m_titleLabel;QLabel *m_iconLabel;QString m_unit;
};class MainWindow : public QMainWindow
{Q_OBJECTpublic:MainWindow(QWidget *parent = nullptr);~MainWindow();private slots:void updateData();void updateTime();private:void setupUI();void setupSignals();QTimer *m_dataTimer;QTimer *m_clockTimer;// 主控件QWidget *m_centralWidget;QVBoxLayout *m_mainLayout;// 标题区域QLabel *m_titleLabel;QLabel *m_timeLabel;// 仪表盘区域QHBoxLayout *m_gaugeLayout;GaugeWidget *m_temperatureGauge;GaugeWidget *m_airQualityGauge;QLabel *m_airQualityLabel;// 数据卡片区域QHBoxLayout *m_dataCardLayout;DataCardWidget *m_humidityCard;DataCardWidget *m_lightCard;DataCardWidget *m_pressureCard;
};#endif // MAINWINDOW_H

2.mainwindow.cpp文件

#include "mainwindow.h"
#include <QPainter>
#include <QFont>
#include <QFontDatabase>
#include <QLinearGradient>
#include <QtMath>
#include <QRandomGenerator>// GaugeWidget 实现
GaugeWidget::GaugeWidget(QWidget *parent, const QString &title,double minValue, double maxValue,const QString &unit, const QColor &color): QWidget(parent), m_title(title), m_minValue(minValue), m_maxValue(maxValue),m_currentValue(minValue), m_unit(unit), m_color(color),m_lowAlert(0.3), m_mediumAlert(0.6), m_highAlert(0.8)
{setMinimumSize(250, 250); // 稍微调小一点
}void GaugeWidget::setValue(double value)
{m_currentValue = qBound(m_minValue, value, m_maxValue);update();
}void GaugeWidget::setAlertLevels(double low, double medium, double high)
{m_lowAlert = low;m_mediumAlert = medium;m_highAlert = high;
}void GaugeWidget::paintEvent(QPaintEvent *event)
{Q_UNUSED(event);QPainter painter(this);painter.setRenderHint(QPainter::Antialiasing);int side = qMin(width(), height());painter.setViewport((width() - side) / 2, (height() - side) / 2, side, side);painter.setWindow(-50, -50, 100, 100);// 绘制外圆painter.setPen(Qt::NoPen);QLinearGradient gradient(-40, -40, 40, 40);gradient.setColorAt(0, QColor(30, 30, 40));gradient.setColorAt(1, QColor(50, 50, 60));painter.setBrush(gradient);painter.drawEllipse(-40, -40, 80, 80);// 绘制刻度painter.save();painter.setPen(QPen(Qt::white, 0.5));for (int i = 0; i <= 10; ++i) {painter.drawLine(30, 0, 35, 0);painter.rotate(27);}painter.restore();// 绘制彩色弧QConicalGradient conicGradient(0, 0, -90);conicGradient.setColorAt(0.0, Qt::green);conicGradient.setColorAt(0.4, Qt::yellow);conicGradient.setColorAt(0.8, Qt::red);QPen arcPen;arcPen.setWidth(5);arcPen.setBrush(conicGradient);painter.setPen(arcPen);painter.drawArc(-30, -30, 60, 60, 30 * 16, 240 * 16);// 绘制指针 - 使用科技蓝色 (#3a7eff)QColor techBlue(58, 126, 255); // 科技蓝色painter.save();double valueRatio = (m_currentValue - m_minValue) / (m_maxValue - m_minValue);double angle = 30 + valueRatio * 240; // 从30度到270度painter.rotate(angle);painter.setPen(QPen(techBlue, 1));painter.setBrush(techBlue);QPointF points[3] = {QPointF(0, -5), QPointF(30, 0), QPointF(0, 5)};painter.drawPolygon(points, 3);painter.restore();// 绘制中心圆painter.setPen(Qt::NoPen);painter.setBrush(QColor(40, 40, 50));painter.drawEllipse(-10, -10, 20, 20);// 绘制文本 - 调小字体painter.setPen(Qt::white);QFont font = painter.font();font.setPointSize(4); // 调小字体painter.setFont(font);painter.drawText(-40, -45, 80, 20, Qt::AlignCenter, m_title);font.setPointSize(6); // 调小字体font.setBold(true);painter.setFont(font);painter.drawText(QRect(-20, -10, 40, 20), Qt::AlignCenter,QString::number(m_currentValue, 'f', 1));font.setPointSize(4); // 调小字体font.setBold(false);painter.setFont(font);painter.drawText(QRect(-20, 10, 40, 10), Qt::AlignCenter, m_unit);
}// DataCardWidget 实现
DataCardWidget::DataCardWidget(QWidget *parent, const QString &title,const QString &icon, const QString &unit): QWidget(parent), m_unit(unit)
{QVBoxLayout *layout = new QVBoxLayout(this);layout->setSpacing(5); // 减小间距QHBoxLayout *headerLayout = new QHBoxLayout();m_titleLabel = new QLabel(title);m_iconLabel = new QLabel(icon);QFont font = m_titleLabel->font();font.setPointSize(8); // 调小字体m_titleLabel->setFont(font);m_iconLabel->setFont(font);headerLayout->addWidget(m_iconLabel);headerLayout->addWidget(m_titleLabel);headerLayout->addStretch();m_valueLabel = new QLabel("0.0");font = m_valueLabel->font();font.setPointSize(12); // 调小字体font.setBold(true);m_valueLabel->setFont(font);m_valueLabel->setAlignment(Qt::AlignCenter);m_unitLabel = new QLabel(unit);m_unitLabel->setAlignment(Qt::AlignCenter);font.setPointSize(8); // 调小字体m_unitLabel->setFont(font);layout->addLayout(headerLayout);layout->addWidget(m_valueLabel);layout->addWidget(m_unitLabel);// 设置卡片样式setStyleSheet("DataCardWidget {""background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,""stop: 0 #2a2a3a, stop: 1 #1a1a2a);""border-radius: 8px;""padding: 8px;""}");m_titleLabel->setStyleSheet("color: #a0a0b0;");m_valueLabel->setStyleSheet("color: white;");m_unitLabel->setStyleSheet("color: #707090;");m_iconLabel->setStyleSheet("color: #3a7eff;"); // 使用科技蓝色
}void DataCardWidget::setValue(double value)
{m_valueLabel->setText(QString::number(value, 'f', 1));
}// MainWindow 实现
MainWindow::MainWindow(QWidget *parent): QMainWindow(parent)
{// 设置窗口属性setWindowTitle("环境监测中心");resize(900, 600); // 稍微调小窗口尺寸// 创建中央部件和主布局m_centralWidget = new QWidget(this);m_mainLayout = new QVBoxLayout(m_centralWidget);m_mainLayout->setSpacing(15); // 减小间距m_mainLayout->setContentsMargins(15, 15, 15, 15);// 设置背景m_centralWidget->setStyleSheet("background-color: #121218;");setCentralWidget(m_centralWidget);setupUI();setupSignals();// 启动定时器m_dataTimer = new QTimer(this);connect(m_dataTimer, &QTimer::timeout, this, &MainWindow::updateData);m_dataTimer->start(2000);m_clockTimer = new QTimer(this);connect(m_clockTimer, &QTimer::timeout, this, &MainWindow::updateTime);m_clockTimer->start(1000);// 初始化数据updateTime();updateData();
}MainWindow::~MainWindow()
{
}void MainWindow::setupUI()
{// 创建标题标签 - 调小字体m_titleLabel = new QLabel("环境监测中心");m_titleLabel->setAlignment(Qt::AlignCenter);m_titleLabel->setStyleSheet("QLabel {""color: #3a7eff;" // 使用科技蓝色"font-size: 22px;" // 调小字体"font-weight: bold;""margin: 8px;""}");// 创建时间标签 - 调小字体m_timeLabel = new QLabel();m_timeLabel->setAlignment(Qt::AlignCenter);m_timeLabel->setStyleSheet("QLabel {""color: #a0a0b0;""font-size: 12px;" // 调小字体"margin-bottom: 15px;""}");// 创建仪表盘布局m_gaugeLayout = new QHBoxLayout();m_gaugeLayout->setSpacing(25);// 创建温度仪表盘 - 使用科技蓝色QColor techBlue(58, 126, 255);m_temperatureGauge = new GaugeWidget(nullptr, "温度", -10, 50, "°C", techBlue);m_temperatureGauge->setAlertLevels(10, 25, 35);// 创建空气质量仪表盘 - 使用科技蓝色m_airQualityGauge = new GaugeWidget(nullptr, "PM2.5", 0, 300, "μg/m³", techBlue);m_airQualityGauge->setAlertLevels(35, 75, 150);// 创建空气质量标签 - 调小字体m_airQualityLabel = new QLabel("优");m_airQualityLabel->setAlignment(Qt::AlignCenter);m_airQualityLabel->setStyleSheet("QLabel {""color: #00ff00;""font-size: 14px;" // 调小字体"font-weight: bold;""background-color: #202830;""border-radius: 8px;""padding: 8px;""}");// 将仪表盘添加到布局m_gaugeLayout->addWidget(m_temperatureGauge);QVBoxLayout *airLayout = new QVBoxLayout();airLayout->setSpacing(10);airLayout->addWidget(m_airQualityGauge);airLayout->addWidget(m_airQualityLabel);m_gaugeLayout->addLayout(airLayout);// 创建数据卡片布局m_dataCardLayout = new QHBoxLayout();m_dataCardLayout->setSpacing(15);// 创建数据卡片m_humidityCard = new DataCardWidget(nullptr, "湿度", "💧", "%RH");m_lightCard = new DataCardWidget(nullptr, "光照", "☀️", "Lux");m_pressureCard = new DataCardWidget(nullptr, "气压", "🌪️", "hPa");// 将卡片添加到布局m_dataCardLayout->addWidget(m_humidityCard);m_dataCardLayout->addWidget(m_lightCard);m_dataCardLayout->addWidget(m_pressureCard);// 将所有部件添加到主布局m_mainLayout->addWidget(m_titleLabel);m_mainLayout->addWidget(m_timeLabel);m_mainLayout->addLayout(m_gaugeLayout);m_mainLayout->addLayout(m_dataCardLayout);m_mainLayout->addStretch();
}void MainWindow::setupSignals()
{// 连接信号和槽
}void MainWindow::updateData()
{// 生成模拟数据double temperature = 20.0 + QRandomGenerator::global()->bounded(15.0);double pm25 = QRandomGenerator::global()->bounded(150.0);double humidity = 30.0 + QRandomGenerator::global()->bounded(50.0);double light = QRandomGenerator::global()->bounded(1000.0);double pressure = 1000.0 + QRandomGenerator::global()->bounded(20.0);// 更新仪表盘m_temperatureGauge->setValue(temperature);m_airQualityGauge->setValue(pm25);// 更新空气质量标签QString airQuality;QString color;if (pm25 <= 35) {airQuality = "优";color = "#00ff00";} else if (pm25 <= 75) {airQuality = "良";color = "#ffff00";} else if (pm25 <= 115) {airQuality = "轻度污染";color = "#ff7f00";} else {airQuality = "污染";color = "#ff0000";}m_airQualityLabel->setText(airQuality);m_airQualityLabel->setStyleSheet(QString("QLabel {""color: %1;""font-size: 14px;""font-weight: bold;""background-color: #202830;""border-radius: 8px;""padding: 8px;""}").arg(color));// 更新数据卡片m_humidityCard->setValue(humidity);m_lightCard->setValue(light);m_pressureCard->setValue(pressure);
}void MainWindow::updateTime()
{QDateTime current = QDateTime::currentDateTime();m_timeLabel->setText(current.toString("yyyy-MM-dd hh:mm:ss"));
}

四、显示效果

​