Qt之QSS的使用

一、QSS介绍

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

1.QSS的基本语法

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

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）中，然后通过资源路径加载。

在代码中设置：

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样式表内容：

/* 正常状态或者鼠标松开按钮的状态 */
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();
    }
}