在 Qt 中使用 QLabel 设置 GIF 动态背景

在 Qt 中使用 QLabel 设置 GIF 动态背景

在 Qt 中，如果希望在窗口中设置一个 GIF 动画作为背景，同时保留其他控件的正常显示，需要一些技巧来确保 GIF 动画铺满整个窗口并位于所有控件的底层。下面将介绍如何使用 QLabel 和 QMovie 在 Qt 中实现这一效果。

本文食用注意

本文大部分只需粘贴复制，需改动的只有一处，即要展示GIF动图的文件地址。

目标

• 在窗口中设置一个全屏的 GIF 动画作为背景。
• 保证 GIF 背景不遮盖其他控件。
• 动态调整 GIF 背景，使其随窗口大小变化。

实现步骤

1. 准备工作

• 确保你在 Qt 工程中已经有一个用于设计 UI 的 widget.ui 文件，并且包含一个主要的窗口类，例如 Widget。
• 在项目的资源文件（.qrc）中添加要使用的 GIF 文件。

2. 修改头文件 widget.h

首先，在 widget.h 中声明必要的成员变量，包括用于显示背景的 QLabel 和用于加载 GIF 动画的 QMovie。

#ifndef WIDGET_H
#define WIDGET_H

#include <QWidget>
#include <QLabel>
#include <QMovie>

namespace Ui {
class Widget;
}

class Widget : public QWidget
{
    Q_OBJECT

public:
    explicit Widget(QWidget *parent = nullptr);
    ~Widget();

protected:
    void resizeEvent(QResizeEvent *event) override;

private:
    Ui::Widget *ui;
    QLabel *backgroundLabel; // 用于显示背景 GIF 的 QLabel
    QMovie *backgroundMovie; // 用于背景的 QMovie
    QMovie *iconMovie;       // 用于其他动画的 QMovie
};

#endif // WIDGET_H

3. 实现构造函数和析构函数

在 widget.cpp 中，实现 Widget 构造函数和析构函数。确保每个 QLabel 都有独立的 QMovie 实例。

#include "widget.h"
#include "ui_widget.h"
#include <QImageReader>

Widget::Widget(QWidget *parent) :
    QWidget(parent),
    ui(new Ui::Widget)
{
    ui->setupUi(this);

    // 创建 QLabel 并将其设置为 Widget 的子控件
    backgroundLabel = new QLabel(this);
    backgroundLabel->setGeometry(0, 0, this->width(), this->height()); // 初始大小
    backgroundLabel->setScaledContents(true); // 让 QLabel 自动缩放内容

    // 加载用于背景的 GIF 文件
    backgroundMovie = new QMovie(":/bag");//这里替换为你的GIF文件地址即可

    // 将 QMovie 关联到 QLabel
    backgroundLabel->setMovie(backgroundMovie);

    // 设置 QLabel 为透明背景
    backgroundLabel->setAttribute(Qt::WA_TranslucentBackground, true);

    // 设置 QLabel 在布局的最底层
    backgroundLabel->lower();

    // 开始播放背景 GIF 动画
    backgroundMovie->start();

    // 调整背景大小，使其始终填满窗口
    connect(backgroundMovie, &QMovie::frameChanged, this, [=]() {
        // 计算缩放后的尺寸
        QPixmap scaledPixmap = backgroundMovie->currentPixmap().scaled(this->size(), Qt::KeepAspectRatioByExpanding, Qt::SmoothTransformation);
        backgroundLabel->setPixmap(scaledPixmap);
    });

    // 创建用于 ui->lab_icon 的 QMovie 并加载 GIF 动图
    iconMovie = new QMovie(":/imgs/a.gif");

    // 设置 QLabel 的 QMovie
    ui->lab_icon->setMovie(iconMovie);
    
    // 启动动画
    iconMovie->start();

    connect(iconMovie, &QMovie::frameChanged, this, [=]() {
        // 获取当前帧并缩放
        QImage currentImage = iconMovie->currentImage(); // 获取当前帧
        QPixmap pixmap = QPixmap::fromImage(currentImage.scaled(ui->lab_icon->size(), Qt::KeepAspectRatio, Qt::SmoothTransformation));
        ui->lab_icon->setPixmap(pixmap); // 设置 QLabel 的 pixmap
    });

    iconMovie->stop();

    // 其他代码
    connect(ui->bth_back, &QPushButton::clicked, this, &Widget::back);
    connect(ui->bth_stare, &QPushButton::clicked, this, &Widget::stare);
}

Widget::~Widget()
{
    delete backgroundMovie;
    delete iconMovie;
    delete ui;
}

4. 调整背景大小

为了确保 GIF 背景在窗口大小变化时能动态调整，我们重载 resizeEvent。

void Widget::resizeEvent(QResizeEvent *event)
{
    QWidget::resizeEvent(event);
    // 调整 QLabel 大小
    backgroundLabel->resize(this->size());
}

5. 完整代码分析

• 创建 QLabel 作为背景：backgroundLabel 被创建为窗口的子控件，并设置为全屏。
• 加载并关联 QMovie：QMovie 被加载并设置为 backgroundLabel 的内容，使用 setMovie 进行关联。
• 调整大小：resizeEvent 函数确保了 QLabel 和背景动画在窗口调整大小时保持同步。
• 独立的 QMovie 实例：为了避免动画冲突，backgroundLabel 和其他动画控件如 ui->lab_icon 分别使用独立的 QMovie 实例。

6. 运行程序

在 main.cpp 中无需修改，只需实例化 Widget 并显示：

#include "widget.h"
#include <QApplication>

int main(int argc, char *argv[])
{
    QApplication a(argc, argv);
    Widget w;
    w.show();

    return a.exec();
}

总结

通过在 Widget 中创建一个全屏的 QLabel 并将 QMovie 关联到它，可以实现一个动态的 GIF 背景。QLabel 被设置在布局的最底层，并通过重载 resizeEvent 保持动画在窗口大小变化时的同步。这样，你就可以在 Qt 应用程序中添加一个动态背景，同时不影响其他控件的显示和操作。