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


前言

通过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的界面如下图所示
统一设置QLabel的样式
在右上方的对象列表最顶端的名称为Widget的QWidget类上右击选择“改变样式表”,弹出样式表编辑页面,通过此处对该对象下的所有子对象进行相关设置,本案例中设置为以下文本,其中QLabel后面不带#具体对象名称,则可以统一对该对象下内所有QLabel子对象生效。

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

在这里插入图片描述

核心代码

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

mylabel.h

代码如下(示例):

#ifndef MYLABEL_H
#define MYLABEL_H

#include <QObject>
#include <QDebug>
#include <QLabel>

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”。
在这里插入图片描述

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

  • 3
    点赞
  • 43
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

wang_chao118

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值