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

随笔2个月前发布 范锡松
314 0 0

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打造专业外观
【QT开发教程】Qt界面美化:使用QSS打造专业外观

【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技巧,欢迎在评论区分享!

© 版权声明

相关文章

暂无评论

您必须登录才能参与评论!
立即登录
暂无评论...