Qt样式表（Qt Style Sheets，简称QSS）是一种类似于HTML中的CSS（层叠样式表）的机制，用于自定义Qt应用程序的外观。通过QSS，开发者可以轻松地修改控件的外观，而无需更改底层代码逻辑。这种方式不仅提高了开发效率，还增强了界面设计的灵活性。

1. QSS概要

1.1 QSS作用

QSS允许开发者通过声明式的方式设置控件的外观属性，例如颜色、字体、边框、间距等。与直接在代码中设置样式相比，QSS具有以下优点：

• 分离样式与逻辑：样式和功能代码分离，便于维护。
• 动态切换主题：可以通过加载不同的QSS文件实现主题切换。
• 跨平台一致性：确保不同平台上的控件外观一致。

1.2 QSS与CSS的关系

QSS借鉴了CSS的设计思想，语法上非常相似。熟悉CSS的开发者可以快速上手QSS。然而，QSS是专门为Qt控件设计的，因此支持的属性和选择器可能与CSS有所不同。

1.3 QSS基本语法

QSS的基本语法如下：

选择器 {
    属性: 值;
}

• 选择器：用于指定要应用样式的控件或控件组，支持多种类型的选择器来具体选择应用样式的对象。
• 属性：控件的外观属性。
• 值：属性的具体取值，不同的属性可能需要使用不同的值。

QPushButton {
    color: white;
    background-color: blue;
    border: 1px solid black;
}

1.4 QSS在QT中的使用

1. 可以在Qt Designer中直接键入样式表

2. 在Qt中对指定控件使用setStyleSheet(样式表字符串)方法设置。

   • 参数是字符串类型，引号内使用QSS语法，如果多行书写，也要记得将每一行套用双引号来转化成一个字符串。
   • 样式表是默认递归套用到子控件的，如果只想套用到指定的控件，就需要细分选择选择器。
   • 对一个控件不支持重复设置样式表，只有最后一个设置的样式表生效。但可以分别对父控件和子控件设置不同样式表，默认子控件样式在父控件之上生效。
   • 因为这种方法是直接对控件设置样式表，所以也支持省略选择器，以自动套用当前控件类型。

   // 对整个控件如下应用样式表会套用到所有子控件QPushButton上
   auto myWidget = new QWidget();
   myWidget->setStyleSheet("QPushButton { background-color: yellow }"); 
   // 多行书写需要每一行使用双引号来合并成一个字符串
   myWidget->setStyleSheet("QWidget { background-color: #3a3a3a }"
                          "QPushButton { background-color: yellow }");
   
   // 也可以直接对控件设置样式
   auto myButton = new QPushButton();
   myButton->setStyleSheet("background-color: yellow");
   

2. QSS选择器

2.1 选择器类型

QSS支持多种选择器，常用的包括：

1. 类型选择器：根据控件类型应用样式。具体支持的控件类型见2.2。

   QPushButton {
      color: red;
   }

2. 类选择器：根据控件的objectName或class属性应用样式，使用#来指定控件名称。

   可以先使用控件的getObjectName()方法获取控件名称，或者使用setObjectName(QString name)方法来指定控件名称

   QPushButton#myButton { /* 允许省略QPushButton */
      background-color: green;
   }

   // 设置、查看控件名称
   auto myButton = new QPushButton();
   myWidget->setObjectName("myButton");
   myWidget->getObjectName(); // 返回"myButton"

3. 子控件选择器：针对复合控件的子部件应用样式，使用::来指定子控件。

   QComboBox::drop-down { /* 下拉按钮 */
      image: url(dropdown.png); /* 自定义箭头图标 */
   }

4. 状态选择器：根据控件的状态（如hover、pressed）应用样式，使用:来指定控件状态。

   QPushButton:hover {
      background-color: yellow;
   }

2.2 选择器控件列表

3. QSS属性列表

以下是QSS支持的常用属性及其详细说明：

3.1 颜色与背景

3.2 字体

3.3 边框

3.4 间距与对齐

3.5 其他属性

4. QSS的高级用法

以下是Qt样式表（QSS）的高级用法详解。

4.1 伪状态组合（多状态叠加控制）

QSS允许通过组合多个伪状态实现精确的交互反馈。

QPushButton:hover:checked { /* 按钮同时悬停且被选中 */
    background-color: #FFA500;  /* 橙色 */
    border: 2px solid darkorange;
}

4.2 继承与层叠机制

QSS遵循CSS的层叠规则，但需注意Qt控件的样式继承特性。即前面提到的子控件可以在父控件之上设置样式。

QWidget {
    font-family: "Arial";
    font-size: 12pt;
}

QPushButton { /* 是QWidget的子控件 */
    /* 继承自QWidget的字体设置 */
    color: white;
}

4.3 动态属性与条件样式

通过QObject::setProperty()动态改变控件样式。

先在代码中设置属性：

button->setProperty("priority", "high");

然后可以在QSS中匹配属性，以指定设置样式表：

QPushButton[priority="high"] {
    background-color: #FF4444;
    font-weight: bold;
}

附高级用法：状态切换动画

// 通过属性切换实现动画效果
button->setProperty("state", "active");
qApp->style()->unpolish(button);
qApp->style()->polish(button);

4.4 复杂选择器组合

通过组合选择器实现精准样式定位。

1. 相邻兄弟选择器

   QLineEdit + QPushButton {
      margin-left: 10px;  /* 紧接在输入框后的按钮 */
   }

2. 层级嵌套选择

   QTabWidget > QTabBar::tab:first-child {
      border-radius: 5px 0 0 0;  /* 第一个标签页特殊样式 */
   }

4.5 自定义控件样式

为自定义Widget实现完整QSS支持，可以自定义可样式化的子部件，如下：

class CustomWidget : public QWidget {
    Q_OBJECT
    Q_PROPERTY(QString mode READ mode WRITE setMode)
public:
    // 注册子部件类型
    Q_ENUMS(SubControls)
    enum SubControls { SC_Indicator = 0x1 };
};

然后在QSS中可以设置样式表：

CustomWidget::indicator {
    width: 20px;
    height: 20px;
}

4.6 高效调试技巧

在实际编码过程中，常用如下几种快速定位样式问题的方法。

1. 样式探测器

   qDebug() << widget->styleSheet();  // 输出当前样式

2. 边界高亮法

   * {
      border: 1px solid red !important;  /* 显示所有控件边界 */
   }

3. 状态监测法

   // 打印控件状态
   qDebug() << "Hover:" << button->underMouse()
           << "Pressed:" << button->isDown();

4.7 性能优化策略

• 避免全局选择器：尽量使用ID或类选择器
• 合并重复样式：减少重复属性定义
• 预编译QSS：将样式表编译为二进制资源
• 分层加载：按模块动态加载样式表

/* 优化前 */
QPushButton#okBtn { color: white; }
QPushButton#cancelBtn { color: white; }

/* 优化后 */
#okBtn, #cancelBtn {
    color: white;
}