Qt之QSS的使用

一、QSS介绍

QSS(Quick Style Sheet)是一种用于定义Qt应用程序样式的机制。Qt是一个跨平台的C++应用程序开发框架,而QSS则允许开发者使用类似于CSS(层叠样式表)的语法来定义Qt应用程序的外观和风格。

1.QSS的基本语法

QSS的语法类似于CSS,通过设置属性和值的方式定义样式。例如:

1
2
3
4
5
QPushButton {
    background-color: lightblue;
    border: 2px solid darkblue;
    color: white;
}

这个例子定义了一个QPushButton(按钮)的样式,设置了背景颜色、边框和文本颜色。

2.样式选择器

与CSS类似,QSS也支持不同的选择器,可以根据控件的类型、名称、状态等来选择应用样式。

  • QLabel:选择所有标签控件。
  • QPushButton#myButton:选择具有id为“myButton”的QPushButton。
  • QLineEdit:focus:选择获得焦点的QLineEdit。

3.QSS的应用

在资源文件中设置:将QSS样式文件添加到Qt资源文件(.qrc)中,然后通过资源路径加载。

在代码中设置:

1
2
3
4
5
QApplication a(argc, argv);
QFile styleFile(":/stylesheets/style.qss");
styleFile.open(QFile::ReadOnly);
QString style = QLatin1String(styleFile.readAll());
a.setStyleSheet(style);

二、QSS的应用步骤与示例  

1.QSS资源文件添加步骤

"右键项目" ----  "Add New...", 选择 "Qt" ---- 再选择"Qt Resource File"

点击按钮"Choose..."后

在"名称"后中添加资源文件"qss",然后点击"下一步(N)"

点击完成后,可以看到添加的资源文件如下图所示

右键"qss_style.qrc" ----  "Add Prefix"

点击OK后

右键"/"文件夹,点击"添加现有文件...",选择"button.qss"

 

2.QSS资源文件的使用

button样式表内容:

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
/* 正常状态或者鼠标松开按钮的状态 */
QPushButton
{
    background-color:rgb(240,230,200);
    color: rgb(0, 0, 2);
    border-style: outset;
    border-color: beige;
    border-radius: 10px;
}
 
/* hover按钮悬浮 */
 QPushButton:hover
{
    background-color:rgb(30, 140, 20);
    border-radius: 10px;
    color: rgb(0, 0, 0);
}
 
 /* 鼠标按下按钮时的状态 */
QPushButton:checked
{
    background-color:rgb(20, 150, 90);
    border-radius: 10px;
    color: rgb(255, 255, 0);
}

代码示例:

复制代码
MainWindow::MainWindow(QWidget *parent)
    : QMainWindow(parent)
{
    m_pBtnClicked = new QPushButton("Clicked", this);
    m_pBtnClicked->setFixedSize(100, 40);

    QFile qss_file(":/button.qss");
    if (qss_file.open(QFile::ReadOnly)) {
        QString qss_text = QLatin1String(qss_file.readAll());
        m_pBtnClicked->setStyleSheet(qss_text);
        qss_file.close();
    }
}
复制代码

posted @   TechNomad  阅读(2426)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 微软正式发布.NET 10 Preview 1:开启下一代开发框架新篇章
· DeepSeek “源神”启动!「GitHub 热点速览」
· C# 集成 DeepSeek 模型实现 AI 私有化(本地部署与 API 调用教程)
· DeepSeek R1 简明指南:架构、训练、本地部署及硬件要求
· NetPad:一个.NET开源、跨平台的C#编辑器
点击右上角即可分享
微信分享提示