Qt中的除了进来比较流行的使用qml进行界面的美化外,在早期,也就是4.x版本中,使用得比较多的的就是qss,就如qml是javascipt的变形体一样,qss是css的变形体,当然语法是和css基本一致,然后阅读了Qt的Assitant的帮助文档后,花了两天时间,大致了解了qss的语法,然后交流一下学习心得。(PS:不会CSS,然后大致去翻阅了CSS,Assitant
的 qss内容太少,所以需要进步了解css语法)
首先,迎面而来你的就是Box Model啦,先学习一下Box Model:
- Box Model
先学习Assitant给的图:
是不是不太明白:好吧,我也不太懂啥意思,再来第二张图:
- 首先对于外边距,边框,内边缘,在默认条件下是等于0的;
- 通常所说的background指的是padding那个矩形框以内的内容(这是我实验后得出的结论,不知对与否);
来一图看看是不是呢:
然后看看代码的具体情况:
QWidget#testWidget { border: 10px solid; border-color:black; padding:30px; background-color:red; } QWidget#widget { border:10px solid; border-color:black; padding:60px; background-color:red; }
- qss语法
1、什么是selector
选择器是可以唯一标识一类或者某一个对象的,在Qt中,可以是QWidget,也可以是它派生出来的之类,比如QPushButton。有了选择器,我们尽可以对这个类型的对象进行声明,也就是通俗意义上的美化。
那么对于选择器,有那几种定义方法呢:
说明:
1、对于*而言,是为了匹配所有的控件,所有的Widget的性质都统一通过这个一个选择器设置好了;
2、Type类选择器对所有的某一控件或者及其派生的子类空间都适用;
3、属性选择器是对已经制定某种属性值的类进行性质上的声明;
4、Class选择器,是仅仅只对某种父类控件适用,但对其子类空间不产生影响;
5、ID选择器是对某一类控件的具体实例来进行性质上的控制,通常这个标识是通过object name制定的;我觉得这个用的会比较多一点;
6、子类选择器,child selector,这个当然也是很管用的,是对某一类控件中的某一个元素进行控制,比如对于一个自定义的LineEdit,对于传统的QLineEdit,它是没有Label的,在qq的登陆界面中,可以看见在右边有一个小型的按钮,这个按钮是可以通过QLabel实现的,那么对于自定义的LineEdit,为了实现这个,使用LineEdit>QLabel设置附属于LineEdit的QLabel的属性了;
2、对复杂的widget的子控件的属性的控制
很多widget有很多子控件,比如QSpinBox有上下两个按钮控制加减的,还有QComBox有一个用于导出下拉菜单选出的,对于子控件的属性的控制,qss也进行了说明:
用::号来导出widget的子控件,比如QComBox::drop-down{image: url(dropdown.png)}
这样就可以对子控件进行属性控制了。
3、Pseudo-States 伪状态
什么是伪状态呢,当控件处于一般状态下,通俗的来说就是没有被选中,鼠标没有在控件上方游荡,没有被鼠标按压下,然后对于的就是鼠标在上方hover啦,被按压了,这些状态就叫伪状态。对于每一个状态,都一个对对其设置一些属性,使其呈现出不同的效果。怎么对应伪状态的属性呢,是通过:来实现的,当不处于某个状态时,可以用!:控制比如:
QPushButton:hover { color: white }
QPushButton:!hover { color:black}
一些常用的控件的伪状态有:
QPushButtoon:hover,pressed
QCheckBox:hover,checked,!hover:checked,hover:!checked
{PS:类似这种hover:!check是伪状态链,可以多个状态组合的}
截个图大家看看:
4、冲突的避免机制
当使用了Type选择器定义了某种属性,但是又用了ID选择器定义了同一类的同一个属性。这个时候,这个属性应该满足那种规则呢:
总的来说,就是所有条件先,满足更加具体的选择器定义的属性。
需要特别强调的是,这里的具体性,是针对选择器的具体性,比如class选择器>Type选择器,不是只得类的继承性,可能会觉得QPushButton比他的父类, QAbstractButton更加具体,因此当出现一下语句时候:
可能会觉得,应该是QPushButton应该是北京哪个应该是红色的,实质上,背景却是灰色的:因为在类型选择器中QPushButton和QAbstractButton是同一种类型,因此这个时候应该是语句执行的先后顺序的问题,因此后一句的声明生效。
大致会经常用到的语法就是这些了,具体的深层次需要更加深入的学习Qt 的 Assistanct中有关StyleSheet的内容以及CSS的内容