Qt 样式表

一、前言
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、 实现换肤功能

相关推荐
hikktn2 小时前
Java 兼容读取WPS和Office图片,结合EasyExcel读取单元格信息
java·开发语言·wps
小青柑-2 小时前
Go语言中的接收器(Receiver)详解
开发语言·后端·golang
豪宇刘3 小时前
JavaScript 延迟加载的方法
开发语言·javascript
17´3 小时前
使用QT+OpenCV+C++完成一个简单的图像处理工具
c++·图像处理·qt·opencv
Yungoal3 小时前
用QT实现 端口扫描工具1
qt
摇光934 小时前
js迭代器模式
开发语言·javascript·迭代器模式
美丽的欣情4 小时前
Qt实现海康OSD拖动Demo
开发语言·qt
C++小厨神4 小时前
Bash语言的计算机基础
开发语言·后端·golang
BinaryBardC4 小时前
Bash语言的软件工程
开发语言·后端·golang
飞yu流星5 小时前
C++ 函数 模板
开发语言·c++·算法