---

前言

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

一、LED界面布局準(zhǔn)備工作

首先添加LED燈光控制的圖標(biāo)。

將選擇好的LED圖標(biāo)添加進來：

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

二、LED界面布局

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

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

隱藏邊框：

設(shè)置按鍵樣式表：

樣式表中的代碼：

border-radius: 50px;

設(shè)置字體大小：

添加一些滑動條：

更改對應(yīng)按鍵和滑動條的對象名：

界面運行效果：

三、邏輯實現(xiàn)

這里在QT設(shè)計師界面跳轉(zhuǎn)到槽函數(shù)：

對應(yīng)按鍵的槽函數(shù)：

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

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

代碼實現(xiàn)：
LEDCotrol.h:

#ifndef LEDCOTROL_H
#define LEDCOTROL_H#include <QWidget>
#include <QPushButton>namespace Ui {
class LEDCotrol;
}class LEDCotrol : public QWidget
{Q_OBJECT/*各個LED狀態(tài)變量*/bool led1status;bool led2status;bool led3status;bool led4status;void AllLEDInit();//LED狀態(tài)初始化void LEDStatusSet(QPushButton* button, QString path);//LED狀態(tài)設(shè)置函數(shù)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狀態(tài)初始化*/led1status = true;led2status = true;led3status = true;led4status = true;/*LED1*/QPixmap pixmap(":/ICon/LEDOFF.png");  // 加載背景圖像QIcon icon(pixmap.scaled(QSize(127, 150), Qt::KeepAspectRatio));  // 設(shè)置圖像大小與按鈕相同，并保持縱橫比ui->LED1->setIcon(icon);//關(guān)閉LEDui->LED1->setIconSize(QSize(127, 150));  // 設(shè)置圖標(biāo)的大小與按鈕相同/*LED2*/ui->LED2->setIcon(icon);//關(guān)閉LEDui->LED2->setIconSize(QSize(127, 150));  // 設(shè)置圖標(biāo)的大小與按鈕相同/*LED3*/ui->LED3->setIcon(icon);//關(guān)閉LEDui->LED3->setIconSize(QSize(127, 150));  // 設(shè)置圖標(biāo)的大小與按鈕相同/*LED4*/ui->LED4->setIcon(icon);//關(guān)閉LEDui->LED4->setIconSize(QSize(127, 150));  // 設(shè)置圖標(biāo)的大小與按鈕相同
}/** 設(shè)置一個LED的狀態(tài)* button:要設(shè)置的LED按鍵* path:圖片路徑
*/
void LEDCotrol::LEDStatusSet(QPushButton* button, QString path)
{QPixmap pixmap(path);  // 加載背景圖像QIcon icon(pixmap.scaled(QSize(127, 150), Qt::KeepAspectRatio));  // 設(shè)置圖像大小與按鈕相同，并保持縱橫比button->setIcon(icon);//關(guān)閉LEDbutton->setIconSize(QSize(127, 150));  // 設(shè)置圖標(biāo)的大小與按鈕相同
}/*LED1按鍵槽函數(shù)*/
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按鍵槽函數(shù)*/
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按鍵槽函數(shù)*/
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按鍵槽函數(shù)*/
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槽函數(shù):控制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槽函數(shù):控制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槽函數(shù):控制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槽函數(shù):控制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狀態(tài)的同步。

總結(jié)

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