【QT开发教程】Qt界面美化：使用QSS打造专业外观

Qt提供了强大的QSS（Qt Style Sheets）功能，可以用来美化应用程序的界面。QSS类似于CSS，可以通过设置样式表来改变Qt控件的外观。本文将介绍如何使用QSS来打造专业的应用程序外观。

🧑 博主简介：现任阿里巴巴嵌入式技术专家，15年工作经验，深耕嵌入式+人工智能领域，精通嵌入式领域开发、技术管理、简历招聘面试。CSDN优质创作者，提供产品测评、学习辅导、简历面试辅导、毕设辅导、项目开发、C/C++/Java/Python/Linux/AI等方面的服务，如有需要请站内私信或者联系任意文章底部的的VX名片（ID：gylzbk）

💬 博主粉丝群介绍：① 群内初中生、高中生、本科生、研究生、博士生遍布，可互相学习，交流困惑。② 热榜top10的常客也在群里，也有数不清的万粉大佬，可以交流写作技巧，上榜经验，涨粉秘籍。③ 群内也有职场精英，大厂大佬，可交流技术、面试、找工作的经验。④ 进群免费赠送写作秘籍一份，助你由写作小白晋升为创作大佬。⑤ 进群赠送CSDN评论防封脚本，送真活跃粉丝，助你提升文章热度。有兴趣的加文末联系方式，备注自己的CSDN昵称，拉你进群，互相学习共同进步。

📖 本文是《QT开发教程》专栏的文章之一，期待您订阅本专栏。如果看完文章对您有任何的收获，希望能够点赞、收藏、关注支持一下博主。

【QT开发教程】Qt界面美化：使用QSS打造专业外观

• 1. 什么是QSS？
• 2. 基本的QSS语法
• 3. 应用QSS样式表
• 4. QSS样式示例
• 5. 高级QSS技巧

1. 什么是QSS？

QSS（Qt Style Sheets）是一种类似于CSS（Cascading Style Sheets）的样式表语言，用于定义Qt控件的外观。通过QSS，可以轻松地改变控件的颜色、字体、边框、背景等属性，从而实现界面的美化和个性化。

2. 基本的QSS语法

QSS的语法与CSS非常相似，以下是一些常见的语法规则：

• 选择器：用于选择要应用样式的控件。
• 属性：用于定义控件的样式属性。
• 值：用于设置属性的值。

示例：

QPushButton {
    background-color: #3498db; /* 背景颜色 */
    color: white; /* 文字颜色 */
    border: 1px solid #2980b9; /* 边框 */
    border-radius: 5px; /* 圆角 */
    padding: 5px 10px; /* 内边距 */
}
1
2
3
4
5
6
7

3. 应用QSS样式表

QSS样式表可以通过多种方式应用到Qt应用程序中，以下是几种常见的方法：

3.1 在代码中应用样式表
可以在代码中通过setStyleSheet()方法应用样式表：

QPushButton *button = new QPushButton("Click Me");
button->setStyleSheet("background-color: #3498db; color: white; border: 1px solid #2980b9; border-radius: 5px; padding: 5px 10px;");
1
2

3.2 从文件加载样式表
可以将样式表保存到文件中，并在程序启动时加载：

QFile file(":/styles/style.qss");
if (file.open(QFile::ReadOnly)) {
    QString styleSheet = QLatin1String(file.readAll());
    qApp->setStyleSheet(styleSheet);
}
1
2
3
4
5

3.3 在Qt Designer中设置样式表
可以在Qt Designer中直接设置控件的样式表：

1. 选择要设置样式的控件。
2. 在属性编辑器中找到styleSheet属性。
3. 输入QSS样式代码。

4. QSS样式示例

以下是一些常见控件的QSS样式示例：

4.1 QPushButton

QPushButton {
    background-color: #3498db;
    color: white;
    border: 1px solid #2980b9;
    border-radius: 5px;
    padding: 5px 10px;
}

QPushButton:hover {
    background-color: #2980b9;
}

QPushButton:pressed {
    background-color: #2471a3;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

4.2 QLineEdit

QLineEdit {
    border: 1px solid #bdc3c7;
    border-radius: 5px;
    padding: 5px;
}

QLineEdit:focus {
    border: 1px solid #3498db;
}
1
2
3
4
5
6
7
8
9

4.3 QComboBox

QComboBox {
    border: 1px solid #bdc3c7;
    border-radius: 5px;
    padding: 5px;
}

QComboBox::drop-down {
    border: none;
}

QComboBox::down-arrow {
    image: url(:/images/down-arrow.png);
}
1
2
3
4
5
6
7
8
9
10
11
12
13

4.4 QProgressBar

QProgressBar {
    border: 1px solid #bdc3c7;
    border-radius: 5px;
    text-align: center;
}

QProgressBar::chunk {
    background-color: #3498db;
    width: 20px;
}
1
2
3
4
5
6
7
8
9
10

4.5 QScrollBar

QScrollBar:vertical {
    border: 1px solid #bdc3c7;
    background: #ecf0f1;
    width: 15px;
    margin: 22px 0 22px 0;
    border-radius: 5px;
}

QScrollBar::handle:vertical {
    background: #3498db;
    min-height: 20px;
    border-radius: 5px;
}

QScrollBar::add-line:vertical {
    border: 1px solid #bdc3c7;
    background: #ecf0f1;
    height: 20px;
    subcontrol-position: bottom;
    subcontrol-origin: margin;
    border-radius: 5px;
}

QScrollBar::sub-line:vertical {
    border: 1px solid #bdc3c7;
    background: #ecf0f1;
    height: 20px;
    subcontrol-position: top;
    subcontrol-origin: margin;
    border-radius: 5px;
}
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

5. 高级QSS技巧

5.1 使用资源文件
可以将图片等资源文件打包到Qt资源文件（.qrc）中，然后在QSS中引用：

QPushButton {
    background-image: url(:/images/button-background.png);
}
1
2
3

5.2 动态改变样式
可以在程序运行时动态改变控件的样式：

button->setProperty("active", true);
button->style()->unpolish(button);
button->style()->polish(button);
button->update();
1
2
3
4

在QSS中使用属性选择器：

QPushButton[active="true"] {
    background-color: #e74c3c;
}
1
2
3

5.3 使用子控件选择器
可以为控件的子控件设置样式：

QComboBox QAbstractItemView {
    background-color: #ecf0f1;
    border: 1px solid #bdc3c7;
    selection-background-color: #3498db;
}
1
2
3
4
5

通过QSS，开发者可以轻松地美化Qt应用程序的界面，打造出专业的外观。希望这些示例和技巧能帮助你在实际项目中应用QSS。如果你有其他的QSS技巧，欢迎在评论区分享！