文章的目的为了记录使用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_OBJECT
public:
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"));
}
四、显示效果
