未实现时的播放器界面
下面是实现了雏形的悬浮栏：
设计一个播放器的悬浮工具栏旨在提升用户的交互体验，使得播放器在不影响观感的情况下提供常用功能。为此，我们可以新建一个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();
}
这只是底部的悬浮栏雏形代码，可以通过创建新的窗口，调整位置，增加空间来做顶部悬浮栏，异曲同工
