文档章节

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

R
 RecreateByOneself
发布于 2015/01/13 09:34
字数 546
阅读 484
收藏 0

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

            

    2、窗口选择从 QWidget 继承

            

    3、最后生成的工程目录

            

    4、工程源文件如下

        main.cpp

#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

#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

#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

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

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

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

© 著作权归作者所有

R
粉丝 0
博文 1
码字总数 546
作品 0
东城
私信 提问
setStyleSheet来设定窗口部件的样式

使用setStyleSheet来设置图形界面的外观: QT Style Sheets是一个很有利的工具,允许定制窗口的外观, 此外还可以用子类QStyle来完成,他的语法很大比重来源于html的CSS,但是适用于窗口 概括...

晨曦之光
2012/04/13
1K
0
QSS知识总结

QT样式表单 QT的样式表单允许我们在对程序不做任何代码上的更改的情况下轻松改变应用程序的外观。 其思想来源于网页设计中的CSS,即可以将功能设计和美学设计分开。 它的语法和概念和HTML CS...

tiankefeng0520
2014/05/27
0
0
Qt编写安防视频监控系统11-动态换肤

一、前言 Qt中的动态换肤技术是非常一流的,直接调用qApp->setStyleSheet(qss);就可以对整个应用程序进行换肤,如果样式表内容不多,或者对应的贴图不对,效率还是蛮好的,不过据说有些人写了...

飞扬青云
06/01
21
0
Qt stylesheet 源码学习

stylesheet 本文不准备谈样式表的使用。因为Manual中介绍的很清楚了,给的例子也都很不错。再就是我本身对CSS语法不太熟,术语把握不好,qss用的不多。 不过,有两个问题新手似乎特容易迷惑,...

晨曦之光
2012/05/08
859
1
Qt编写数据可视化大屏界面电子看板2-配色方案

一、前言 做完整个数据可视化大屏界面电子看板系统后,为了提升点逼格,需要提供好几套默认的风格样式以供选择,这样用户可以选择自己喜欢的配色方案来作为整个系统的颜色方案,去看了下市面...

飞扬青云
05/13
34
0

没有更多内容

加载失败,请刷新页面

加载更多

同名依赖,多次引入导致的程序错误

表现: 本地测试正常,打包上线后报错找不到某个方法(缺少依赖),检测依赖发现,同名依赖有两个版本。 解决:删除一个,程序正常

避难所
28分钟前
3
0
在HTML中的下拉框中实现超连接

<!DOCTYPE html><html lang="zh-CN"><head> <meta charset="UTF-8"> <link rel="canonical" href="https://blog.csdn.net/weixin_34228617/article/details/86130280"/> ......

mickelfeng
33分钟前
3
0
Content7关闭防火墙命令

在外部访问CentOS中部署应用时,需要关闭防火墙。 关闭防火墙命令:systemctl stop firewalld.service 开启防火墙:systemctl start firewalld.service 关闭开机自启动:systemctl disable f...

无名氏的程序员
34分钟前
3
0
分布式存储原理:TiDB

浮躁的码农
47分钟前
7
0
CSS实现圆角边框的完美解决方案

css实现图片圆角,兼容所有浏览器: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 <style type= "text/css" > /*通用样式--容器宽度值*/ .s......

前端老手
今天
5
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部