Qt中的QSS介绍

原创于 2025-08-30 16:41:46 发布 · 1k 阅读

24 ·

CC 4.0 BY-SA版权

文章标签：

#QSS

Qt 专栏收录该内容

15 篇文章

订阅专栏

QSS(Qt Style Sheets)：Qt样式表，用于自定义定制Qt应用程序中部件(Widgets)的外观和样式，美化用户界面。它可以控制窗口、按钮、文本框等控件的颜色、字体、边框、背景等视觉属性。

Qt样式表的术语和语法规则与HTML CSS几乎完全相同。样式表由一系列样式规则(style rules)组成。样式规则由选择器(selector)和声明组成。选择器指定哪些控件受该规则影响；声明指定应在控件上设置哪些属性。如下语句：QPushButton是选择器，{ color: red }是声明。该规则指定QPushButton及其子类应使用红色作为前景色。

QPushButton { color: red }

1.Qt样式表通常不区分大小写(例如，color、Color、COLOR和cOloR指的是同一个属性)。唯一的例外是类名、对象名和Qt属性名，它们区分大小写。

2.可以为同一个声明指定多个选择器，使用逗号(,)分隔选择器。

3.样式规则的声明部分是属性：值对的列表，用大括号({})括起来并用分号分隔。

4.子控件：要设置复杂控件的样式，需要访问控件的子控件，例如QComboBox的下拉按钮。选择器可以包含子控件，从而可以将规则的应用限制在特定的控件子控件上。如下语句：此规则为所有QComboBox的下拉按钮设置了样式。

QComboBox::drop-down {
    image: url(dropdown.png);
    subcontrol-origin: margin;
}

5.伪状态(pseudo-states)：选择器可以包含伪状态，用于根据控件的状态限制规则的应用。伪状态位于选择器的末尾，中间用冒号(:)隔开。如下语句：当鼠标悬停在QPushButton上时，将应用此规则

QPushButton:hover { color: white }

(1).伪状态可以用感叹号运算符来否定。如下语句：当鼠标未悬停在QRadioButton上时，将应用此规则：

QRadioButton:!hover { color: red }

(2).伪状态可以链接(chained)使用，在这种情况下，逻辑上会隐含"与"关系。如下语句：当鼠标悬停在已选中的QCheckBox上时，将应用此规则：

QCheckBox:hover:checked { color: white }

(3).伪状态链中可能会出现否定伪状态。如下语句：当鼠标悬停在未按下的QPushButton上时，将应用此规则：

QPushButton:hover:!pressed { color: blue; }

(4).如果需要，可以使用逗号运算符来表达逻辑或，如下语句：

QCheckBox:hover, QCheckBox:checked { color: white }

(5).伪状态可以与子控件组合使用，如下语句：

QComboBox::drop-down:hover { image: url(dropdown_bright.png) }

6.冲突解决：当多条样式规则指定相同的属性但值不同时，就会发生冲突

(1).如下语句：以下两个规则都匹配名为okButton的QPushButton实例，并且color属性存在冲突。QPushButton#okButton被认为比QPushButton更具体，因为它(通常)引用单个对象，而不是某个类的所有实例。因此okButton的前景色设置为gray而非red，其它设置为red。

QPushButton#okButton { color: gray }
QPushButton { color: red }

(2).如下语句：带有伪状态的选择器比未指定伪状态的选择器更具体。因此，以下样式表指定QPushButton在鼠标悬停在其上时应显示白色文本，否则显示红色文本

QPushButton:hover { color: white }
QPushButton { color: red }

7.样式表层叠(cascading)：

(1).样式表可以在QApplication、父级Widget和子Widget上设置。任意Widget的有效样式表都是通过合并Widget祖先(父级、祖级等)上设置的样式表以及 QApplication上设置的任何样式表来获得的。

(2).当发生冲突时，无论冲突规则的具体性如何，Widget自身的样式表始终优先于任何继承的样式表。同样，父级Widget的样式表优先于祖级Widget的样式表，依此类推。

8.继承:默认情况下，使用Qt样式表时，部件不会自动从其父级部件继承其字体和颜色设置。相反，使用QWidget::setFont()和QWidget::setPalette()设置字体和调色板会传递到子窗口部件。通过调用QWidget::setPalette()或QWidget::setFont()所做的更改会被继承。所有现有和未来的子窗口部件(如果相应的画笔或字体尚未明确设置)都会继承这些更改。

注：以上内容主要来自于 Qt官方文档

使用VS2022创建一个Qt Widgets Application项目，往QtWidgetsApplication1.ui上拖一些控件，然后直接运行，结果如下图所示：

编写一个style.qss文件，内容如下所示：

QWidget {
    background-color: #87CEEB;
}
QTabBar::tab::selected {
    background: green;
    color: white;
}
QTabBar::tab:!selected {
    background: gray;
    color: white;
}
QPushButton:hover {
    color: red;
}
QLabel,QLineEdit {
	color: rgb(0,255,0);
}
QCheckBox:hover:checked {
    color: white
}
QRadioButton:hover{
    color: white
}
QRadioButton:checked {
    background-color: transparent;
    color: red;
}

将style.qss加入到QtWidgetsApplication1.qrc中，如下图所示：

调整main.cpp，内容如下：

int main(int argc, char *argv[])
{
    QApplication a(argc, argv);
    QFile style_file(":/styles/style.qss");
    if (style_file.open(QFile::ReadOnly)) {
        QTextStream stream(&style_file);
        QString style_content = stream.readAll();
        qDebug() << "qss length: " << style_content.length();
        a.setStyleSheet(style_content);
        style_file.close();
    }
    else
        qDebug() << "failed to open style sheet file";

    //a.setStyleSheet("QPushButton:hover { color: red; }");

    QtWidgetsApplication1 w;
    w.show();
    return a.exec();
}

重新编译运行，执行结果如下图所示：