Qt中实现悬浮窗口_qt鼠标移动顶端悬浮

前言

在做应用软件的时候，经常会用到悬浮窗口。当把鼠标指到某一个控件上时，自动出现一个悬浮窗口。本文就来讲一下悬浮窗口如何实现。本文打算利用label控件和一个只有textedit的widget实现这一功能。
具体描述就是，当把鼠标移动到label上方时，只有一个textEdit的widget会出现，当把鼠标移开时，这个widget会隐藏。

label控件实现

首先，label控件自身没有判断鼠标是否指向的功能，所以需要新建自己的label类，继承自QLabel，然后重载enterEvent和leaveEvent(QEvent * event)函数。然后把label控件提升为这个自己的label类。

继承自QLabel的label类h文件实现：

#ifndef QMYLABEL_H
#define QMYLABEL_H

#include <QObject>
#include <QLabel>

class QMyLabel : public QLabel
{
    Q_OBJECT
public:
    explicit QMyLabel(QWidget *parent = nullptr);

signals:
    void show();
    void hide();

public slots:

private:
    void enterEvent(QEvent * event);
    void leaveEvent(QEvent * event);
};

#endif // QMYLABEL_H
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

这里大部分代码都是qt自动生成的，除了鼠标事件函数重载这个两个函数和两个信号。

继承自QLabel的label类cpp文件实现：

#include "qmylabel.h"

QMyLabel::QMyLabel(QWidget *parent)
{
    this->setMouseTracking(true);
}

void QMyLabel::enterEvent(QEvent * event)
{
    emit show();
}

void QMyLabel::leaveEvent(QEvent * event)
{
    emit hide();
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

注意：

 this->setMouseTracking(true);
1

这句话一定要有，是用来开启跟踪鼠标功能的。
还有必须要在鼠标进入和离开事件中发送信号，这里也可以改成一个信号但是有一个bool的参数分别代表显示和隐藏。笔者也曾调试过用一个信号传入不同参数的方式，但并没有实现预期的功能，至今没有找到原因。

悬浮窗口的实现

其次，新建一个qt带界面的类，继承自QWidget，界面中只放一个textEdit，当然可以根据需要放任何控件。如果要自定义textEdit中显示的内容，可以在构造函数中传入textEdit内容作为参数。

floatpan.h实现：

#ifndef FLOATPAN_H
#define FLOATPAN_H

#include <QWidget>

namespace Ui {
class FloatPan;
}

class FloatPan : public QWidget
{
    Q_OBJECT

public:
    explicit FloatPan(QWidget *parent = 0,QString text = "default");
    ~FloatPan();

     void setCustomText(QString text);

private:

    Ui::FloatPan *ui;
};
#endif // FLOATPAN_H
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

其中大部分内容是qt自动生成的，除了构造函数添加一个参数，添加一个设置自定义的内容的方法。

floatpan.cpp实现：

#include "floatpan.h"
#include "ui_floatpan.h"

FloatPan::FloatPan(QWidget *parent,QString text) :
    QWidget(parent),
    ui(new Ui::FloatPan)
{
    ui->setupUi(this);
    ui->textEdit->setText(text);
    QFont font;
    font.setPixelSize(20);
    font.setBold(true);
    ui->textEdit->setFont(font);
}

FloatPan::~FloatPan()
{
    delete ui;
}

void FloatPan::setCustomText(QString text)
{
    ui->textEdit->setText(text);
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

在构造函数中设置字体和显示的内容，并且实现设置自定义内容的方法。

如何使用

最后，在使用的地方，首先进行悬浮窗的设置

FloatPan *widget;
widget = new FloatPan();
widget->setCustomText(QString::fromLocal8Bit("测设\r\ntest\r\n测试"));
1
2
3

然后在使用label控件的地方，进行信号和槽的连接

connect(ui->label_1,SIGNAL(show()),this,SLOT(showfloatwindow()));
connect(ui->label_1,SIGNAL(hide()),this,SLOT(hidefloatwindow()));
1
2

显示和隐藏悬浮窗实现

void showfloatwindow()
{
    widget->setCustomText(QString::fromLocal8Bit("测设\r\ntest\r\n测试"));
    widget->show();	
}
void hidefloatwindow()
{
    widget->hide();	
}
1
2
3
4
5
6
7
8
9

这样就实现了，当把鼠标移动到label上方时，只有一个textEdit的widget会出现，当把鼠标移开时，这个widget就隐藏了。