139-#重磅-Qt样式表（StyleSheet）

不二如是

Qt中的样式表是一个可以自定义部件外观的强大机制！！！

Qt样式表其实原型就是受到HTML的层叠样式表（Cascading Style Sheets，CSS）的启发！

不过与CSS不同的是，Qt样式表应用于部件的天地，而不是网页~

使用


其实就两种，也只能两种



• 设计模式-样式表修改
  
• 代码模式-QApplication：：setStyleSheet（）函数设置
  




语法介绍


Qt的StyleSheet(以下简称：QSS)术语和语法规则与HTML CSS基本相同~

熟悉后面这两个的鱼油，基本上可以无缝上手~

不二从下面几个方面，给你好好剖析重温下



• 样式规则
  
  样式表包含了很多规则，一个样式表必须要由以下两部分构成：
  
  

  选择符（selector） + 声明（declaration）

  
  
  选择符指定了受该规则影响的部件，指定了这个部件上要设置的属性：
  
  
  1. QPushButton{color：Cyan}

  复制代码
  
  
  在这个规则中，QPushButton是选择符，{color：Cyan}是声明，color是属性，Cyan是值。
  
  这个规矩指定了QPushButton和他的子类应该使用cyan作为前景色。
  
  多个选择符实现相同功能，可以用逗号隔开，如:
  
  
  1. QLabel、QPushButton、QComoBox{color：cyan}

  复制代码
  
  
  一个样式表规则的声明部分是一些属性：值对组成的列表，包含在大括号（{ }）中，用分号（；）隔开。
  
  
  1. QPushButton{color:cyan ; background-color:green}

  复制代码
  
  
  
  
  
  
  有兴趣的可以去Qt Style Sheets Reference->List of Properties
  
  看支持的所有属性，就是上面的gif~
  
  
  
• 选择符类型
  
  QSS支持在CSS2中定义的所有选择符。
  
  下面这张表里的内容是网友们总结的，很经典！
  
  

  选择符	示例	说明
  通用选择符	*	匹配所有部件
  类型选择符	QPushButton	匹配所有QPushButton实例和它的所有子类
  属性选择符	QPushButton[flat = "false"]	匹配QPushButton的属性flat为false实例
  类选择符	.QPushButton	匹配所有QPushButton实例但不包含它的子类
  ID选择符	QPushButton#okButton	匹配所有QPushButton中以okButton为对象名的实例
  后代选择符	QDialog QPushButton	匹配所有QPushButton实例，必须是QDialog的子孙部件
  孩子选择符	QDialog>QPushButton	匹配所有QPushButton实例，必须是QDialog的直接子部件

  
  
  
  
  
• 子控件
  
  一些复杂的部件修改QSS可能需要访问自己的子控件（Sub-Controls）
  
  例如，QComboBox的下拉按钮，QSpinBox的上下箭头等
  
  选择符可以包含子控件来对部件的特定子控件应用规则，如：
  
  
  1. 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）来限制规则在部件的指定的状态上应用。
  
  伪状态出现在选择符后，用冒号（:）隔离，如：
  
  
  1. QPushButton：hover{color:cyan}

  复制代码
  
  
  该句表明，当鼠标悬停（hover）停在一个QPushButton部件上时才应用规则。
  
  伪状态也可以使用感叹号（！）来表示否定哈，如：
  
  
  1. QPushButton：！hover{color：cyan}

  复制代码
  
  
  该句表明，当鼠标没有悬停在QPushButton上才应用规则。
  
  伪状态也可以多个连用，如：
  
  
  1. QCheckBox：hover：checked{color：cyan}

  复制代码
  
  
  该句表明，当鼠标悬停在一个被选中的QCheckBox部件上时才应用规则。
  
  如有需要，也可以使用逗号(,)来表示逻辑‘或’，如：
  
  
  1. QCheckBox：hover，QCheckBox：checked{color：cyan}

  复制代码
  
  
  该句表明，当鼠标悬停或者被选中的QCheckBox部件上时才应用规则。
  
  
  
  
  
  有兴趣的可以去Qt Style Sheets Reference->List of Pseudo-States
  
  列出所有可用的自控件，就是上面的png~
  
  
• 冲突解决
  
  当几个QSS规则对相同的属性指定了不同的值时就会发生冲突啦~
  
  
  1. QPushButton#okButton{color：cyan}
     
  2. 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文件来实现换肤功能~
  
  前面玩儿过几次了，很简单~
  
  
  
  

miss陈

个人愚见，应以示例源码作为教学基础。如果有的话。
感谢并支持不二如是先生。