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

Qt控件样式之QSS

时间:2015-02-16 19:35:25      阅读:356      评论:0      收藏:0      [点我收藏+]

标签:

QSS常用于Qt的控件样式美化,合理地使用Qss可以完成在不改动代码的情况下改变Qt界面的样式。

官方提供的例子: http://qt-project.org/doc/qt-4.8/stylesheet-examples.html

这个是官方提供的例子,只有qt-4.8的,目前Qt最新版本是Qt5.4,但似乎在qss这块没有较大的更新,同时有关帮助手册可以在Qt Assistant中寻找。

技术分享

在这个Qt Style Sheets Reference中有QSS所支持的所有属性、状态,QSS是参照CSS2的,但并非所有的CSS2属性QSS都支持,具体支不支持就需要查一下帮助手册了。

QSS的语法和CSS的语法保持一致

selector {declaratin1; declaratin2; ...declaratinN; }

拿最简单的QPushButton来看

QPushButton {    // selector
    color: red;    //     border: none; //  / declaration 
}    

declaration部分就是一系列的properties: values

在使用属性:值的时候曾经碰到过一个小问题。

QLabel {
    background: url ("xxxx"); // 如果在url后面有空格,这句属性将不起效果
}

由于自己在写C/C++代码的时候有在函数名后加空格的习惯,导致了这个错误,需要注意一下。

上面直接使用QPushButton或是QLabel将会对所有的该类控件引起效果,有些时候我们并不希望这样,所以这个时候需要指定选择器来区分要操作的对象。

关于选择器的一些介绍可以看这篇博文,虽然也是转载的http://www.cnblogs.com/davesla/archive/2011/01/30/1947928.html

稍微总结一下常用的。

QSS 中最常用的当属ID选择器了,用#号区分

QLabel#thisIsLabel {
    color: red;
}

用了ID选择器以后,将只会有这个ID对应的控件会产生样式效果。拿这个ID怎么来的呢?一般通过setObjectName指定的,像对这个QLabel进行设置,就必须在代码中加上thisIsLabel->setObjectName ("thisIsLabel");

但通常从Designer中命名好的控件不用特意加上setObjectName是因为在系统生成的ui头文件中已经帮你做了这件事儿了,所以在用的时候千万不能QLabel#ui->thisIsLabel 这样,ui是命名控件,这样写是非法的。

属性选择器有些时候也会有妙用,比如当你的一个控件需要因为一个属性的改变而希望样式改变的时候,就需要用到属性选择器。

QLabel#thisIsLabel[enable=true] {
    color: red;
}

QLabel#thisIsLabel[enable=false] {
    color: blue;
}

[] 中括号内部的就是选择的属性,属性名和value都需要通过setProperty这个函数实现。

下面这个是Qt Assistant关于这个函数的介绍,这个函数除了指定属性为QSS服务以外还有很多其他的用法,这里暂不做讨论。

技术分享

我基本上就使用这两种选择器能完成大部分的设计了。

然后就是一些子控件选择器了,如 QAbstractItemView 的::item,  QScrollBar的::handle。

这些以::开头的都表示控件的子控件选择器,为什么说是子控件,因为一个控件可能是由多个子控件组成的,我们在改变样式的时候自然也希望改变其子控件的样式。

像:hover, :pressed, :checked这些都是伪指示器,活用这些可以实现控件的三态效果(普通,悬停,按下),但要注意的是并不是所有的控件都会有这些效果的,QLabel就没有,但如果想实现QLabel的三态效果也不是不可以,可以使用事件过滤器去捕获QLabel的enterEvent和leaveEvent实现hover,使用mousePressEvent实现pressed,只是QLabel本身是不支持的,具体哪些控件支持哪些功能,可以查阅Qt Style Sheets Reference

伪指示器也是支持!(否定符号)的

QPushButton#myBtn:!pressed {
    color: red;
}

这样就表示在鼠标没有按下的情况下字体颜色是红色的。

掌握QSS的基础知识 + 懂CSS2语法基本就能进行QSS样式设计了。

QSS在代码中可以通过setStyleSheet ();的方式将样式设置进去,但同时也可以通过加载样式文件的方式,我通常喜欢把所有的QSS放在xxx.qss文件中进行统一管理。

QApplication a (argc, argv);
File_operate file_opt;
QByteArray array = file_opt.read_file (FILE_STYLE_PATH);
array += file_opt.read_file (FILE_STYLE_ADD_PATH);
a.setStyleSheet (QLatin1String (array));

File_operate是我根据QFile封装的一层类,增加了一些日志和判断

这里我用到了两个路径,为了实现换肤的效果,第一个路径文件里面放置的QSS基础样式,而第二个路径文件里面放置的是要拓展改变的样式,这样我可以通过加载不同的文件来实现样式的快速切换。

一点点小小的总结,希望对Qt初学者有所帮助,不足之处望指出。

技术分享

Qt控件样式之QSS

标签:

原文地址:http://www.cnblogs.com/viroyiheng/p/4294454.html

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