QT QLabel加载图片等比全屏自适应屏幕大小显示

最近在工作项目中,遇到一个需求:

1.使用QLabel显示一张图片;

2.当点击这个QLabel时,需要全屏显示;但不能改变原来的尺寸;

3.当点击放大后的QLabel时,恢复原有大小.

于是乎,就有了本篇博客,介绍如何实现这样的功能.

一、演示效果

在一个水平布局中，添加两个Lable用于显示图片，两张图片的尺寸不一样；

当点击图片时，全屏显示当前图片，再次点击时，恢复；

二、编码过程

1.自定义类继承自QLabel

实现功能，是的Label拥有鼠标点击触发信号功能

labelclicked.h

#ifndef LABEL_CLICKED_H
#define LABEL_CLICKED_H

#include <QLabel>
#include <QMouseEvent>

class LabelClicked : public QLabel {
    Q_OBJECT
public:
    explicit LabelClicked(QWidget *parent = nullptr);
    ~LabelClicked() override;


    /**
     * @brief 将参数内容转换为QPixmap保存，后通过点击信号发射出去
     * @param byte  图片字节数据
     */
    void setImageByteData(QByteArray byte);
    /**
     * @brief 将参数内容转换为QPixmap保存，后通过点击信息发射出去
     * @param image 图片
     */
    void setImage(QImage image);

signals:
    /// 鼠标左键单击信号
    void SignalLabelClicked();
    /// 鼠标左键单击信号，参数是设置保存的图片
    void SignalLabelImageClicked(const QPixmap &pixmap);

protected:
    void mousePressEvent(QMouseEvent *event) override;
    void mouseReleaseEvent(QMouseEvent *event) override;

private:
    QPixmap m_pixmap;       /// 保存图片，图片被点击时通过信号发送出去
};

#endif // LABEL_CLICKED_H

labelclicked.cpp

#include "labelclicked.h"

#include <QToolTip>
#include <QPainter>


LabelClicked::LabelClicked(QWidget *parent) : QLabel(parent)
{

}

LabelClicked::~LabelClicked()
{

}

void LabelClicked::setImageByteData(QByteArray byte)
{
    QImage image;
    if (image.loadFromData(byte)) {
        this->m_pixmap = QPixmap::fromImage(image);
    } else {
        this->m_pixmap = QPixmap();
    }
}

void LabelClicked::setImage(QImage image)
{
    this->m_pixmap = QPixmap::fromImage(image);
    update();
}

void LabelClicked::mousePressEvent(QMouseEvent *event)
{
    if (Qt::LeftButton == event->button()) {
        // 发射点击信号
        emit SignalLabelImageClicked(this->m_pixmap);
    }

    QLabel::mousePressEvent(event);
}

void LabelClicked::mouseReleaseEvent(QMouseEvent *event)
{
    if (Qt::LeftButton == event->button()) {
        emit SignalLabelClicked();
    }

    QLabel::mouseReleaseEvent(event);
}

2.布局

在主页面中，拖一个水平布局出来，方便添加Lable部件展示图片

3.编码

1) 定义两个Label，并添加到布局中

使用自定义的 LabelClicked 创建

LabelClicked *pLabelImage1 = new LabelClicked(this);
LabelClicked *pLabelImage2 = new LabelClicked(this);
ui->horizontalLayout->addWidget(pLabelImage1);
ui->horizontalLayout->addWidget(pLabelImage2);

2) 给每一个 Lable 设置大小和图片，并绑定信号和槽函数

pLabelImage1->setFixedSize(130, 70);
QImage image1("111.png", "png");
pLabelImage1->setPixmap(QPixmap::fromImage(image1).scaled(pLabelImage1->width(), pLabelImage1->height()));
pLabelImage1->setScaledContents(true);
// 自定义方法，保存一下iamge，当点击信号触发时，将该图片发射出去
pLabelImage1->setImage(image1);
connect(pLabelImage1, &LabelClicked::SignalLabelImageClicked, this, &Widget::onHandleWatchImage);


pLabelImage2->setFixedSize(130, 70);
QImage image2("222.png", "png");
pLabelImage2->setPixmap(QPixmap::fromImage(image2).scaled(pLabelImage2->width(), pLabelImage2->height()));
pLabelImage2->setScaledContents(true);
// 自定义方法，保存一下iamge，当点击信号触发时，将该图片发射出去
pLabelImage2->setImage(image2);
connect(pLabelImage2, &LabelClicked::SignalLabelImageClicked, this, &Widget::onHandleWatchImage);

到这一步，编译运行，效果如下：

图片已经成功加载到布局中，并且显示出来；

3) 处理点击全屏显示

定义槽函数

void Widget::onHandleWatchImage(const QPixmap &pixmap) { }

实现如下代码：

通过QDialog进行全屏显示

void Widget::onHandleWatchImage(const QPixmap &pixmap)
{
    QDialog dialog;
    LabelClicked maxLabel(&dialog);
    maxLabel.setImage(pixmap.toImage());
    connect(&maxLabel, &LabelClicked::SignalLabelClicked, [&] {
        dialog.close();
    });


    // 获取屏幕分辨率
    QScreen *screen = QGuiApplication::primaryScreen();
    QRect screenGeometry = screen->geometry();
    int screenWidth = screenGeometry.width();
    int screenHeight = screenGeometry.height();

    // 获取图片原始尺寸
    int imageWidth = pixmap.width();
    int imageHeight = pixmap.height();

    // 计算等比缩放的尺寸
    qreal scaleFactor = qMin(static_cast<qreal>(screenWidth) / imageWidth,
                             static_cast<qreal>(screenHeight) / imageHeight);
    int scaledWidth = static_cast<int>(imageWidth * scaleFactor);
    int scaledHeight = static_cast<int>(imageHeight * scaleFactor);

    // 创建缩放后的QPixmap对象
    QPixmap scaledPixmap = pixmap.scaled(scaledWidth, scaledHeight, Qt::KeepAspectRatio, Qt::SmoothTransformation);

    // 设置图片大小
    maxLabel.setScaledContents(true);
    maxLabel.setPixmap(scaledPixmap);
    maxLabel.setSizePolicy(QSizePolicy::Ignored, QSizePolicy::Ignored); // 让label根据内容调整大小
    maxLabel.adjustSize(); // 根据内容调整label的大小

    // 居中
    int w = (screenWidth - scaledWidth) / 2;
    int h = (screenHeight - scaledHeight) / 2;
    maxLabel.move(w, h);

    // 最大化和无边框
    dialog.setWindowFlag(Qt::FramelessWindowHint);
    dialog.setWindowFlag(Qt::WindowStaysOnTopHint);
    dialog.setWindowState(dialog.windowState() | Qt::WindowFullScreen);

    dialog.exec();
}

到此，已经处理完毕，编译运行即可！