当前位置：首页 > news >正文

使用Qt创建悬浮窗口

news 来源：原创 2025/5/29 14:03:38

在Qt中创建悬浮窗口（如无边框、可拖动的浮动面板或提示框）可以通过以下方法实现。以下是几种常见场景的解决方案：

方法1：使用无边框窗口 + 鼠标事件拖动

适用于自定义浮动工具窗口（如Photoshop的工具栏）。

#include <QWidget>
#include <QMouseEvent>

class FloatingWindow : public QWidget {
public:
    FloatingWindow(QWidget *parent = nullptr) : QWidget(parent) {
        // 设置窗口无边框
        setWindowFlags(Qt::FramelessWindowHint | Qt::WindowStaysOnTopHint);
        // 设置半透明背景（可选）
        setAttribute(Qt::WA_TranslucentBackground);
        // 设置窗口尺寸
        resize(200, 150);
        
        // 添加内容（示例：添加一个标签）
        QLabel *label = new QLabel("悬浮窗口内容", this);
        label->setAlignment(Qt::AlignCenter);
    }

protected:
    // 实现鼠标拖动窗口
    void mousePressEvent(QMouseEvent *event) override {
        if (event->button() == Qt::LeftButton) {
            m_dragPosition = event->globalPos() - frameGeometry().topLeft();
            event->accept();
        }
    }

    void mouseMoveEvent(QMouseEvent *event) override {
        if (event->buttons() & Qt::LeftButton) {
            move(event->globalPos() - m_dragPosition);
            event->accept();
        }
    }

private:
    QPoint m_dragPosition;
};

// 使用示例
int main(int argc, char *argv[]) {
    QApplication a(argc, argv);
    FloatingWindow window;
    window.show();
    return a.exec();
}

方法2：自定义ToolTip样式

当需要美化默认的悬浮提示时，可通过样式表或自定义QToolTip。

通过样式表修改默认ToolTip

// 全局设置ToolTip样式
qApp->setStyleSheet(
    "QToolTip {"
    "   background: #FFFFCC;"
    "   color: #333333;"
    "   border: 1px solid #FFAA00;"
    "   border-radius: 3px;"
    "   padding: 2px;"
    "}"
);

// 为某个控件设置ToolTip
QPushButton *button = new QPushButton("Hover Me");
button->setToolTip("这是自定义样式的提示！");

创建自定义提示窗口

若需要更复杂的内容（如图片、按钮），可继承QWidget实现：

class CustomToolTip : public QWidget {
public:
    CustomToolTip(QWidget *parent = nullptr) : QWidget(parent) {
        setWindowFlags(Qt::ToolTip | Qt::FramelessWindowHint);
        setAttribute(Qt::WA_TranslucentBackground);
        
        QLabel *label = new QLabel("自定义提示内容", this);
        QVBoxLayout *layout = new QVBoxLayout(this);
        layout->addWidget(label);
    }
};

// 在需要显示的地方触发
void showCustomToolTip(QWidget *target) {
    CustomToolTip *tip = new CustomToolTip(target);
    tip->move(target->mapToGlobal(QPoint(0, target->height())));
    tip->show();
}

方法3：结合事件过滤器实现悬停显示

当鼠标悬停在某个控件上时显示自定义悬浮窗口。

#include <QEvent>

class HoverWidget : public QWidget {
public:
    HoverWidget(QWidget *parent = nullptr) : QWidget(parent) {
        setWindowFlags(Qt::ToolTip | Qt::FramelessWindowHint);
        hide(); // 初始隐藏
    }
};

// 在父控件中安装事件过滤器
class MainWindow : public QWidget {
public:
    MainWindow() {
        QPushButton *button = new QPushButton("悬停显示窗口", this);
        m_hoverWidget = new HoverWidget(this);
        m_hoverWidget->resize(100, 50);

        // 安装事件过滤器到按钮
        button->installEventFilter(this);
    }

protected:
    bool eventFilter(QObject *obj, QEvent *event) override {
        if (obj == sender()) { // 假设sender是目标按钮
            if (event->type() == QEvent::Enter) {
                // 显示悬浮窗口
                QPoint pos = mapToGlobal(sender()->pos());
                m_hoverWidget->move(pos.x(), pos.y() + 30);
                m_hoverWidget->show();
            } else if (event->type() == QEvent::Leave) {
                m_hoverWidget->hide();
            }
        }
        return QWidget::eventFilter(obj, event);
    }

private:
    HoverWidget *m_hoverWidget;
};

关键配置说明

窗口标志（Window Flags）：
- Qt::FramelessWindowHint：隐藏标题栏和边框。
- Qt::WindowStaysOnTopHint：窗口始终置顶。
- Qt::ToolTip：短暂显示的提示窗口（无任务栏图标）。

透明背景：

setAttribute(Qt::WA_TranslucentBackground); // 允许透明

阴影效果：

// 通过样式表添加阴影
setStyleSheet(
    "QWidget {"
    "   background: white;"
    "   border: 1px solid #CCCCCC;"
    "   border-radius: 4px;"
    "}"
    "QWidget::shadow {"
    "   qproperty-shadow: 5px 5px 5px rgba(0,0,0,30);"
    "}"
);