139-#重磅-Qt样式表（StyleSheet）
本帖最后由 不二如是 于 2016-11-2 15:07 编辑Qt中的样式表是一个可以自定义部件外观的强大机制！！！
Qt样式表其实原型就是受到HTML的层叠样式表（Cascading Style Sheets，CSS）的启发！
不过与CSS不同的是，Qt样式表应用于部件的天地，而不是网页~
[*]使用
其实就两种，也只能两种{:10_266:}
[*]设计模式-样式表修改
[*]代码模式-QApplication：：setStyleSheet（）函数设置
[*]语法介绍
Qt的StyleSheet(以下简称：QSS)术语和语法规则与HTML CSS基本相同~
熟悉后面这两个的鱼油，基本上可以无缝上手~
不二从下面几个方面，给你好好剖析重温下
[*]样式规则
样式表包含了很多规则，一个样式表必须要由以下两部分构成：
选择符（selector） + 声明（declaration）
选择符指定了受该规则影响的部件，指定了这个部件上要设置的属性：
QPushButton{color：Cyan}
在这个规则中，QPushButton是选择符，{color：Cyan}是声明，color是属性，Cyan是值。
这个规矩指定了QPushButton和他的子类应该使用cyan作为前景色。
多个选择符实现相同功能，可以用逗号隔开，如:
QLabel、QPushButton、QComoBox{color：cyan}
一个样式表规则的声明部分是一些属性：值对组成的列表，包含在大括号（{ }）中，用分号（；）隔开。
QPushButton{color:cyan ; background-color:green}
有兴趣的可以去Qt Style Sheets Reference->List of Properties
看支持的所有属性，就是上面的gif~
[*]选择符类型
QSS支持在CSS2中定义的所有选择符。
下面这张表里的内容是网友们总结的，很经典！
选择符 示例 说明
通用选择符 * 匹配所有部件
类型选择符 QPushButton 匹配所有QPushButton实例和它的所有子类
属性选择符 QPushButton 匹配QPushButton的属性flat为false实例
类选择符 .QPushButton 匹配所有QPushButton实例但不包含它的子类
ID选择符 QPushButton#okButton 匹配所有QPushButton中以okButton为对象名的实例
后代选择符 QDialog QPushButton 匹配所有QPushButton实例，必须是QDialog的子孙部件
孩子选择符 QDialog>QPushButton 匹配所有QPushButton实例，必须是QDialog的直接子部件
[*]子控件
一些复杂的部件修改QSS可能需要访问自己的子控件（Sub-Controls）
例如，QComboBox的下拉按钮，QSpinBox的上下箭头等
选择符可以包含子控件来对部件的特定子控件应用规则，如：
QComboBox：：drop-down{iamge：url（dropdown.png）}
这句话可以改变所有QComboBox部件的下拉按钮的样式。
有兴趣的可以去Qt Style Sheets Reference->List of Stylable Widgets
列出所有使用QSS来自定义样的Qt部件，就是上面的gif~
有兴趣的可以去Qt Style Sheets Reference->List of Sub-Controls
列出所有可用的子控件，就是上面的png~
[*]伪状态
选择符可以包含伪状态（Pseudo-States）来限制规则在部件的指定的状态上应用。
伪状态出现在选择符后，用冒号（:）隔离，如：
QPushButton：hover{color:cyan}
该句表明，当鼠标悬停（hover）停在一个QPushButton部件上时才应用规则。
伪状态也可以使用感叹号（！）来表示否定哈，如：
QPushButton：！hover{color：cyan}
该句表明，当鼠标没有悬停在QPushButton上才应用规则。
伪状态也可以多个连用，如：
QCheckBox：hover：checked{color：cyan}
该句表明，当鼠标悬停在一个被选中的QCheckBox部件上时才应用规则。
如有需要，也可以使用逗号(,)来表示逻辑‘或’，如：
QCheckBox：hover，QCheckBox：checked{color：cyan}
该句表明，当鼠标悬停或者被选中的QCheckBox部件上时才应用规则。
有兴趣的可以去Qt Style Sheets Reference->List of Pseudo-States
列出所有可用的自控件，就是上面的png~
[*]冲突解决
当几个QSS规则对相同的属性指定了不同的值时就会发生冲突啦~
QPushButton#okButton{color：cyan}
QPushButton{color：red}
这样okButton的color属性就有了两个不同的值->冲突！
解决这个冲突的原则：
特殊的选择符有限
因为QPushButton#okButton一般代表一个单一的对象，而不是全局那样所有类的实例。
所以，他比QPushButton更特殊~
那么就会优先使用第一个规则->okButton的文本颜色为cyan哈~
相似的，有伪状态比非伪状态优先。
如果两个选择符的特殊性相同，那么怎么办？
很简单，最后出现的比前面那个优先，就是哪个行数大听谁的。
[*]层叠
QSS可以设置在QApplication或者父部件或者子部件上。
部件有效的QSS通过部件祖先的QSS和QApplication上的QSS合并得到。
当发生冲突，部件自己的QSS优先于任何继承的QSS，听自己的~
同样，父部件的QSS优先于祖先的QSS~
[*]自定义部件外观
[*]盒子模型
当使用QSS，每一个部件都拥有盒子模型（The Box Model）就是4个同心矩形的盒子，给你放大下：
从内往外分别是：
CONTENT（内容）、PADDING（填衬）、BORDER（边框）、MARGIN（边距）
除了内容外，其他默认值都是0~
可以使用background-image属性为部件（之前用过很多次了）制定一个背景。
默认，background-image只有在边框以内（里三层）进行绘制。
可以通过background-clip属性进行更改~
background-repeat->控制背景图片的重复方式
background-origin ->控制背景图片的原点所在
任何一个background-image无法随着部件的大小自动缩放！
想要的话，必须使用border-image（）124，☜点我带你重温下那激情的一刻(^ω^) ~
border-image 优先级低于 background-image，两个同时出现，前者绘制后着之上~
[*]换肤
QSS可以存放在一个以.qss为后缀的文件中。
这样就可以在程序中调用不同的.qss文件来实现换肤功能~
前面玩儿过几次了，很简单~
个人愚见，应以示例源码作为教学基础。如果有的话。
感谢并支持不二如是先生。
页:
[1]