文章目录
前言
一、创建工程项目
1.选择工程名称和项目保存路径
2.选择QWidget
3.添加保存图片的资源文件：
在工程目录下添加Icon文件夹保存图片：
将文件放入目录中：
将图片添加进入资源文件中：
二、界面布局准备工作
这里我们一共显示4个界面：LED控制界面，温度湿度显示界面，光照强度显示界面，摄像头监测界面。
所以这里需要有4个QWidget来显示对应的界面，考虑到要对这四个界面进行切换，这里会使用到QStackedLayout将四个界面进行管理。
同时需要添加四个按键，使用按键来切换到对应的界面。
首先添加4个界面文件：
设置界面为Widget类型：
其他的三个界面也是如此添加。
界面布局我们需要使用到的文件：
三、正式界面布局
代码部分注释写的非常详细了，这里就不多介绍了。
widget.h:
cpp
#ifndef WIDGET_H
#define WIDGET_H
#include <QWidget>
#include <QPushButton>
#include <QStackedLayout>
#include "LEDCotrol.h"
#include "TempHumtiy.h"
#include "Illumination.h"
#include "Camera.h"
class Widget : public QWidget
{
Q_OBJECT
QPushButton* LEDbutton;//LED按键
QPushButton* TempHumtiybutton;//温度湿度按键
QPushButton* illuminationbutton;//光照强度按键
QPushButton* Camerabutton;//摄像头按键
LEDCotrol* LEDUI;//LED界面
TempHumtiy* TempHumtiyUI;//温度湿度界面
Illumination* illuminationUI;//光照强度界面
Camera* CameraUI;//摄像头界面
QStackedLayout* m_stacklayout;//栈式布局管理器
void BackSet(QString path);//背景图设置
void ButtonStyleSet(QPushButton* button, QString Buttonname);//按键样式设置
void AllButtonStyleSet();//全部按键样式设置
public:
Widget(QWidget *parent = nullptr);
~Widget();
protected slots:
void LEDButtonClick();//LED按键槽函数
void TempHumtiyButtonClick();//温度湿度槽函数
void illuminationButtonClick();//光照强度槽函数
void CameraButtonClick();//摄像头槽函数
void ConnectSlot(void);//连接信号与槽
};
#endif // WIDGET_Hwidget.cpp:
cpp
#include "widget.h"
#include <QHBoxLayout>
#include <QVBoxLayout>
#include <QFrame>
Widget::Widget(QWidget *parent)
: QWidget(parent)
{
QVBoxLayout* vlayout = new QVBoxLayout();
LEDbutton = new QPushButton();//LED按键
TempHumtiybutton = new QPushButton();//温度湿度按键
illuminationbutton = new QPushButton();//光照强度按键
Camerabutton = new QPushButton();//摄像头按键
/*让四个按键垂直布局*/
vlayout->addWidget(LEDbutton);
vlayout->addWidget(TempHumtiybutton);
vlayout->addWidget(illuminationbutton);
vlayout->addWidget(Camerabutton);
// 创建一个 label 作为竖直分隔线
// 设置背景颜色或样式，以使其看起来像一根线
// 创建一条竖直分隔线
QFrame* Vertical_line = new QFrame();
Vertical_line->setFrameShape(QFrame::VLine);
Vertical_line->setFrameShadow(QFrame::Sunken);
Vertical_line->setStyleSheet("QFrame { background-color: rgb(71, 72, 86); }");
LEDUI = new LEDCotrol();//LED界面
TempHumtiyUI = new TempHumtiy();//温度湿度界面
illuminationUI = new Illumination();//光照强度界面
CameraUI = new Camera();//摄像头界面
/*使用栈式布局管理器管理界面*/
m_stacklayout = new QStackedLayout();
m_stacklayout->addWidget(LEDUI);
m_stacklayout->addWidget(TempHumtiyUI);
m_stacklayout->addWidget(illuminationUI);
m_stacklayout->addWidget(CameraUI);
QHBoxLayout* hlaout = new QHBoxLayout(this);
hlaout->addLayout(vlayout);
hlaout->addWidget(Vertical_line);
hlaout->addLayout(m_stacklayout);
/*设置界面为固定大小*/
setFixedSize(1024, 600);
/*设置对应的背景图*/
BackSet(":/ICon/BackIcon.jpg");
/*全部按键样式设置*/
AllButtonStyleSet();
/*连接信号与槽*/
ConnectSlot();
}
/*连接信号与槽*/
void Widget::ConnectSlot(void)
{
connect(LEDbutton, SIGNAL(clicked()), this, SLOT(LEDButtonClick()));
connect(TempHumtiybutton, SIGNAL(clicked()), this, SLOT(TempHumtiyButtonClick()));
connect(illuminationbutton, SIGNAL(clicked()), this, SLOT(illuminationButtonClick()));
connect(Camerabutton, SIGNAL(clicked()), this, SLOT(CameraButtonClick()));
}
/*
* 设置界面背景图
* path:资源文件路径
*/
void Widget::BackSet(QString path)
{
// 设置 QWidget 的背景图
QPixmap pixmap(path);
QPalette palette;
palette.setBrush(backgroundRole(), QBrush(pixmap));
setPalette(palette);
setAutoFillBackground(true);
}
/*
* 设置按键样式
* button:要设置的按键
* Buttonname:按键名字
*/
void Widget::ButtonStyleSet(QPushButton* button, QString Buttonname)
{
button->setText(Buttonname);
button->setFixedSize(150, 50);
button->setStyleSheet("font-size: 16pt");
button->setStyleSheet("background-color: rgb(94, 124, 166); font-size: 16pt; color: rgb(255, 255, 255);");
}
/*全部按键样式设置*/
void Widget::AllButtonStyleSet()
{
ButtonStyleSet(LEDbutton, "灯光控制");
ButtonStyleSet(TempHumtiybutton, "温度湿度");
ButtonStyleSet(illuminationbutton, "光照强度");
ButtonStyleSet(Camerabutton, "远程监控");
}
//LED按键槽函数
void Widget::LEDButtonClick()
{
m_stacklayout->setCurrentWidget(LEDUI);
}
//温度湿度槽函数
void Widget::TempHumtiyButtonClick()
{
m_stacklayout->setCurrentWidget(TempHumtiyUI);
}
//光照强度槽函数
void Widget::illuminationButtonClick()
{
m_stacklayout->setCurrentWidget(illuminationUI);
}
//摄像头槽函数
void Widget::CameraButtonClick()
{
m_stacklayout->setCurrentWidget(CameraUI);
}
Widget::~Widget()
{
}实现效果：
总结
本篇文章就讲解到这里，下篇文章我们完成LED，温度湿度控制等界面的设计。