Qt 外观之Qt样式表（QSS）

如果想对Qt的界面添加一些特别的外观，进行美化，可以使用QSS。

在Qt中，Qt 样式表（Qt Style Sheets，简称QSS）是基于CSS语法的机制，用于自定义控件的外观（颜色、字体、边框、布局等），支持大多数Qt控件（如QPushButton、QLineEdit、QWidget等）。

一般有三种方式设置Qt的样式表。

一、设置样式表的3种常用方式

1. 代码中通过setStyleSheet()设置

在C++或Python（PyQt/PySide）代码中，通过控件的setStyleSheet()方法，可以设置样式表，适用于动态修改样式，样式需要适应程序而变化的场景。

样式表作为整个字符串传参，因此字符串换行需要注意代码规范。

可以使用续行符 \，避免冗长的字符串写在一行中。但是续行符\之后要紧跟换行，不能添加注释。

下述方法可以在每行添加注释，在源代码中：

C++11之前的字符串如果换行书写，需要每一行使用双引号""包裹。

C++11及之后，则可以使用原生字符串R"()"，无需每行加引号。

如果是python代码，使用三引号可以直接换行''' ''''

示例（C++）：

#include <QPushButton>
#include <QWidget>

// 为单个按钮设置样式
QPushButton *btn = new QPushButton("点击我", this);
btn->setStyleSheet(
    "QPushButton {"  // 正常状态
        "color: white;"  // 文字颜色
        "background-color: #2E8B57;"  // 背景色（海绿色）
        "border-radius: 5px;"  // 圆角
        "padding: 5px 10px;"  // 内边距
    "}"
    "QPushButton:hover {"  // 鼠标悬停状态
        "background-color: #3CB371;"
    "}"
    "QPushButton:pressed {"  // 鼠标按下状态
        "background-color: #228B22;"
    "}"
);

// 为整个窗口（及子控件）设置样式
this->setStyleSheet(
    "QWidget {"
        "background-color: #F5F5F5;"  // 窗口背景色
    "}"
    "QLineEdit {"
        "border: 1px solid #CCCCCC;"
        "border-radius: 3px;"
        "padding: 3px;"
    "}"
);

换行写法的示例：

//续行符，无版本限制
btn->setStyleSheet(
    "QPushButton {\
        color: white;\
        background-color: blue;\
    }"  // 最后一行字符串
);

// C++11之前：多行字符串用引号+连接符
btn->setStyleSheet(
    "QPushButton {"  // 第一行字符串
    "    color: white;"  // 第二行字符串（用引号）
    "    background-color: blue;"  // 第三行字符串（用引号）
    "}"  // 最后一行字符串
);
// 等价于："QPushButton {    color: white;    background-color: blue;}"


//C++11及以后使用原生字符串
btn->setStyleSheet(R"(
    QPushButton {
        color: white;
        background-color: blue;
    }
)");  // R"(...)" 包裹的内容支持直接换行，无需每行引号

---

示例（PyQt）：

from PyQt5.QtWidgets import QPushButton, QWidget

btn = QPushButton("点击我", self)
btn.setStyleSheet("""
    QPushButton {
        color: white;
        background-color: #2E8B57;
        border-radius: 5px;
        padding: 5px 10px;
    }
    QPushButton:hover {
        background-color: #3CB371;
    }
""")

2. 在Qt Designer的属性中设置

在Qt Designer（可视化界面设计工具）中，可直接为控件设置样式表，适用于初始化，后续样式一成不变的场景。

步骤如下：

1. 选中目标控件（如按钮、窗口）；

2. 在右侧「属性编辑器」中找到styleSheet属性（或者在过滤器中搜索）；
   

3. 点击属性值右侧的「...」按钮，打开「样式表编辑器」；

4. 输入样式表内容（支持语法高亮和预览），点击「确定」即可。

「样式表编辑器」的内容就是样式表的内容，和上述的代码传参的字符串是一样的，但是无需考虑换行的语法限制。

刚打开，一般是空的，需要先写上选择器紧跟着{}，然后在{}中添加属性与值形成一对声明，声明之间使用;分隔。

3. 加载外部样式表文件 .css

将样式表内容写入.css文件（如style.css），通过代码读取并应用，这种方式便于样式管理和复用。

示例（C++）：

#include <QFile>
#include <QTextStream>

// 读取外部样式表文件
QFile file(":/style.css");  // 假设文件在资源文件中
if (file.open(QFile::ReadOnly | QFile::Text)) {
    QTextStream in(&file);
    QString styleSheet = in.readAll();
    this->setStyleSheet(styleSheet);  // 应用到窗口
    file.close();
}

style.css内容示例：

QPushButton {
    color: white;
    background-color: #4169E1;
    border: none;
    border-radius: 4px;
}
QPushButton:pressed {
    background-color: #1E90FF;
}

---

二、样式表语法基础

Qt样式表语法与CSS类似，核心由「选择器」和「声明」组成：
选择器 { 声明1; 声明2; ... }

1. 选择器（指定作用的控件）

选择器类型	示例	说明
类型选择器	QPushButton	匹配所有QPushButton及子类控件
类选择器	.QPushButton	仅匹配QPushButton（不包括子类）
ID选择器	#myBtn	匹配objectName为myBtn的控件
属性选择器	QLineEdit[readOnly="true"]	匹配readOnly属性为true的输入框
后代选择器	QWidget QPushButton	匹配QWidget的子控件中的QPushButton
子选择器	QWidget > QPushButton	匹配QWidget的直接子控件QPushButton

2. 声明（定义样式属性）

声明由「属性名: 值」组成，常见属性如下：

• 颜色：color（文字色）、background-color（背景色）；
• 字体：font-family（字体）、font-size（字号）、font-weight: bold（粗体）；
• 边框：border: 1px solid gray（边框样式）、border-radius: 5px（圆角）；
• 内边距/外边距：padding: 5px（内边距）、margin: 3px（外边距）；
• 尺寸：min-width: 100px（最小宽度）、height: 30px（高度）。

3. 伪状态（控件的状态样式）

通过:伪状态定义控件在特定状态下的样式，常见伪状态：

• :hover：鼠标悬停时；
• :pressed：鼠标按下时；
• :checked：选中状态（如复选框）；
• :disabled：禁用状态；
• :focus：获取焦点时（如输入框）。

示例：

QCheckBox:checked {
    color: red;  // 选中时文字为红色
}
QLineEdit:focus {
    border: 2px solid blue;  // 获焦时边框变蓝
}

4. 子控件（复杂控件的内部元素）

部分控件包含子控件（如下拉框的箭头、滑块的手柄），通过::子控件名设置样式：

• QComboBox::drop-down：下拉框的箭头按钮；
• QSlider::handle：滑块的拖动手柄；
• QScrollBar::handle：滚动条的拖动块。

示例：

QComboBox::drop-down {
    width: 20px;  // 下拉箭头宽度
    border-left: 1px solid gray;
}
QComboBox::down-arrow {
    image: url(:/arrow.png);  // 自定义箭头图标
}

三、注意事项

1. 优先级 ：更具体的选择器优先级更高（如#myBtn > QPushButton），后设置的样式会覆盖先设置的同名属性。
2. 继承性：父控件的样式表会影响子控件（除非子控件单独设置样式）。
3. 局限性 ：部分控件（如QTableView）的样式可能需要结合QItemDelegate自定义，样式表无法覆盖所有细节。
4. 调试 ：若样式不生效，可检查选择器是否正确、属性是否支持（参考Qt官方文档），或使用QApplication::setStyleSheet()全局应用样式表排查冲突。

四、参考

• Qt官方样式表文档
• Qt样式表示例：

---

持续更新中。。。。。。。。。。。。。。。