关于qt5:Qt学习笔记QLabel实现圆形警示灯显示方法

28次阅读

共计 1390 个字符,预计需要花费 4 分钟才能阅读完成。

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;// 背景是红色 

这里设定宽度高度和圆角,将 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() 函数来进行设置,这里就不开展了。

正文完
 0