前言

一、創(chuàng)建工程項目

1.選擇工程名稱和項目保存路徑

2.選擇QWidget

3.添加保存圖片的資源文件：



在工程目錄下添加Icon文件夾保存圖片：

將文件放入目錄中：

將圖片添加進入資源文件中：

二、界面布局準備工作

這里我們一共顯示4個界面：LED控制界面，溫度濕度顯示界面，光照強度顯示界面，攝像頭監(jiān)測界面。

所以這里需要有4個QWidget來顯示對應的界面，考慮到要對這四個界面進行切換，這里會使用到QStackedLayout將四個界面進行管理。

同時需要添加四個按鍵，使用按鍵來切換到對應的界面。

首先添加4個界面文件：

設置界面為Widget類型：

其他的三個界面也是如此添加。

界面布局我們需要使用到的文件：

三、正式界面布局

代碼部分注釋寫的非常詳細了，這里就不多介紹了。

widget.h:

#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按鍵槽函數(shù)
    void TempHumtiyButtonClick();//溫度濕度槽函數(shù)
    void illuminationButtonClick();//光照強度槽函數(shù)
    void CameraButtonClick();//攝像頭槽函數(shù)

    void ConnectSlot(void);//連接信號與槽
};
#endif // WIDGET_H

widget.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);

    // 創(chuàng)建一個 label 作為豎直分隔線
    // 設置背景顏色或樣式，以使其看起來像一根線
    // 創(chuàng)建一條豎直分隔線
    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, "遠程監(jiān)控");
}

//LED按鍵槽函數(shù)
void Widget::LEDButtonClick()
{
    m_stacklayout->setCurrentWidget(LEDUI);
}

//溫度濕度槽函數(shù)
void Widget::TempHumtiyButtonClick()
{
    m_stacklayout->setCurrentWidget(TempHumtiyUI);
}

//光照強度槽函數(shù)
void Widget::illuminationButtonClick()
{
    m_stacklayout->setCurrentWidget(illuminationUI);
}

//攝像頭槽函數(shù)
void Widget::CameraButtonClick()
{
    m_stacklayout->setCurrentWidget(CameraUI);
}

Widget::~Widget()
{
}

實現(xiàn)效果：

總結

本篇文章就講解到這里，下篇文章我們完成LED，溫度濕度控制等界面的設計。文章來源地址http://www.zghlxwxcb.cn/news/detail-640522.html

到了這里，關于Linux MQTT智能家居項目(智能家居界面布局)的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持TOY模板網(wǎng)！