Qt 鼠标移入QLabel、离开QLabel、点击QLabel显示不同的效果

文章目录

  • 前言
  • 效果
  • ui设置
  • 核心代码
    • mylabel.h
    • mylabel.cpp
    • 提升QLabel类为MyLabel类


前言

通过Qt建立一个窗口应用,经常会出现以下的应用场景:即鼠标移入、离开以及点击一个QLabel时,QLabel相应的样式发生改变,发生诸如“边框加粗”、“背景色改变”、“显示文本”等变化,本案例通过编写一个继承于QLabel的MyLabel类实现上述需求。通过重写enterEvent、leaveEvent以及mousePressEvent三个函数,实现相关的视觉操作。具体效果如下图所示。


效果

建立的Qt窗口应用,一个窗口里面有4个QLabel,默认状态下的样式为绿色背景色,当鼠标进入某个QLabel范围内时,该QLabel样式切换为蓝色底红色加粗边框,当在该QLabel范围内点击鼠标左键时,该QLabel的样式切换为红色底细边框,且显示文本“被点击了”,当鼠标离开该QLabel范围时,清空所有样式,还原为初始状态。

ui设置

通过Qt建立一个Qt 窗口应用,在ui文件中进行相应的窗口布局,设置所有的QLabel为统一样式。

上述步骤可以通过代码或者ui界面属性设置两种方式实现,本人习惯于直接在ui界面进行设置的方式

Qt Creator的界面如下图所示
Qt 鼠标移入QLabel、离开QLabel、点击QLabel显示不同的效果_第1张图片
在右上方的对象列表最顶端的名称为Widget的QWidget类上右击选择“改变样式表”,弹出样式表编辑页面,通过此处对该对象下的所有子对象进行相关设置,本案例中设置为以下文本,其中QLabel后面不带#具体对象名称,则可以统一对该对象下内所有QLabel子对象生效。

QLabel//不指定特定对象,即对所有QLabel生效
{
	background-color:rgb(0,255,127);
}

Qt 鼠标移入QLabel、离开QLabel、点击QLabel显示不同的效果_第2张图片

核心代码

通过新建一个继承于QLabel的MyLabel类实现对鼠标功能的封装,重写enterEvent、leaveEvent以及mousePressEvent,实现在相关鼠标操作下的样式变化。
MyLabel public继承于QLabel类,其中enterEvent、leaveEvent以及mousePressEvent 均为public继承于QWidget。

mylabel.h

代码如下(示例):

#ifndef MYLABEL_H
#define MYLABEL_H

#include 
#include 
#include 

class MyLabel:public QLabel
{
    Q_OBJECT
public:
    MyLabel(QWidget *parent = 0);
    void enterEvent(QEvent *event);
    void leaveEvent(QEvent *event);
    void mousePressEvent(QMouseEvent *event);
};

#endif // MYLABEL_H

mylabel.cpp

代码如下(示例):

#include "mylabel.h"

MyLabel::MyLabel(QWidget *parent):QLabel(parent)
{

}

void MyLabel::enterEvent(QEvent *event)
{
    setStyleSheet("border:6px solid;"
                  "border-color:rgb(255,0,0);"
                  "background-color: rgb(0, 0, 255);");
}

void MyLabel::leaveEvent(QEvent *event)
{
    setStyleSheet("border:0px");
    setText(" ");
    setAlignment(Qt::AlignCenter);
}

void MyLabel::mousePressEvent(QMouseEvent *event)
{
    setStyleSheet("border:2px solid;"
                  "background-color: rgb(255, 0, 0);");
    QFont font ( "Microsoft YaHei", 30, 75);
    setFont(font);
    setText("被点击了");
    setAlignment(Qt::AlignCenter);

}

提升QLabel类为MyLabel类

将ui文件中各个QLabel提升为MyLabel,通过右击QLabel选在“提升为”选项,出现“提升的类”对话框,选中mylabel.h头文件,点击“提升”,提升后的类名由“QLabel”变为“MyLabel”。
Qt 鼠标移入QLabel、离开QLabel、点击QLabel显示不同的效果_第3张图片

至此可实现鼠标移入、点击、离开QLabel时相关的显示变化操作。

你可能感兴趣的:(Qt,qt,ui)