技術標籤：qt開發qtc++視覺化

前言

需要在介面上實時顯示裝置的狀態，希望通過指示燈來顯示，例如綠色代表正常，紅色代表異常。

實現步驟

首先新增幾個QLabel控制元件，下圖添加了四個QLabel控制元件。對於QLabel，雙擊可以修改其text，在屬性欄可以修改其objectName，修改led1、led2的objectName為label_led1、label_led2。

使用自定義函式setLED來實現LED燈。

// 該函式將label控制元件變成一個圓形指示燈，需要指定顏色color以及直徑size
// color 0:grey 1:red 2:green 3:yellow
// size  單位是畫素
 

setLED(QLabel* label, int color, int size)
{
    // 將label中的文字清空
    label->setText("");
    // 先設定矩形大小
    // 如果ui介面設定的label大小比最小寬度和高度小，矩形將被設定為最小寬度和最小高度；
    // 如果ui介面設定的label大小比最小寬度和高度大，矩形將被設定為最大寬度和最大高度；
    QString min_width = QString("min-width: %1px;").arg(size);              // 最小寬度：size
 

    QString min_height = QString("min-height: %1px;").arg(size);            // 最小高度：size
    QString max_width = QString("max-width: %1px;").arg(size);              // 最小寬度：size
    QString max_height = QString("max-height: %1px;").arg(size);            // 最小高度：size
    // 再設定邊界形狀及邊框
 

    QString border_radius = QString("border-radius: %1px;").arg(size/2);    // 邊框是圓角，半徑為size/2
    QString border = QString("border:1px solid black;");                    // 邊框為1px黑色
    // 最後設定背景顏色
    QString background = "background-color:";
    switch (color) {
    case 0:
        // 灰色
        background += "rgb(190,190,190)";
        break;
    case 1:
        // 紅色
        background += "rgb(255,0,0)";
        break;
    case 2:
        // 綠色
        background += "rgb(0,255,0)";
        break;
    case 3:
        // 黃色
        background += "rgb(255,255,0)";
        break;
    default:
        break;
    }

    const QString SheetStyle = min_width + min_height + max_width + max_height + border_radius + border + background;
    label->setStyleSheet(SheetStyle);
}

在需要改變LED燈顏色的地方呼叫setLED即可。為了演示，我新建了MainWindow工程，在MainWindow類的建構函式中直接呼叫，執行程式時便會改變LED顏色。

MainWindow::MainWindow(QWidget *parent) :
    QMainWindow(parent),
    ui(new Ui::MainWindow)
{
    ui->setupUi(this);

    setLED(ui->label_led1, 1, 16);
    setLED(ui->label_led2, 2, 16);
}

效果如下：