QT 如何在QPushButton上加载gif动图

Love The Way You Lie 2022-09-09 13:49 407阅读 0赞

有些场景，是需要在按钮上播放gif的，比如：点击登录后，登录中的状态需要展示给用户，此时就可以在登录按钮上播放gif和文字，显示登录中的状态。

在QT中，比较常见且简单的做法就是：给按钮设置一个layout，然后再在这个layout里面添加QLabel（作为设置QMovie使用），以及用于显示文字的QLabel。

### 参考代码如下： ###

#include "QtGifPushButtonTest.h"
    #include <QVBoxLayout>
    #include <QHBoxLayout>
    #include <QLabel>
    #include <QPushButton>
    #include <QMessageBox>
    #include "QPushButtonGif.h"
    
    
    QtGifPushButtonTest::QtGifPushButtonTest(QWidget *parent)
        : QDialog(parent)
    { 
    	setWindowFlags(Qt::CustomizeWindowHint | Qt::WindowCloseButtonHint);
    	setFixedSize(QSize(480, 320));
    
    	QVBoxLayout * vLayout = new QVBoxLayout();
    	vLayout->addStretch(1);
    
    	QPushButton * buttonLogin = new QPushButton("", this);
    	buttonLogin->setObjectName("buttonLogin");
    	buttonLogin->setMinimumHeight(30);
    
    	//button's layout
    	QHBoxLayout* layoutButton = new QHBoxLayout(buttonLogin);
    	layoutButton->addStretch(1);
    
    	QLabel* label = new QLabel();
    	label->setAlignment(Qt::AlignCenter);
    	QMovie* movie = new QMovie(":/res/loading");
    	movie->setObjectName("movieLoading");
    	movie->setScaledSize(QSize(16, 16));
    	label->setMovie(movie);
    	layoutButton->addWidget(label);
    	movie->start();
    
    	QLabel* labelText = new QLabel("Loading...");
    	labelText->setObjectName("labelButtonText");
    	labelText->setAlignment(Qt::AlignLeft);
    	layoutButton->addWidget(labelText);
    	layoutButton->addStretch(1);
    
    	vLayout->addWidget(buttonLogin);
    	vLayout->addStretch(1);
    	setLayout(vLayout);
    
    	connect(buttonLogin, &QPushButton::clicked, this, []() { 
    		QMessageBox::warning(nullptr, "Title", "this is test");
    	});
    }

### 上述代码效果如下： ###

![在这里插入图片描述][ddd613a2934c4f9eae119ae2324add79.gif_pic_center]

### 其他方法 ###

可以自定义一个QGifPushButton，通过接收QMovie的frameChanged事件，绘制QMovie的currentPixmap到一张QPixmap，最后再通过setIcon(QPixmap)将图片贴到按钮上。

[ddd613a2934c4f9eae119ae2324add79.gif_pic_center]: /images/20220829/432f1a889ac8491bba5318827b1f84f4.png