当前位置:   article > 正文

qt 指示灯 状态灯 红绿灯 LED灯:使用QLabel实现_在qt里的ui界面怎么使用qlabel设计一个灯泡

在qt里的ui界面怎么使用qlabel设计一个灯泡

前言
需要在界面上实时显示设备的状态,希望通过指示灯来显示,例如绿色代表正常,红色代表异常。

实现步骤
首先添加几个QLabel控件,下图添加了四个QLabel控件。对于QLabel,双击可以修改其text,在属性栏可以修改其objectName,修改led1、led2的objectName为label_led1、label_led2。

在这里插入图片描述

使用自定义函数setLED来实现LED灯。

 

  1. // 该函数将label控件变成一个圆形指示灯,需要指定颜色color以及直径size
  2. // color 0:grey 1:red 2:green 3:yellow
  3. // size 单位是像素
  4. setLED(QLabel* label, int color, int size)
  5. {
  6. // 将label中的文字清空
  7. label->setText("");
  8. // 先设置矩形大小
  9. // 如果ui界面设置的label大小比最小宽度和高度小,矩形将被设置为最小宽度和最小高度;
  10. // 如果ui界面设置的label大小比最小宽度和高度大,矩形将被设置为最大宽度和最大高度;
  11. QString min_width = QString("min-width: %1px;").arg(size); // 最小宽度:size
  12. QString min_height = QString("min-height: %1px;").arg(size); // 最小高度:size
  13. QString max_width = QString("max-width: %1px;").arg(size); // 最小宽度:size
  14. QString max_height = QString("max-height: %1px;").arg(size); // 最小高度:size
  15. // 再设置边界形状及边框
  16. QString border_radius = QString("border-radius: %1px;").arg(size/2); // 边框是圆角,半径为size/2
  17. QString border = QString("border:1px solid black;"); // 边框为1px黑色
  18. // 最后设置背景颜色
  19. QString background = "background-color:";
  20. switch (color) {
  21. case 0:
  22. // 灰色
  23. background += "rgb(190,190,190)";
  24. break;
  25. case 1:
  26. // 红色
  27. background += "rgb(255,0,0)";
  28. break;
  29. case 2:
  30. // 绿色
  31. background += "rgb(0,255,0)";
  32. break;
  33. case 3:
  34. // 黄色
  35. background += "rgb(255,255,0)";
  36. break;
  37. default:
  38. break;
  39. }
  40. const QString SheetStyle = min_width + min_height + max_width + max_height + border_radius + border + background;
  41. label->setStyleSheet(SheetStyle);
  42. }

在需要改变LED灯颜色的地方调用setLED即可。为了演示,我新建了MainWindow工程,在MainWindow类的构造函数中直接调用,运行程序时便会改变LED颜色。

  1. MainWindow::MainWindow(QWidget *parent) :
  2. QMainWindow(parent),
  3. ui(new Ui::MainWindow)
  4. {
  5. ui->setupUi(this);
  6. setLED(ui->label_led1, 1, 16);
  7. setLED(ui->label_led2, 2, 16);
  8. }

在这里插入图片描述

 

————————————————
版权声明:本文为CSDN博主「Fourier_1024」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。
原文链接:https://blog.csdn.net/Fourier_1024/article/details/113517982

 

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/小蓝xlanll/article/detail/109888
推荐阅读