1、使用Qt的design加载图像ico
使用圆形警示灯ico图像填充QLabel控件,在design界面中选中label控件,在pixmap的属性下选择不同的图片来填充。
文章图片
这种填充方法有一个缺点,就是图像没有进行缩放,这样label控件的大小就会导致无法完全显示图像,这里一般按照图像的宽高来设定label尺寸属性。
文章图片
这里水平和垂直策略都选择Maximum,然后把minimumSize和MaximumSize都设置成图像大小。
2、使用setStyleSheet()函数来修改QLabel
setStyleSheet()函数可以用来修改控件的显示qss,可以直接调用该函数将Label控件设定成警示灯的显示形式。
min-width:40px;
//最小宽度 40px
min-height:40px;
//最小高度 40px
max-width:40px;
//最大宽度 40px
max-height:40px;
//最大高度 40px
border-radius: 20px;
//边框是圆角,半径20px
border:1px solid black;
//边框1px,边框黑色
background: red;//背景是红色
【[Qt学习笔记]QLabel实现圆形警示灯显示方法】这里设定宽度高度和圆角,将Label显示成圆形状态。
const QString m_red_SheetStyle = "min-width: 40px;
min-height: 40px;
max-width:40px;
max-height: 40px;
border-radius: 20px;
background:red";
const QString m_green_SheetStyle = "min-width: 40px;
min-height: 40px;
max-width:40px;
max-height: 40px;
border-radius: 20px;
;
background:green";
const QString m_gray_SheetStyle = "min-width: 40px;
min-height: 40px;
max-width:40px;
max-height: 40px;
border-radius: 20px;
border:1px solid black;
background:grey";
const QString m_yellow_SheetStyle = "min-width: 40px;
min-height: 40px;
max-width:40px;
max-height: 40px;
border-radius: 20px;
border:1px solid black;
background:yellow";
ui->lab_LED_R->setStyleSheet(m_red_SheetStyle);
// 红色圆形警示灯
ui->lab_LED_G->setStyleSheet(m_green_SheetStyle);
//绿色圆形警示灯
ui->lab_LED_B->setStyleSheet(m_yellow_SheetStyle);
//黄色圆形警示灯
ui->lab_LED_GR->setStyleSheet(m_gray_SheetStyle);
//灰色圆形警示灯
这里只介绍了简单的setStyleSheet()函数应用,包括一些过渡,透明等效果都可以使用setStyleSheet()函数来进行设置,这里就不展开了。
文章图片