---

前言

本篇文章來完成另外三個界面的布局設置。

這里會使用到 feiyangqingyun的一些控件庫。

一、溫度濕度曲線布局

TempHumtiy.h:

#ifndef TEMPHUMTIY_H
#define TEMPHUMTIY_H#include <QWidget>
#include "wavechart.h"namespace Ui {
class TempHumtiy;
}class TempHumtiy : public QWidget
{Q_OBJECTWaveChart* TempWave;//溫度曲線WaveChart* HumityWave;//濕度曲線public:explicit TempHumtiy(QWidget *parent = nullptr);~TempHumtiy();private:Ui::TempHumtiy *ui;
};#endif // TEMPHUMTIY_H

TempHumtiy.cpp:

#include "TempHumtiy.h"
#include "ui_TempHumtiy.h"
#include <QVBoxLayout>TempHumtiy::TempHumtiy(QWidget *parent) :QWidget(parent),ui(new Ui::TempHumtiy)
{ui->setupUi(this);QVBoxLayout* vlaout = new QVBoxLayout(this);//溫度曲線TempWave = new WaveChart();TempWave->setTitle("溫度曲線");//濕度曲線HumityWave = new WaveChart();HumityWave->setTitle("溫度曲線");vlaout->addWidget(TempWave);vlaout->addWidget(HumityWave);
}TempHumtiy::~TempHumtiy()
{delete ui;
}

運行效果：

二、環境監測界面布局

Illumination.h:

#include "Illumination.h"
#include "ui_Illumination.h"
#include <QHBoxLayout>
#include <QLabel>
#include <QFont>
#include <QPalette>Illumination::Illumination(QWidget *parent) :QWidget(parent),ui(new Ui::Illumination)
{ui->setupUi(this);QFont font("Arial", 20);QPalette palette;palette.setColor(QPalette::WindowText, Qt::white);QLabel* label1 = new QLabel("煙霧濃度");label1->setFont(font);label1->setPalette(palette);label1->setAlignment(Qt::AlignCenter);QLabel* label2 = new QLabel("光照強度");label2->setFont(font);label2->setPalette(palette);label2->setAlignment(Qt::AlignCenter);QLabel* label3 = new QLabel("Co2濃度");label3->setFont(font);label3->setPalette(palette);label3->setAlignment(Qt::AlignCenter);QHBoxLayout* hlayout = new QHBoxLayout();QHBoxLayout* hlayout1 = new QHBoxLayout();QVBoxLayout* vlayout = new QVBoxLayout(this);hlayout1->addWidget(label1);hlayout1->addWidget(label2);hlayout1->addWidget(label3);/* 煙霧濃度 */Smoke = new ProgressPercent();Smoke->setValue(20);Smoke->setUsedColor(QColor(255, 127, 39));Smoke->setPercentStyle(ProgressPercent::PercentStyle_Arc_Wave);/* 光照強度 */IllCent = new ProgressPercent();IllCent->setValue(15);IllCent->setUsedColor(QColor(237, 201, 14));IllCent->setPercentStyle(ProgressPercent::PercentStyle_Arc_Wave);/* Co2 */Co2 = new ProgressPercent();Co2->setValue(25);Co2->setUsedColor(QColor(237, 28, 36));Co2->setPercentStyle(ProgressPercent::PercentStyle_Arc_Wave);hlayout->addWidget(Smoke);hlayout->addWidget(IllCent);hlayout->addWidget(Co2);vlayout->addStretch();vlayout->addLayout(hlayout);vlayout->addLayout(hlayout1);vlayout->addStretch();
}Illumination::~Illumination()
{delete ui;
}

Illumination.cpp:

#include "Illumination.h"
#include "ui_Illumination.h"
#include <QHBoxLayout>
#include <QLabel>
#include <QFont>
#include <QPalette>Illumination::Illumination(QWidget *parent) :QWidget(parent),ui(new Ui::Illumination)
{ui->setupUi(this);QFont font("Arial", 20);QPalette palette;palette.setColor(QPalette::WindowText, Qt::white);QLabel* label1 = new QLabel("煙霧濃度");label1->setFont(font);label1->setPalette(palette);label1->setAlignment(Qt::AlignCenter);QLabel* label2 = new QLabel("光照強度");label2->setFont(font);label2->setPalette(palette);label2->setAlignment(Qt::AlignCenter);QLabel* label3 = new QLabel("Co2濃度");label3->setFont(font);label3->setPalette(palette);label3->setAlignment(Qt::AlignCenter);QHBoxLayout* hlayout = new QHBoxLayout();QHBoxLayout* hlayout1 = new QHBoxLayout();QVBoxLayout* vlayout = new QVBoxLayout(this);hlayout1->addWidget(label1);hlayout1->addWidget(label2);hlayout1->addWidget(label3);/* 煙霧濃度 */Smoke = new ProgressPercent();Smoke->setValue(20);Smoke->setUsedColor(QColor(255, 127, 39));Smoke->setPercentStyle(ProgressPercent::PercentStyle_Arc_Wave);/* 光照強度 */IllCent = new ProgressPercent();IllCent->setValue(15);IllCent->setUsedColor(QColor(237, 201, 14));IllCent->setPercentStyle(ProgressPercent::PercentStyle_Arc_Wave);/* Co2 */Co2 = new ProgressPercent();Co2->setValue(25);Co2->setUsedColor(QColor(237, 28, 36));Co2->setPercentStyle(ProgressPercent::PercentStyle_Arc_Wave);hlayout->addWidget(Smoke);hlayout->addWidget(IllCent);hlayout->addWidget(Co2);vlayout->addStretch();vlayout->addLayout(hlayout);vlayout->addLayout(hlayout1);vlayout->addStretch();
}Illumination::~Illumination()
{delete ui;
}

運行效果:

三、攝像頭界面布局

將QWidget提升為QVideoWidget,這個界面用于顯示攝像頭的圖形。

Camera.h:

#ifndef CAMERA_H
#define CAMERA_H#include <QWidget>
#include <QCamera>
#include <QVideoWidget>
#include <QMediaCaptureSession>
#include <QMediaDevices>namespace Ui {
class Camera;
}class Camera : public QWidget
{Q_OBJECT// 設置攝像機QCamera* camera;// 媒體會話QMediaCaptureSession* captureSession;public:explicit Camera(QWidget *parent = nullptr);~Camera();private:Ui::Camera *ui;
};#endif // CAMERA_H

Camera.cpp:

#include "Camera.h"
#include "ui_Camera.h"Camera::Camera(QWidget *parent) :QWidget(parent),ui(new Ui::Camera)
{ui->setupUi(this);// 默認的視頻輸入設備QCameraDevice defaultVideoInput = QMediaDevices::defaultVideoInput();// 設置攝像機camera = new QCamera(QMediaDevices::defaultVideoInput());// 媒體會話captureSession = new QMediaCaptureSession();captureSession->setCamera(camera);captureSession->setVideoOutput(ui->widget);camera->start();}Camera::~Camera()
{delete ui;
}

運行效果：

總結

本篇文章就講解到這里。