码迷,mamicode.com
首页 > 其他好文 > 详细

QWidget使用qss样式的background-image属性

时间:2015-01-13 17:32:03      阅读:265      评论:0      收藏:0      [点我收藏+]

标签:

    最近在学习Qt使用QSS样式美化窗口部件的内容。发现在对QWidget应用background-image改变窗口背景图片时,QWidget的窗口背景并未生效。工程建立如下:
    1、新建 Qt Application 工程

            

技术分享

    2、窗口选择从 QWidget 继承

            

技术分享

    3、最后生成的工程目录

            

技术分享

    4、工程源文件如下

        main.cpp

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、加入做为背景的图片资源

        

技术分享

    6、修改 继承的QWidget子类

        qwdg_backImage.cpp

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、编译运行

        

技术分享

咦,这时发现继承自QWidget的qwdg_backImage子类背景并未改变为构造函数里的图片背景。

解决办法如下:

1、修改 qwdg_backImage.h头文件,添加入 paintEvent 事件。

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 事件。

QWidget使用qss样式的background-image属性

标签:

原文地址:http://www.cnblogs.com/RecreateBySelf/p/4221754.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!