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

相关推荐
用户805533698032 天前
不止三件套:QObject 属性系统全关键字与运行时反射!
c++·qt
xcyxiner2 天前
DicomViewer (vcpkg Windows和ubuntu编译)7
qt
Quz7 天前
QML Hello World 入门示例
qt
xcyxiner10 天前
DicomViewer (dcmtk读取dcm文件)5
qt
xcyxiner11 天前
DicomViewer (后台线程处理文件)4
qt
xcyxiner11 天前
DicomViewer (添加模型类)3
qt
xcyxiner12 天前
DicomViewer (目录调整) 2
qt
xcyxiner12 天前
dcmtk vtk vtk-dicom(gdcm) 编译(debug) v2
qt
LDR00614 天前
Type-C 快充全面升级!LDR6601 赋能个人护理便携电机,重塑剃须刀 / 理发器新体验
c语言·开发语言
雪碧聊技术14 天前
Tree.js是什么?一文讲透
开发语言·javascript·ecmascript