最近在學習Qt使用QSS樣式美化窗口部件的內容。發現在對QWidget應用background-image改變窗口背景圖片時，QWidget的窗口背景並未生效。工程建立如下：
1、新建 Qt Application 工程
1
2
3
4
5
6
7
8
9
#include "qwdg_backimage.h"
#include <QtGui/QApplication>
int main(int argc, char *argv[])
{
QApplication a(argc, argv);
QWdg_backImage w;
w.show();
return a.exec();
}
qwdg_backImage.h
? 1 2 3 4 5 6 7 8 9 10 11 12 13 14
#ifndef QWDG_BACKIMAGE_H
#define QWDG_BACKIMAGE_H
#include <QtGui/QWidget>
#include "ui_qwdg_backimage.h"
class QWdg_backImage : public QWidget
{
Q_OBJECT public:
QWdg_backImage(QWidget *parent = 0, Qt::WFlags flags = 0);
~QWdg_backImage(); private:
Ui::QWdg_backImageClass ui;
}; #endif // QWDG_BACKIMAGE_H
qwdg_backImage.cpp
? 1 2 3 4 5 6 7 8 9 10#include "qwdg_backimage.h" QWdg_backImage::QWdg_backImage(QWidget *parent, Qt::WFlags flags)
: QWidget(parent, flags)
{
ui.setupUi(this);
}
QWdg_backImage::~QWdg_backImage()
{
}
5、加入做為背景的圖片資源
1
2
3
4
5
6
7
8
9
10
11
12
#include "qwdg_backimage.h" QWdg_backImage::QWdg_backImage(QWidget *parent, Qt::WFlags flags)
: QWidget(parent, flags)
{
ui.setupUi(this);
// 這裡是添加的背景圖片 // 背景圖片已事先添加入 qwdg_backimage.qrc 文件 setStyleSheet(tr("background-image: url(:/images/background.png)"));
}
QWdg_backImage::~QWdg_backImage()
{
}
7、編譯運行
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
#ifndef QWDG_BACKIMAGE_H
#define QWDG_BACKIMAGE_H
#include <QtGui/QWidget>
// 新添加的頭文件
#include <QPainter>
#include "ui_qwdg_backimage.h"
class QWdg_backImage : public QWidget
{
Q_OBJECT public:
QWdg_backImage(QWidget *parent = 0, Qt::WFlags flags = 0);
~QWdg_backImage();
// 此處加入 paintEvent 事件
protected:
void paintEvent(QPaintEvent *event); private:
Ui::QWdg_backImageClass ui;
}; #endif // QWDG_BACKIMAGE_H
2、修改qwdg_backImage.cpp源文件，實現 paintEvent 事件。
? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20#include "qwdg_backimage.h" QWdg_backImage::QWdg_backImage(QWidget *parent, Qt::WFlags flags)
: QWidget(parent, flags)
{
ui.setupUi(this);
// 這裡是添加的背景圖片 // 背景圖片已事先添加入 qwdg_backimage.qrc 文件 setStyleSheet(tr("background-image: url(:/images/background.png)"));
}
QWdg_backImage::~QWdg_backImage()
{
} // 此處實現 paintEvent 事件
void QWdg_backImage::paintEvent(QPaintEvent *event)
{
QStyleOption opt;
opt.init(this);
QPainter p(this);
style()->drawPrimitive(QStyle::PE_Widget, &opt, &p, this);
}
再次編譯運行：
總結：
1、QSS樣式的語法和CSS樣式的語法類似。
2、Qt的窗口部件可以直接應用QSS樣式做出界面美化的工作，應用QSS樣式有多種方法，其中一種就如本文件使用 setStyleSheet 函數
3、QWidget是可以直接用QSS樣式的background-image屬性的，但如果象本文生成的qwdg_backimage繼承自QWidget的子類，在應用background-image屬性時，必須實現重繪事件，即 paintEvent 事件。
