【QT】qss

基本语法

设置全局样式

问题

分离样式代码

方案1

方案2

选择器

概况

子控件选择器

伪类选择器

盒子模型

修改控件样式示例

按钮

属性小结

复选框

属性小结

输入框

属性小结

列表框

属性小结

渐变色

示例：

菜单栏

设置菜单栏的背景色和各个菜单之间的间距

设置菜单的背景颜色和内边距

设置选中菜单/点击菜单时背景颜色修改

设置菜单项之间的分割线样式

属性小结

登录界面设计

最终效果

设置背景

设置输入框样式

设置按钮样式

完整代码

基本语法

选择器{

属性名：属性值；

}

选择器：先选择某个/某一类控件，接下来进行的各种属性设置，都是针对选中的控件生效的

设置全局样式

界面上所有的样式都集中到一起来组织

在main.cpp中

int main(int argc, char *argv[])

{

    QApplication a(argc, argv);

    a.setStyleSheet("QPushButton {color:blue;}");

    Widget w;

    w.show();

    return a.exec();

}

问题

如果设置了全局样式，然后在某个控件里又设置了其他样式，会怎么样？

如果全局样式与局部样式不冲突的话，两者的样式效果会叠加起来，也就是层叠性。

如果设置了全局样式，在某个控件里设置的样式和全局样式冲突了，会怎么样？

如果全局样式与局部样式冲突的话，局部样式的优先级是更高的，覆盖了对应的全局样式。

分离样式代码

方案1

创建qrc文件，通过qrc管理样式文件
创建单独的qss文件，把这样的文件放到qrc中
编写c++代码，读取qss文件中的内容，并设置样式

代码如下：

#include "widget.h"

#include <QApplication>
#include <QFile>

QString loadQSS()
{
   QFile file(":/style.qss");
   file.open(QFile::ReadOnly);
   QString style = file.readAll();
   file.close();
   return style;
}
int main(int argc, char *argv[])
{
    QApplication a(argc, argv);

    a.setStyleSheet(loadQSS());
    Widget w;
    w.show();
    return a.exec();
}

方案2

在Qt Designer 中集成了这样的功能，允许我们把样式直接写到.ui文件中。

通过点击如下所示的“改变样式表”，在这里设置样式还能实时预览效果。

综上所述，由于设置样式的方式太灵活了，有很多地方都能设置，就导致当某个控件样式不符合预期的时候，排查起来就比较麻烦。在实际开发中，建议统一使用某一种方式来设置样式。

选择器

概况

qss的选择器支持以下几种：

选择器	示例	说明
全局选择器	*	选择所有的 widget.
类型选择器 (type selector)	QPushButton	选择所有的 QPushButton 和其子类的控件.
类选择器 (class selector)	.QPushButton	选择所有的 QPushButton 的控件. 不会选择子类.
ID 选择器	#pushButton_2	选择 objectName 为 pushButton_2 的控件.
后代选择器	QDialog QPushButton	选择 QDialog 的所有后代(⼦控件, 孙⼦控件等等) 中的 QPushButton.
⼦选择器	QDialog > QPushButton	选择 QDialog 的所有⼦控件中的QPushButton
并集选择器	QPushButton, QLineEdit, QComboBox	选择 QPushButton, QLineEdit, QComboBox 这三种控件. (即接下来的样式会针对这三种控件都⽣效)
属性选择器	QPushButton[flat="false"	选择所有 QPushButton 中, flat 属性为 false 的控件.

这里要区分类型选择器和类选择器，一个会包含其子类，一个不包含。
id选择器中的id为控件的ObjectName

当类型选择器和id选择器选中同一控件，并且设置的样式是冲突的，此时id选择器的优先级更高。

子控件选择器

有些控件内部包含了多个 "子控件" . ⽐如 QComboBox 的下拉后的⾯板, 比如 QSpinBox 的上下按钮等。

可以通过子控件选择器 :: , 针对上述子控件进⾏样式设置.

首先我们可以通过qt帮助文档，来查看有哪些子控件，和他们属于哪个控件

示例：修改下拉框的下拉按钮样式

#include "widget.h"

#include <QApplication>

int main(int argc, char *argv[])
{
    QApplication a(argc, argv);
    QString style = "QComboBox::down-arrow{image:url(:/down_row.png);}";
    a.setStyleSheet(style);
    Widget w;
    w.show();
    return a.exec();
}

效果如下：

伪类选择器

伪类选择器，选中的是控件的“状态”，“符合一定状态条件”的控件。

也就是说

当状态具备时，控件被选中，样式生效
当状态不具备时，控件不被选中，样式失效

使用：的方式定义伪类选择器

常用的伪类选择器

伪类选择器	说明
:hover	⿏标放到控件上
:pressed	⿏标左键按下时
:focus	获取输⼊焦点时
:enabled	元素处于可⽤状态时
:checked	被勾选时
:read-only	元素为只读状态时

这些状态可以使用 ! 来取反. 比如 :!hover 就是⿏标离开控件时, :!pressed 就是⿏标松开时,

等等。

更多的伪类选择器，可以查看qt助手

示例：鼠标悬停字体变红，点击变蓝

    QString style = "QPushButton:hover{color:red;}";
    style+="QPushButton:pressed{color:blue;}";
    a.setStyleSheet(style);

盒子模型

box model

⼀个遵守盒模型的控件, 由上述⼏个部分构成.

Content 矩形区域: 存放控件内容. ⽐如包含的⽂本/图标等.
Border 矩形区域: 控件的边框.
Padding 矩形区域: 内边距. 边框和内容之间的距离.
Margin 矩形区域: 外边距. 边框到控件 geometry 返回的矩形边界的距离

默认情况下, 外边距, 内边距, 边框宽度都是 0，这与css中的盒模型基本类似

属性	说明
margin	设置四个方向的外边距. 复合属性.
padding	设置四个方向的内边距. 复合属性.
border-style	设置边框样式
border-width	边框的粗细
border-color	边框的颜⾊
border	复合属性, 相当于 border-style + border-width + border-color

修改控件样式示例

按钮

这里区分color和background-color属性，color设置的是字体的属性，background-color设置的是背景颜色。

QPushButton{
	font-size:20px;
	boder:2px solid rgb(171, 165, 255);
	boder-radius:15px;
	background-color:rgb(237, 213, 255);
	color:white;
}
QPushButton:pressed{
	background-color:rgb(156, 110, 255);
}

属性小结

属性	说明
font-size	设置文字大小
border-radius	设置圆⻆矩形数值设置的越大, 角就 "越圆"
background-color	设置背景颜色

复选框

这里设置复选框未选中、未选中鼠标悬停、勾选时的图标

QCheckBox{
	font-size:20px;
}
QCheckBox::indicator{
	width:20px;
	height:20px;
}
QCheckBox::indicator:unchecked{
	image:url(:/checkbox_uncheck.png);
}
QCheckBox::indicator:unchecked:hover{
	image:url(:/checkbox.png);
}
QCheckBox::indicator:checked{
	image:url(:/checkbox_check.png)
}

属性小结

要点	说明
::indicator	⼦控件选择器. 选中 checkbox 中的对钩部分.
:hover	伪类选择器. 选中⿏标移动上去的状态.
:pressed	伪类选择器. 选中⿏标按下的状态.
:checked	伪类选择器. 选中 checkbox 被选中的状态.
:unchecked	伪类选择器. 选中 checkbox 未被选中的状态.
width	设置⼦控件宽度. 对于普通控件⽆效 (普通控件使⽤ geometry 方式设定尺⼨).
height	设置⼦控件⾼度. 对于普通控件⽆效 (普通控件使⽤ geometry 方式设定尺⼨)
image	设置⼦控件的图⽚. 像 QSpinBox, QComboBox 等可以使⽤这个属性来设置⼦控件的图⽚

单选框的设置与复选框类似，两者涉及属性基本上一样，这里就不再介绍。

输入框

QLineEdit{
	border-width:1px;
	border-radius:10px;
	border-color:rgb(148, 255, 252);
	border-style:inset;
	padding:0 8px;
	color:rgb(255, 255, 255);
	background:rgb(100, 100, 100);
	selection-background-color:rgb(255, 255, 0);
	selection-color:rgb(121, 121, 121);	
}

属性小结

属性	说明
border-width	设置边框宽度
border-radius	设置边框圆⻆
border-color	设置边框颜⾊
border-style	设置边框⻛格
padding	设置内边距
color	设置⽂字颜⾊
background	设置背景颜⾊
selection-background-color	设置选中⽂字的背景颜⾊
selection-color	设置选中⽂字的⽂本颜⾊

列表框

属性小结

属性	说明
::item	选中 QListView 中的具体条⽬
:hover	选中⿏标悬停的条⽬
:selected	选中某个被选中的条⽬
background	设置背景颜⾊
border	设置边框
qlineargradient	设置渐变⾊

渐变色

qlineargradient 设置渐变色（线性渐变）

此处要填写六个参数：

x1:起点的横坐标
y1:起点的纵坐标
x2:终点的横坐标
y2:终点的纵坐标

这里的取值非常有限，要么是0，要么是1

起点为（0，0）终点是（1，0）就是横向的渐变、
起点为（0，0）终点是（0，1）就是竖向的渐变、
起点为（0，0）终点是（1，1）就是对角线的渐变

如下图所示：

另外两个参数就是

stop:0 起始颜色
stop:1 结束颜色

示例：

QListWidget::item:hover{
	background:qlineargradient(x1:0,y1:0,x2:0,y2:1,
	stop:0 #FAFBFE,stop:1 #DCDEF1);
}
QListWidget::item:selected{
	boder:1px solid #6a6ea9;
	background:qlineargradient(x1:0,y1:0,x2:0,y2:1);
}

效果如下：

菜单栏

设置菜单栏的背景色和各个菜单之间的间距

QMenuBar{
	background-color:qlineargradient(x1:0,y1:0,x2:0,y2:1,
	stop:0 lightgray,stop:1 darkgray );
	spacing:3px;
}

设置菜单的背景颜色和内边距

QMenuBar::item{
	padding:1px 4px;
	background:transparent;
	border-radius:4px;
}

设置选中菜单/点击菜单时背景颜色修改

QMenuBar::item:selected{
	background:#a8a8a8;
}
QMenuBar::item:pressed{
	background:#888888;
}

设置菜单项之间的分割线样式

QMenu::separator{
	height:2px;
	background:lightblue;
	margin-left:10px;
	margin-right:5px;
}

完整代码：

QMenuBar{
	background-color:qlineargradient(x1:0,y1:0,x2:0,y2:1,
	stop:0 lightgray,stop:1 darkgray );
	spacing:3px;
}
QMenuBar::item{
	padding:1px 4px;
	background:transparent;
	border-radius:4px;
}
QMenuBar::item:selected{
	background:#a8a8a8;
}
QMenuBar::item:pressed{
	background:#888888;
}

QMenu{
	background-color:white;	
	margin:0 2px
}
QMenu::item{
	padding:2px 25px 2px 20px;
	border:3px solid transparent;
}
QMenu::item:selected{
	border-color:darkblue;
	background:rgba(100, 100, 100, 150)
}

QMenu::separator{
	height:2px;
	background:lightblue;
	margin-left:10px;
	margin-right:5px;
}

效果如下

属性小结

属性	说明
QMenuBar::item	选中菜单栏中的元素.
QMenuBar::item:selected	选中菜单来中的被选中的元素.
QMenuBar::item:pressed	选中菜单栏中的⿏标点击的元素
QMenu::item	选中菜单中的元素
QMenu::item:selected	选中菜单中的被选中的元素
QMenu::separator	选中菜单中的分割线.

登录界面设计

最终效果

设置背景

在qt中直接给QWidget顶层窗口设置背景图会失效，因此我们可以给上述控件外头套上一个和窗口一样大小的QFrame控件，用来设置背景图。

qt中设置背景图除了background-image之外，还有border-image属性，两者的区别：

background-image：设计的背景图片固定大小
border-image：设置的背景图片跟随控件的大小变化

QFrame{
	border-image:url(:/background.jpg)
}

使用QVBoxLayout来管理两个输入框和勾选框、按钮；再将这个QVBoxLayout放到一个QFrame中

设置输入框样式

QLineEdit{
	color:#8d98a1;
	background-color:#405361;
	padding:0 5px;
	font-size:20px;
	border-style:none;
	border-radius:10px;
}

设置按钮样式

QPushButton{
	font-size:20px;
	color:white;
	background-color:#555;
	border-style:outset;
	border-radius:10px;
}
QPushButton:pressed{
	color:black;
	background-color:#ce1db;
	border-style:inset;
}

完整代码

QFrame{
	border-image:url(:/background.jpg)
}

QLineEdit{
	color:#8d98a1;
	background-color:#405361;
	padding:0 5px;
	font-size:20px;
	border-style:none;
	border-radius:10px;
}

QCheckBox{
	color:white;
	background-color:transparent;
}
QPushButton{
	font-size:20px;
	color:white;
	background-color:#555;
	border-style:outset;
	border-radius:10px;
}
QPushButton:pressed{
	color:black;
	background-color:#ce1db;
	border-style:inset;
}