盒子模型

使用样式表时，每个控件都可以视为拥有4个同心矩形的盒子，叫做盒子模型，它描述了控件基本属性的关系。

image.png

margin，border-width，padding属性默认是0，在这种情况下，四个矩形是完全重合的。

QSS基本语法

基本语法：

选择器{ 属性: 值; }

示例：

QPushButton{ background-color: red; }

QLabel,QLineEdit{
    background-color:#010203;
    border-width:3px;
}

QSS选择器

选择器

选择器	格式	说明
通配选择器	*	通配选择器，应用于所有控件
类型选择器	QPushButton	匹配当前类及其子类
类型选择器	.QPushButton	匹配当前类，不包含其子类
属性选择器	QPushButton[flat = “false”]	匹配flat属性为false的QPushButton
ID选择器	QPushButton#okButton	匹配objectName为okButton的QPushButton
后代选择器	QDialog QPushButton	所有QDialog容器中包含的QPushButton，不管是直接的还是间接的
子选择器	QDialog > QPushButton	所有QDialog容器下面的QPushButton，其中要求QPushButton的直接父容器是QDialog

子控件

使用::选择当前控件下的子控件
示例：将QSpinBox的上按钮设置背景为红色。

QSpinBox::up-arrow{
    background-color:red;
}

伪状态

使用:选择在某一状态下的控件

示例1：鼠标悬浮在按钮上时，将背景设为红色。

QPushButton:hover{
    background-color:red;
}

示例2：QSpinBox的上箭头在被按下时，将背景设为红色

QSpinBox::up-arrow:pressed{
    background-color:red;
}

应用

样式表设置

1.为单个控件设置样式：

ui.pushButton->setStyleSheet(styleSheetString);

2.为整个应用设置样式：

qApp->setStyleSheet(styleSheetString);

库

最完整的深色/浅色Qt主题

官方文档

Customizing Qt Widgets Using Style Sheets

Qt Style Sheets Reference

Qt Style Sheets Examples