Qt 加载图片并展示loading效果

Qt封装网路图片加载显示类

一个基于Qt框架的C++类，用于在一个窗口中显示一张图片，并在加载图片时显示loading效果。以下是对代码的详细解释和注释：

#ifndef IMAGEWITHLOADINGWIDGET_H
#define IMAGEWITHLOADINGWIDGET_H

#include <QtWidgets>
#include <QNetworkAccessManager>
#include <QNetworkReply>
#include <QPixmap>
#include <QVBoxLayout>
#include <QMovie>
#include <QLabel>

class ImageWithLoadingWidget : public QWidget
{
    Q_OBJECT

public:
    ImageWithLoadingWidget(QWidget *parent = nullptr) : QWidget(parent)
    {
        // 创建布局和控件
        layout = new QVBoxLayout(this);
        label = new QLabel(this);
        loadingLabel = new QLabel(this);

        // 创建一个QMovie来显示loading效果（使用.gif文件）
        loadingMovie = new QMovie(":/res/loading.gif");
        loadingLabel->setMovie(loadingMovie);

        // 创建进度条
        progressBar = new QProgressBar(this);
        progressBar->setRange(0, 100);
        progressBar->setValue(0);

        // 将控件添加到布局中
        layout->addWidget(label);
        layout->addWidget(loadingLabel);
        layout->addWidget(progressBar);

        // 创建网络访问管理器
        manager = new QNetworkAccessManager(this);

        // 连接finished信号，当网络请求完成时调用onNetworkReply槽函数
        connect(manager, &QNetworkAccessManager::finished, this, &ImageWithLoadingWidget::onNetworkReply);
    }

    // 加载指定URL的图片
    void loadImageFromUrl(const QUrl &url)
    {
        // 启动loading效果
        loadingMovie->start();

        // 发起网络请求
        QNetworkRequest request(url);
        manager->get(request);
    }

private slots:
    // 网络请求完成的槽函数
    void onNetworkReply(QNetworkReply *reply)
    {
        if (reply->error() == QNetworkReply::NoError)
        {
            // 从网络响应中读取图片数据
            QByteArray data = reply->readAll();
            QPixmap pixmap;
            pixmap.loadFromData(data);

            if (!pixmap.isNull())
            {
                // 如果图片加载成功，显示图片并隐藏loading效果
                label->setPixmap(pixmap);
                progressBar->setValue(100);
                loadingLabel->hide();
            }
            else
            {
                // 如果图片加载失败，显示错误信息
                label->setText("Failed to load image");
            }
        }
        else
        {
            // 处理网络错误，显示错误信息
            label->setText("Network error: " + reply->errorString());
        }

        // 释放QNetworkReply对象
        reply->deleteLater();
    }

private:
    QVBoxLayout *layout;
    QLabel *label;
    QLabel *loadingLabel;
    QProgressBar *progressBar;
    QNetworkAccessManager *manager;
    QMovie *loadingMovie;
};

#endif // IMAGEWITHLOADINGWIDGET_H

这个类通过使用Qt的网络访问模块（QNetworkAccessManager）从指定的URL加载图片，并在加载过程中显示loading效果。同时，还使用了布局管理器（QVBoxLayout）来组织控件的布局，以及QProgressBar来显示加载进度。这个类的设计使得在GUI应用程序中轻松地实现带有loading效果的图片加载功能。

调用方式

#include "imagewithloadingwidget.h"
#include <QApplication>
#include <QLocale>
#include <QTranslator>
#include <QString>
#include <QObject>

int main(int argc, char *argv[])
{
    QApplication a(argc, argv);
    ImageWithLoadingWidget widget; widget.show();
    widget.loadImageFromUrl(QUrl("https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"));
    return a.exec();
}