---

前言

上篇文章我們完成了主界面的布局設置那么這篇文章我們就來完成各個界面的布局設置吧。

一、LED界面布局準備工作

首先添加LED燈光控制的圖標。

將選擇好的LED圖標添加進來：

圖標可以在阿里的矢量圖中找到：
地址：阿里巴巴矢量圖庫
將圖片下載到后即可添加進入工程文件中。

二、LED界面布局

在QT設計師界面我們完成這樣的一個布局：

首先我們需要添加LED的圖標和將LED的按鍵邊框隱藏：

隱藏邊框：

設置按鍵樣式表：

樣式表中的代碼：

border-radius: 50px;

設置字體大小：

添加一些滑動條：

更改對應按鍵和滑動條的對象名：

界面運行效果：

三、邏輯實現

這里在QT設計師界面跳轉到槽函數：

對應按鍵的槽函數：

邏輯實現：
我們這個按鍵是用來控制LED燈開關的，所以這里的邏輯是按下按鍵LED圖標變滅，然后再次按下按鍵LED燈圖標變亮。

我們還能通過滑動條來改變LED燈的狀態，所以這里需要使用到滑動條的槽函數：

代碼實現：
LEDCotrol.h:

#ifndef LEDCOTROL_H
#define LEDCOTROL_H#include <QWidget>
#include <QPushButton>namespace Ui {
class LEDCotrol;
}class LEDCotrol : public QWidget
{Q_OBJECT/*各個LED狀態變量*/bool led1status;bool led2status;bool led3status;bool led4status;void AllLEDInit();//LED狀態初始化void LEDStatusSet(QPushButton* button, QString path);//LED狀態設置函數public:explicit LEDCotrol(QWidget *parent = nullptr);~LEDCotrol();private slots:void on_LED1_clicked();void on_LED2_clicked();void on_LED4_clicked();void on_LED3_clicked();void on_horizontalSlider_valueChanged(int value);void on_horizontalSlider_3_valueChanged(int value);void on_horizontalSlider_4_valueChanged(int value);void on_horizontalSlider_2_valueChanged(int value);private:Ui::LEDCotrol *ui;
};#endif // LEDCOTROL_H

LEDCotrol.cpp:

#include "LEDCotrol.h"
#include "ui_LEDCotrol.h"
#include <QIcon>
#include <QPixmap>
#include <QDebug>LEDCotrol::LEDCotrol(QWidget *parent) :QWidget(parent),ui(new Ui::LEDCotrol)
{ui->setupUi(this);/*全部LED初始化*/AllLEDInit();
}/*全部LED初始化*/
void LEDCotrol::AllLEDInit()
{/*LED狀態初始化*/led1status = true;led2status = true;led3status = true;led4status = true;/*LED1*/QPixmap pixmap(":/ICon/LEDOFF.png");  // 加載背景圖像QIcon icon(pixmap.scaled(QSize(127, 150), Qt::KeepAspectRatio));  // 設置圖像大小與按鈕相同，并保持縱橫比ui->LED1->setIcon(icon);//關閉LEDui->LED1->setIconSize(QSize(127, 150));  // 設置圖標的大小與按鈕相同/*LED2*/ui->LED2->setIcon(icon);//關閉LEDui->LED2->setIconSize(QSize(127, 150));  // 設置圖標的大小與按鈕相同/*LED3*/ui->LED3->setIcon(icon);//關閉LEDui->LED3->setIconSize(QSize(127, 150));  // 設置圖標的大小與按鈕相同/*LED4*/ui->LED4->setIcon(icon);//關閉LEDui->LED4->setIconSize(QSize(127, 150));  // 設置圖標的大小與按鈕相同
}/** 設置一個LED的狀態* button:要設置的LED按鍵* path:圖片路徑
*/
void LEDCotrol::LEDStatusSet(QPushButton* button, QString path)
{QPixmap pixmap(path);  // 加載背景圖像QIcon icon(pixmap.scaled(QSize(127, 150), Qt::KeepAspectRatio));  // 設置圖像大小與按鈕相同，并保持縱橫比button->setIcon(icon);//關閉LEDbutton->setIconSize(QSize(127, 150));  // 設置圖標的大小與按鈕相同
}/*LED1按鍵槽函數*/
void LEDCotrol::on_LED1_clicked()
{led1status = !led1status;if(led1status){LEDStatusSet(ui->LED1, ":/ICon/LEDOFF.png");ui->horizontalSlider->setValue(0);}else{LEDStatusSet(ui->LED1, ":/ICon/LEDON.png");ui->horizontalSlider->setValue(100);}
}/*LED2按鍵槽函數*/
void LEDCotrol::on_LED2_clicked()
{led2status = !led2status;if(led2status){LEDStatusSet(ui->LED2, ":/ICon/LEDOFF.png");ui->horizontalSlider_2->setValue(0);}else{LEDStatusSet(ui->LED2, ":/ICon/LEDON.png");ui->horizontalSlider_2->setValue(100);}
}/*LED4按鍵槽函數*/
void LEDCotrol::on_LED4_clicked()
{led3status = !led3status;if(led3status){LEDStatusSet(ui->LED4, ":/ICon/LEDOFF.png");ui->horizontalSlider_4->setValue(0);}else{LEDStatusSet(ui->LED4, ":/ICon/LEDON.png");ui->horizontalSlider_4->setValue(100);}
}/*LED3按鍵槽函數*/
void LEDCotrol::on_LED3_clicked()
{led4status = !led4status;if(led4status){LEDStatusSet(ui->LED3, ":/ICon/LEDOFF.png");ui->horizontalSlider_3->setValue(0);}else{LEDStatusSet(ui->LED3, ":/ICon/LEDON.png");ui->horizontalSlider_3->setValue(100);}
}LEDCotrol::~LEDCotrol()
{delete ui;
}/*滑塊1槽函數:控制LED1*/
void LEDCotrol::on_horizontalSlider_valueChanged(int value)
{if(value == 0){led1status = true;LEDStatusSet(ui->LED1, ":/ICon/LEDOFF.png");}else if(value == 99){led1status = false;LEDStatusSet(ui->LED1, ":/ICon/LEDON.png");}
}/*滑塊3槽函數:控制LED3*/
void LEDCotrol::on_horizontalSlider_3_valueChanged(int value)
{if(value == 0){led3status = true;LEDStatusSet(ui->LED3, ":/ICon/LEDOFF.png");}else if(value == 99){led3status = false;LEDStatusSet(ui->LED3, ":/ICon/LEDON.png");}
}/*滑塊4槽函數:控制LED4*/
void LEDCotrol::on_horizontalSlider_4_valueChanged(int value)
{if(value == 0){led4status = true;LEDStatusSet(ui->LED4, ":/ICon/LEDOFF.png");}else if(value == 99){led4status = false;LEDStatusSet(ui->LED4, ":/ICon/LEDON.png");}
}/*滑塊2槽函數:控制LED2*/
void LEDCotrol::on_horizontalSlider_2_valueChanged(int value)
{if(value == 0){led2status = true;LEDStatusSet(ui->LED2, ":/ICon/LEDOFF.png");}else if(value == 99){led2status = false;LEDStatusSet(ui->LED2, ":/ICon/LEDON.png");}
}

完成滑動條和LED狀態的同步。

總結

本篇文章就講解到這里，下篇文章將完成其他的界面布局和功能。