??文章的目的為了記錄使用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/m3", 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"));
}
四、顯示效果
?
)
:運行x86Demo示例)
