一、前言
1、 Qt样式表是一个可以自定义部件外观的十分强大的机制,除了那些能够通过子类化QStyle更改的外观,其余的都可以使用Qt样式表来美化。
2、 Qt样式表概念、术语、语法与html的层叠样式表(Cascading Style Sheets,CSS)基本相同。
3、 注意,以下"子部件"是指落在父部件上的子部件,"子类"是指继承父类的子类。
二、Qt样式表介绍
1、 使用代码设置样式表:
1.1、调用函数:
(1)、调用QApplication::setStyleSheet()函数,将样式表设置到整个应用程序上。
(2)、调用QWidget::setStyleSheet()函数,将样式表设置到部件及其子部件上[子部件指位置在父部件上]。
1.2、代码分析:
(1)、为部件单独设置样式表:
//设置pushbutton的背景为黄色
ui.pushButton->setStyleSheet("background:yellow");
(2)、为父部件上的子部件设置相同样式表:
//对ui上的所有QPushButton类及其子类的部件都使用相同的样式表。
setStyleSheet("QPushButton { background: yellow }");
2、 在设计模式中设置样式表:
2.1、操作方式:
(1)、进入设计模式-->选中部件-->右击-->改变样式表-->编辑样式表对话框。
(2)、进入设计模式-->选中部件-->属性编辑器-->styleSheet-->...->编辑样式表对话框。
2.2、选择添加资源、添加渐变、添加颜色、添加字体,会自动在编辑框内添加代码。
3、 如果不同级别都设置了样式表,Qt会使用所有有效的样式表,这叫样式表的层叠。
4、 样式表比调色板强大。
5、 通过自定义样式表,很容易实现应用程序的换肤功能。
三、Qt样式表语法
1、 样式规则
1.1、样式表包含了一系列的样式规则。
1.2、每个样式规则由选择器(selector)和声明(declaration)组成。
1.3、选择器(selector)指定了受该规则影响的部件。
1.4、声明(declaration)指定了部件要设置的属性。
1.5、举例分析:
(1)、样式规则: QPushButton { color: red } 指定了QPushButton和它的子类[继承QPushButton]实例使用红色作为前景色。
(2)、选择器: QPushButton。
(3)、声明:{ color: red }。
(4)、属性: color。
(5)、值:red。
1.6、样式规则中,选择器区分大小写,声明不区分大小写。
2、 选择器(selector)
2.1、常用选择器类型:
选择器 示例 说明
通用选择器 * 匹配所有部件
类型选择器 QPushButton 匹配所有QPushButton和它子类的实例
多类型选择器 QPushButton, QLineEdit, QComboBox 匹配所有QPushButton、QLineEdit、QComboBox和它们子类的实例,使用相同声明
属性选择器 QPushButton[flat="false"] 匹配所有QPushButton和它子类且属性flat为false的实例[注意,"="不能写"==","false"可以写false]
类选择器 .QPushButton 匹配所有QPushButton实例,但不包含它的子类实例
ID选择器 QPushButton#okButton 匹配所有QPushButton和它子类中以okButton为对象名的实例
后代选择器 QDialog QPushButton 匹配所有QPushButton和它子类实例,但它们必须是QDialog的子孙部件[在QDialog上的部件]
类型和后代选择器 QDialog, QDialog * 匹配所有QDialog和它子类实例,还有QDialog的所有子孙部件[在QDialog上的部件]
孩子选择器 QDialog>QPushButton 匹配所有QPushButton和它子类实例,但它们必须是QDialog的直接子部件[直接在QDialog上的部件,不包含嵌套部件]
组成部件选择器 QComboBox::drop-down 匹配所有QComboBox和它子类实例的下拉按钮[QComboBox是复杂部件,由下拉按钮和其它部件组成]
伪状态选择器 见2.2 见2.2
2.2、伪状态:选择器包含伪状态,来限制规则在部件指定状态上应用。
QPushButton:hover { color: white } 当鼠标悬停在一个QPushButton和它子类实例上时,才应用规则,让字体变为白色。
QPushButton:!hover{ color: red } 当鼠标没有悬停在一个QPushButton和它子类实例上时,才应用规则,让字体变为红色。[逻辑非]
QPushButton:hover:checked { color : red} 当鼠标悬停在一个选中的QPushButton和它子类实例上时,才应用规则,让字体变为红色。[逻辑与]
QPushButton:hover,QPushButton:checked { color : red} 当鼠标悬停在一个QPushButton和它子类实例上,或者该实例被选中时,才应用规则,让字体变为红色。[逻辑或]
3、 声明(declaration)
3.1、样式规则的声明部分,用"{}"括起来。
3.2、"{}"里包含"属性:值"的列表,用";"隔开,例如: QLabel{ color: red ; background-color: yellow }。
3.3、设置QObject属性值,即属于实例的成员变量,可以用"qproperty-成员变量名称"设置其值,例如:
QPushButton { qproperty-text : Hello } 那么所有的QPushButton和它子类实例的text成员变量值都为Hello。[Hello也可以写"Hello"]
4、 层叠:
4.1、样式表可以设置在QApplication上、父部件上、子部件上。
部件有效的样式表,是通过合并部件、部件祖先、QApplication的样式表得到的。
5、 冲突解决:
5.1、当几个样式规则,对相同的属性指定了不同的值,就会产生冲突。
5.2、解决冲突原则:
(1)、特殊的选择器优先。例如:
QPushButton#okButton{ color: gray }
QPushButton{ color: red }
QPushButton#okButton更特殊,所以okButton的文本颜色为灰色。
(2)、有伪状态比没有伪状态优先。
(3)、如果选择器特殊性相同,则后面出现的比前面出现的优先。
(4)、部件自己的样式表优先于父部件、QApplication的样式表。
四、自定义部件外观与换肤
1、 盒子模型
1.1、Qt的每一个部件,都被看作拥有4个同心矩形的盒子,这4个矩形分别是内容(content)、填衬(padding)、边框(border)、边距(margin)。
1.2、
|--------------------------------|
| margin |
| |--------------------------| |
| | border | |
| | |----------------------| | |
| | | padding | | |
| | | |------------------| | | |
| | | | content | | | |
| | | |------------------| | | |
| | | | | |
| | |----------------------| | |
| | | |
| |--------------------------| |
| |
|--------------------------------|
1.3、边距、边框宽度、填衬默认值都是0,所以4个矩形默认重合。
1.4、background-image属性,可以为部件指定一个背景,默认在边框以内的区域进行绘制。[background-clip、background-repeat、background-origin可以控制背景图片]
1.5、border-image属性,也是为部件指定一个背景,区别在于:
background-image无法随着部件的大小自动缩放; border-image可以随着部件的大小自动缩放; 同时指定,border-image会绘制在background-image之上。
1.6、image属性可以在border-image上绘制一个图片。
2、 自定义部件外观
3、 实现换肤功能