Qt控件背景圖片設置總結

自己開發了一個股票智能分析軟件，功能很強大，需要的點擊下面的鏈接獲取：

https://www.cnblogs.com/bclshuai/p/11380657.html

掃碼關注公眾號

1.Qss 的setStyleSheet設置背景圖片

1.1background-image設置平鋪或者居中

　　這種方法設置的要點是要將圖片添加到qrc文件中，形成資源路徑，然后在QT界面編輯或者程序代碼中通過設置路徑來實現背景圖片設置。圖片大小不能自適應控件大小。只能可以實現平鋪或者居中顯示。background-position:center;設置顯示位置，background-repeat:no-repeat;設置是否平鋪；

 

 

（1）平鋪重復顯示

QWidget#widgetWinPic

{

 　　background-image:url(:/FaceMatch/Resources/pic/viewbackin.png);

　　background-repeat:repeat;

}

或者代碼中ui.widgetWinPic.setStyleSheet("QPushButton{ background-image: url(:/FaceMatch/Resources/pic/viewbackin.png);background-repeat:repeat;");

（2）居中不重復設置

 

 

QWidget#widgetWinPic

{

 　　background-image:url(:/FaceMatch/Resources/pic/viewbackin.png);

　　background-position:center;

　　background-repeat:no-repeat;

}

 或者代碼中 ui.widgetWinPic.setStyleSheet("QPushButton{ background-image: url(:/FaceMatch/Resources/pic/viewbackin.png);background-position:center;background-repeat:no-repeat;");

 

1.2 border-image設置按照控件大小縮放填充整個控件

圖片被拉伸填滿整個控件，可以實現縮放拉伸填充。會跟着控件的大小變化進行縮放，下圖左側是正常尺寸，右側是放大后的樣子

 

 

 

QWidget#widgetViewVedio
{
    background-color:rgba(0,48,77,0.7);
    border-image:url(:/FaceMatch/Resources/pic/viewbackin.png);
}

或者直接在代碼中設置

ui.widgetViewVedio->setStyleSheet(QLatin1String("QWidget#widgetViewVedio\n"
"{\n"
"    background-color:rgba(0,48,77,0.7);\n"
"    border-image:url(:/FaceMatch/Resources/pic/viewbackin.png);\n"
"}\n"
""));

 

 

2.使用QPixmap load圖片，然后setPixmap到控件上。可以實現圖片的填充，縮放，保持寬高比縮放。可以加載目標路徑下的圖片作為背景圖。缺點是不圖片的大小不能隨着Qlabel的大小變化。如果要能夠根據Qlabel大小自動變化，需要設置ui.labelPic->setScaledContents(true);這樣只能是縮放填充的形式，不能保持圖片的寬高比。也可以重寫resize函數，按照QLabel的大小，動態調整Pixmap的大小，可以實現大小自動調整。但是如果是在自動布局中，窗口放大，再縮小，因為pixmap圖片尺寸由大變小，窗口被大圖片撐大，大小無法及時調整，自動布局中會出現布局亂的情況。

enum AspectRatioMode {
IgnoreAspectRatio,//完全填充，圖片會被拉伸到整個size
KeepAspectRatio,//按圖片比例縮放，保持寬高比，按QLabel的高度或者寬度填滿圖片，如果要聚眾可以調用setAlignment(Qt::AlignCenter);實現居中顯示
KeepAspectRatioByExpanding//    保持圖片的寬高比，同時要放大圖片填充到整個窗口。
};

 

 

 

 

QPixmap pix(picData.strPicPath);
pix = pix.scaled(ui.labelPic->size(), Qt::KeepAspectRatio, Qt::SmoothTransformation);
ui.labelPic->setPixmap(pix);

 

 3.繼承QLabel類，重寫paintEvent函數，用QPaintEvent去繪制圖片。這種方法是最靈活的，可以按照自己想要的任何方式描繪背景。可以實現“居中”、“平鋪”、“縮放”、“拉伸”。缺點是要計算繪制的尺寸和位置，要實現寬高比縮放，還需要通過判斷圖片的寬高和QLabel的寬高來計算。下面的方法實現的是保持圖片的寬高比，最大化居中顯示圖片，而且可以隨着QLabel的大小動態更新圖片的大小。只要設置一個圖片的路徑進去，就可以。實現的效果是保持寬高比，大小隨着QLabel大小自動變化。

 

 

 

 

 

 

 

 

頭文件

#ifndef ASPECTRATIOPIXMAPLABEL_H
#define ASPECTRATIOPIXMAPLABEL_H

#include <QLabel>
#include<QPaintEvent>
class AspectRatioPixmapLabel : public QLabel
{
    Q_OBJECT
public:
    AspectRatioPixmapLabel(QWidget *parent = 0);void setPath(QString strPath)//設置圖片路徑
    {
        m_strPath = strPath;
        pix = QPixmap(m_strPath);//創建Pixmap對象
        update();//這里需要刷新下，觸發重繪，paintEvent會去畫圖片，否則不觸發重繪，不會花圖片，QLabel大小變化時，也會觸發重繪，自動去按Qlabel尺寸重繪圖片

    }
    void setScalPixmap(const QPixmap p);//設置變化的
protected:
    void paintEvent(QPaintEvent *) Q_DECL_OVERRIDE;//重寫重繪函數
    

    
    
private:
    QPixmap pix;//保存圖片Pixmap
    QString m_strPath = "";//保存圖片路徑
};


#endif // ASPECTRATIOPIXMAPLABEL_H

源文件

#include "aspectratiopixmaplabel.h"
#include<QPainter>
AspectRatioPixmapLabel::AspectRatioPixmapLabel(QWidget *parent) :
    QLabel(parent)
{
    //this->setMinimumSize(1, 1);
    setStyleSheet("font-family: MicrosoftYaHeiUI;font-size: 14px;color:#028EC0;letter-spacing: 0;line-height: 20px;");
    setScaledContents(false);
    show();
}void AspectRatioPixmapLabel::paintEvent(QPaintEvent *env)
{
    
    //讓圖片按照Qlabel的大小進行縮放，保持寬高比。
    if (!pix.isNull())
    {
        QPainter painter(this);
        QSize labelsize = this->size();
        pix = pix.scaled(this->size(), Qt::KeepAspectRatio, Qt::SmoothTransformation);
        QSize pixsize = pix.size();
        //根據圖片的寬高和QLabel的寬高計算繪圖的矩形區域和坐標
        QRect rectPic(0, 0, pix.size().width(), pix.size().height());

        if (pix.width() < this->width())
        {
            rectPic.setX((this->width() - pix.width()) / 2);
            rectPic.setY(0);
            rectPic.setWidth(pix.size().width());
            rectPic.setHeight(pix.size().height());
        }
        if (pix.height() < this->height())
        {
            rectPic.setX(0);
            rectPic.setY((this->height() - pix.height()) / 2);
            rectPic.setWidth(pix.size().width());
            rectPic.setHeight(pix.size().height());
        }
        QSize pimageszie = pix.toImage().size();
        painter.drawImage(rectPic, pix.toImage());
    }
}

 

 主程序中new一個對象，然后插入到一個widget的布局中，QLabel大小隨着widget自動縮放，里面的圖片也會自動調整大小。

 

 主程序代碼實例：

m_pAspectLabelPicShow = new AspectRatioPixmapLabel(ui.widgetWinPic);
    ui.verticalLayout_5->addWidget(m_pAspectLabelPicShow);

 4.小結

方法	優點	缺點
Setstylesheet	Background-image可以實現平鋪、居中，無法實現拉伸，縮放，自動調整。border-image可以實現填充、拉伸、自動調整大小。	需要將圖片添加到資源qrc中，無法實現pixmap的加載。無法實現保持圖片的寬高比。
SetPixMap	可以實現居中、填充、保持寬高比、自動調整大小。	自動布局中縮放會引起窗體尺寸變化，不能恢復到原尺寸。
paintEvent	可以實現居中、平鋪、填充、縮放、保持寬高比、自動調整大小等。	需要計算位置和繪圖區域，計算比較復查。