Qt实现播放器顶部、底部悬浮工具栏

未实现时的播放器界面

下面是实现了雏形的悬浮栏：

设计一个播放器的悬浮工具栏旨在提升用户的交互体验，使得播放器在不影响观感的情况下提供常用功能。为此，我们可以新建一个QWidget窗口作为悬浮工具栏，将其作为播放器窗口的子控件，以便实现灵活的显示和隐藏，同时利用透明度调节带来更具现代感的视觉效果。以下是具体的设计思路：

1. 悬浮工具栏的布局与功能设计

悬浮工具栏通常包含播放、暂停、进度条、音量控制、全屏切换等基础功能按钮。工具栏的布局应简洁、紧凑，便于用户一眼就找到所需的功能。可以采用水平布局，所有控件在一个水平行中排列，这样可以节省空间，符合播放器的视觉设计需求。此外，为了增强交互性，可以在悬浮栏上方添加提示文本，鼠标悬停时显示对应功能的提示，帮助用户快速上手。

2. 显示和隐藏逻辑

为了使悬浮工具栏在不操作时不打扰用户观影体验，我们可以设置当鼠标进入播放器窗口时显示工具栏，离开时自动隐藏。实现上，可以通过捕获播放器窗口的鼠标事件来控制悬浮工具栏的显隐。例如，使用enterEvent()和leaveEvent()事件来分别显示和隐藏悬浮栏。这种设计可以确保用户在需要时快速找到工具栏，在不需要时工具栏自动消失，避免界面过于杂乱。

3. 悬浮效果与透明度调节

为了提升工具栏的视觉观感，可以为悬浮栏设置半透明效果，使其在播放器界面中呈现悬浮效果。透明度调节可以通过设置窗口的不透明度属性实现，例如使用setWindowOpacity()方法。通常可以将透明度设置为50%-80%之间，这样既不影响工具栏的可见性，又不遮挡播放器画面。此外，可以通过逐渐调节透明度来实现淡入淡出的动画效果，进一步提升悬浮栏的动态表现。

4. 悬浮栏的创建与嵌入

悬浮工具栏需要作为播放器窗口的子控件创建，这样可以确保它随播放器一起显示和关闭。具体实现上，可以创建一个继承自QWidget的悬浮工具栏类，将其添加为播放器窗口的子窗口，并设定为无边框窗口，以避免影响播放器窗口的边框和布局。悬浮工具栏可以通过Qt::FramelessWindowHint等属性来隐藏边框，Qt::ToolTip属性可以将其置于播放器窗口的顶层，保证其不被其他窗口遮挡。

5. 响应用户交互

作为播放器的一部分，悬浮工具栏应能实时响应用户的交互需求，比如鼠标进入和点击操作，保持操作的流畅性。可以通过设置合适的事件过滤器来捕获和处理用户的点击事件，确保悬浮栏在点击按钮时不发生其他意外隐藏。通过这一设计，悬浮工具栏将具备流畅的显示隐藏效果、出色的半透明悬浮效果和紧凑的功能布局，为播放器提供更具现代感的交互体验。

代码如下：

#include <QApplication>
#include <QOpenGLWidget>
#include <QPushButton>
#include <QHBoxLayout>
#include <QVBoxLayout>

class FloatingToolbar : public QWidget {
    Q_OBJECT

public:
    FloatingToolbar(QWidget *parent = nullptr) : QWidget(parent) {
        // 设置为顶层窗口
        setWindowFlags(Qt::Tool | Qt::WindowStaysOnTopHint | Qt::FramelessWindowHint);
        setAttribute(Qt::WA_TranslucentBackground);
        setWindowOpacity(0.8);  // 设置透明度

        // 创建布局管理器
        QHBoxLayout *layout = new QHBoxLayout(this);
        layout->setContentsMargins(10, 10, 10, 10);  // 设置边距

        // 创建左侧按钮
        QPushButton *button1 = new QPushButton("功能1", this);

        // 创建右侧按钮
        QPushButton *button2 = new QPushButton("功能2", this);
        QPushButton *button3 = new QPushButton("功能3", this);

        // 添加左侧按钮
        layout->addWidget(button1);

        // 添加弹簧，将按钮分隔开
        layout->addStretch();

        // 添加右侧按钮
        layout->addWidget(button2);
        layout->addWidget(button3);

        // 设置布局
        setLayout(layout);
    }

    void resizeToBottomOfParent() {
        if (parentWidget()) {
            setGeometry(parentWidget()->geometry().adjusted(0, parentWidget()->height() - height(), 0, 0));
        }
    }
};

class VideoPlayer : public QOpenGLWidget {
    Q_OBJECT

public:
    VideoPlayer(QWidget *parent = nullptr) : QOpenGLWidget(parent) {
        // 创建悬浮工具栏并设置父窗口
        toolbar = new FloatingToolbar(this);  // 将VideoPlayer实例设置为toolbar的父窗口
        toolbar->setFixedHeight(50);           // 设置工具栏高度
        toolbar->hide();                        // 初始隐藏工具栏
    }

protected:
    void enterEvent(QEvent *event) override {
        toolbar->show();                       // 鼠标进入时显示工具栏
        toolbar->resizeToBottomOfParent();     // 调整工具栏的位置
        QOpenGLWidget::enterEvent(event);
    }

    void leaveEvent(QEvent *event) override {
        toolbar->hide();                       // 鼠标离开时隐藏工具栏
        QOpenGLWidget::leaveEvent(event);
    }

    void resizeEvent(QResizeEvent *event) override {
        QOpenGLWidget::resizeEvent(event);
        toolbar->resizeToBottomOfParent();     // 窗口大小改变时调整工具栏
    }

private:
    FloatingToolbar *toolbar;  // 工具栏作为成员变量
};

int main(int argc, char *argv[]) {
    QApplication app(argc, argv);

    VideoPlayer player;
    player.resize(800, 600);  // 设置视频窗口大小
    player.show();

    return app.exec();
}

这只是底部的悬浮栏雏形代码，可以通过创建新的窗口，调整位置，增加空间来做顶部悬浮栏，异曲同工