Qt 的 Qss使用

Qt 的 Qss 是一种用于定义用户界面的样式表语言。它可以用来定义控件的颜色、字体、边框、背景等样式，可以很方便的实现自定义的样式效果。

Qss 的基本语法和 CSS 类似，主要是由选择器和样式属性构成。

选择器
选择器用来指定要样式化的控件，选择器可以使用控件的名称、类型、ID、类、父子关系等来进行定位。常见的选择器有：

类型选择器： QPushButton
类选择器： .mybutton
ID 选择器： #mybutton
属性选择器： QWidget[enabled=“false”]
父子选择器： QListWidget > QListWidgetItem
样式属性
在 Qt 的 Qss 中，样式属性可以分为两类：控件属性和子控件属性，其中控件属性用于设置控件自身的样式，子控件属性用于设置控件的子控件的样式。

常用的控件属性和样式如下：

样式属性 描述
background 控件背景色
border 控件边框
color 控件文本颜色
font-size 控件字体大小
font-family 控件字体
padding 内边距
margin 外边距
text-align 控件文本对齐方式
text-indent 控件文本缩进
opacity 控件透明度
常用的子控件属性和样式如下：

样式属性 描述
QScrollBar:vertical 竖向滚动条
QScrollBar:horizontal 横向滚动条
QScrollBar::handle 滚动条滑块
QScrollBar::add-page 滚动条向后翻页按钮
QScrollBar::sub-page 滚动条向前翻页按钮
QScrollBar::add-line 滚动条向后滚动按钮（小箭头）
QScrollBar::sub-line 滚动条向前滚动按钮（小箭头）
QComboBox QAbstractItemView 下拉框的列表视图
QComboBox QAbstractItemView::item 下拉框的列表项
示例
下面是一个简单的 Qss 样式示例：

QPushButton {
background: #00bfff;
color: #fff;
border: 2px solid #fff;
font-size: 24px;
padding: 4px 8px;
margin: 4px;
}

QLineEdit {
background: #fff;
color: #000;
border: 2px solid #00bfff;
padding: 4px 8px;
margin: 4px;
}

QComboBox QAbstractItemView {
background: #fff;
color: #000;
border: 2px solid #00bfff;
padding: 4px 8px;
margin: 4px;
}

QComboBox QAbstractItemView::item {
background: #00bfff;
color: #fff;
font-size: 18px;
padding: 4px 8px;
margin: 4px;
}

QScrollBar:vertical {
background: #fff;
width: 16px;
margin: 4px;
}

QScrollBar::handle:vertical {
background: #00bfff;
border-radius: 8px;
margin: 2px;
}

QScrollBar::add-page:vertical, QScrollBar::sub-page:vertical {
background: none;
}

QScrollBar:horizontal {
background: #fff;
height: 16px;
margin: 4px;
}

QScrollBar::handle:horizontal {
background: #00bfff;
border-radius: 8px;
margin: 2px;
}

QScrollBar::add-page:horizontal, QScrollBar::sub-page:horizontal {
background: none;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
上面的样式将会应用到 QPushButton、QLineEdit、QComboBox、QScrollBar 等控件上，并且可以看到各个控件的样式都是不一样的。其中，QComboBox 还设置了下拉列表视图及列表项的样式。

除了上述基本语法外，Qt 的 Qss 还有一些高级特性。

伪状态和伪元素
Qss 支持控件的伪状态和伪元素，用来描述控件处于特定状态时的样式。常见的状态包括：hover（鼠标悬停时）、pressed（鼠标按下时）、checked（选中状态）、disabled（不可用状态）等。

样式示例：

QPushButton:hover {
background: #1e90ff;
}

QPushButton:checked {
color: #ff4500;
}
1
2
3
4
5
6
7
尺寸和单位
Qss 支持不同的尺寸和单位来定义样式，包括像素（px）、绝对长度（cm、mm、in、pt、pc）、相对长度（em、ex、rem）、百分比（%）等，用于实现不同尺寸的控件效果。

QPushButton {
width: 100px;
height: 30px;
}

QLabel {
font-size: 1.5em;
}

QTextEdit {
padding: 0.5rem;
}

QComboBox {
width: 50%;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
颜色和图像
Qss 支持使用颜色和图像来定义控件的背景，边框和文本颜色等样式。

颜色示例：

QWidget {
background-color: red;
}

QPushButton {
color: white;
background-color: rgb(0, 255, 0);
}

QLineEdit {
border: 1px solid #ccc;
}

QLabel {
color: black;
background-color: rgba(255, 255, 0, 0.5);
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
图像示例：

QPushButton {
border-image: url(button.png) 5 5 5 5 stretch;
}

QLabel {
background-image: url(background.png);
background-repeat: no-repeat;
background-position: center;
background-size: cover;
}

QTextEdit {
background-image: url(paper.jpg);
background-attachment: fixed;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
动画效果
Qss 还支持使用动画效果来实现控件的动态样式，通过 @keyframes 和 animation 实现。

样式示例：

QPushButton:hover {
animation: pulse 0.5s;
}

@keyframes pulse {
0% {background-color: #1e90ff;}
50% {background-color: #00bfff;}
100% {background-color: #1e90ff;}
}
1
2
3
4
5
6
7
8
9
总结
Qss 是一个强大的控件样式表语言，可以帮助我们实现各式各样的自定义控件效果。它可以设置控件属性、子控件属性、样式状态、颜色、图像、动画等。了解 Qss 语法和常用样式属性将能够让你更快速地实现丰富的 Qt 界面效果。
————————————————
版权声明：本文为CSDN博主「IT观察者」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/future_ai/article/details/130265058