深入浅出之QSS（Qt样式表）

Qt样式表（QSS）是一种用于自定义Qt应用程序中控件外观的机制。它基于CSS（层叠样式表）的语法和概念，允许开发者在不修改控件代码的情况下，通过外部样式表文件或直接在代码中嵌入样式规则来改变控件的视觉效果。以下是对Qt样式表的详细解析：

编写一个Qt中的QSS（Qt Style Sheets）文件类似于编写CSS文件，但有一些特定的属性和选择器是Qt特有的。以下是一个编写QSS文件的基本指南：

一、基本结构

QSS文件由一系列样式规则组成，每个规则都包含一个选择器和一个或多个声明。选择器用于指定哪些控件将应用该规则，而声明则定义了控件的具体样式属性。

/* 选择器 */
控件类型 {
    /* 声明 */
    属性: 值;
    属性: 值;
    ...
}

例如，为一个QPushButton设置背景颜色：

QPushButton{background-color:red;}

二、选择器

Qt样式表支持多种选择器类型，以满足不同的需求：

1. 全局选择器：使用*选择所有控件。
2. 类型选择器：使用控件的类名选择特定类型的控件，如QPushButton。
3. 属性选择器：根据控件的属性及其值选择控件。例如，QPushButton[flat="false"]选择所有flat属性为false的按钮。
4. ID选择器：使用控件的objectName属性选择具有特定ID的控件。例如，QPushButton#okButton选择objectName为okButton的按钮。
5. 子控件选择器：用于选择复杂控件的子控件。例如，QComboBox::drop-down选择QComboBox的下拉按钮。
6. 伪状态选择器：根据控件的当前状态选择控件。例如，QPushButton:hover选择鼠标悬停时的按钮。

三、属性和值

Qt Style Sheets Reference | Qt Widgets 6.8.0https://doc.qt.io/qt-6/stylesheet-reference.html

QSS（Qt Style Sheets）属性列表涵盖了众多可用于自定义Qt应用程序中控件外观的属性。以下是一些常见的QSS属性及其描述：

3.1、背景属性

• background-color：设置控件的背景颜色。
• background-image：设置控件的背景图像。
• background-position：设置背景图像的开始位置。
• background-repeat：设置是否及如何重复背景图像。
• border-image：设置用作边框的图片及其相关属性（如平铺、拉伸等）。

alternate-background-color	Brush	交替背景色。
background	Background	背景，相当于指定background-color、background-image、background-repeat和background-position。
background-color	Brush	背景颜色，例如：
background-image	Url	背景图像（图像的半透明部分会被背景颜色穿透）。
background-repeat	Repeat	背景图像如何充满背景矩形，如果未指定此属性，背景图像将在两个方向上重复(repeat)。
background-position	Alignment	背景图像在背景原点矩形内的对齐。如果未指定此属性，则对齐方式为左上角。
background-attachment	Attachment	背景图像是否相对于视口进行滚动或固定。默认情况下，背景图像随视口滚动。
background-clip	Origin	规定背景的绘制区域。如果未指定此属性，则默认为border。 border：背景被裁剪到边框盒 padding：背景被裁剪到内边距框 content：背景被裁剪到内容框
background-origin	Origin	背景图像相对于什么来定位。如果未指定此属性，则默认为 padding 填充。 padding：背景图像相对于内边距框来定位 border：背景图像相对于边框盒来定位 content：背景图像相对于内容框来定位

3.2、边框属性

• border：简写属性，用于同时设置边框的宽度、样式和颜色。
• border-width：设置边框的宽度。
• border-style：设置边框的样式（如实线、虚线、点线等）。
• border-color：设置边框的颜色。
• border-radius：设置边框的圆角半径，使控件边角呈现圆润效果。

border	Border	设置 4 个边框的样式，按照一下顺序进行设置：border-width，border-style，border-color。
border-top	Border	顶部边框
border-bottom	Border	底部边框
border-right	Border	右边边框
border-left	Border	左边边框
border-color	Box Colors	边框的颜色。
border-top-color	Brush	边框上边缘颜色
border-bottom-color	Brush	边框下边缘颜色
border-right-color	Brush	边框右边缘颜色
border-left-color	Brush	边框左边缘颜色
border-image	Border Image	填充边框的图像
border-radius	Radius	边角的半径，即边角圆弧。
border-top-left-radius	Radius	左上角圆弧
border-top-right-radius	Radius	右上角圆弧
border-bottom-right-radius	Radius	右下角圆弧
border-bottom-left-radius	Radius	左下角圆弧
border-style	Border Style	边框边缘的样式，若未指定默认为none。
border-top-style	Border Style	边框上边缘的样式
border-bottom-style	Border Style	边框下边缘的样式
border-right-style	BorderStyle	边框右边缘的样式
border-left-style	BorderStyle	边框左边缘的样式
border-width	Box Lengths	边框的宽度。
border-top-width	Box Lengths	上边框的宽度
border-bottom-width	Box Lengths	下边框的宽度
border-right-width	Box Lengths	右边框的宽度
border-left-width	Box Lengths	左边框的宽度
button-layout	Number	QDialogButtonBox或QMessageBox中的按钮布局。取值为0 (WinLayout)、1 (MacLayout)、2 (KdeLayout)、3 (GnomeLayout)和5 (AndroidLayout)。如果未指定此属性，它默认为SH_DialogButtonLayout样式提示的当前样式所指定的值。

3.3、字体属性

• font：简写属性，用于同时设置字体家族、字体大小、字体样式等。
• font-family：设置文本的字体家族。
• font-size：设置文本的字体大小。
• font-style：设置文本的字体样式（如斜体）。
• font-weight：设置文本的字体粗细。

font	Font	设置字体。相当于指定font-family、font-size、font-style和/或font-weight。
font-family	String	字体类型。
font-size	Font Size	字体大小。
font-style	Font Style	字体风格(倾斜）。
font-weight	Font Weight	字体的粗细。

3.4、文本属性

• color：设置文本的颜色。
• text-align：设置文本的对齐方式（如左对齐、右对齐、居中对齐等）。
• text-decoration：设置文本的装饰效果（如下划线、删除线等）。

color	Brush	渲染文本的颜色，默认值为黑色。
text-align	Alignment	小部件内容中的文本和图标的对齐方式。
text-decoration	none underline overline line-through	附加文本效果

3.5、尺寸和间距属性

• width：设置控件的宽度。
• height：设置控件的高度。
• margin：设置控件的外边距，即控件与其他控件之间的间距。
• padding：设置控件的内边距，即控件内容与控件边框之间的间距。

bottom	Length	在部件边底部其子控件向上的偏移量，即元素与底部边缘的距离。
top	Length	在部件边顶部其子控件向下的偏移量，即元素与顶部边缘的距离。
right	Length	在部件右边其子控件向左的偏移量，即元素与右边缘的距离。
left	Length	在部件左边其子控件向右的偏移量，即元素与左边缘的距离。
margin	Box Lengths	设置元素的4个外边距。相当于指定margin-top、margin-right、margin-bottom和margin-left。
margin-top	Length	上边距
margin-right	Length	右边距
margin-bottom	Length	下边距
margin-left	Length	左边距

3.6、其他属性

• box-shadow：向控件添加一个或多个阴影效果。
• opacity：设置控件的透明度。
• visibility：设置控件的可见性（如可见、隐藏等）。

3.7、伪态属性

• :hover：当鼠标悬停在控件上时应用的样式。
• :pressed：当控件被按下时应用的样式。
• :checked：对于可检查的控件（如复选框、单选按钮等），当它们被选中时应用的样式。
• :disabled：当控件被禁用时应用的样式。

3.8、布局属性

• spacing（在布局管理器中）：设置子控件之间的间距。
• align-items（在布局管理器中）：设置子控件的对齐方式。

请注意，QSS属性列表可能因Qt版本的不同而有所变化。此外，某些属性可能仅适用于特定类型的控件或布局管理器。因此，在使用QSS时，建议查阅Qt的官方文档以获取最准确的信息。

四、伪态

伪态用于根据控件的当前状态应用不同的样式。常见的伪态包括：

• :hover：鼠标悬停在控件上时。
• :pressed：控件被按下时。
• :checked：对于可检查的控件（如复选框和单选按钮），当它们被选中时。
• :disabled：控件被禁用时。
• :focus：控件获得焦点时。

五、子控件选择器

对于某些复杂控件（如QComboBox、QSpinBox等），可以使用子控件选择器来选择并自定义其子控件的样式。例如：

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

六、注释

QSS文件支持CSS风格的注释，即使用/* ... */来包含注释内容。

七、声明块

声明块包含一组属性和值对，用于定义控件的样式。属性和值之间用冒号分隔，每个声明以分号结尾。例如：

QPushButton {
    background-color: #4CAF50;
    color: white;
    border: 2px solid #fff;
    border-radius: 4px;
}

八、 导入其他QSS文件

可以使用@import语句在一个QSS文件中导入另一个QSS文件。这有助于将样式规则组织成多个文件，并在需要时将它们组合在一起。

@import "buttons.qss";
@import "labels.qss";

九、应用QSS文件

编写完QSS文件后，你需要将其应用到Qt应用程序中。这通常通过以下方式之一完成：

• 全局应用：使用QApplication对象的setStyleSheet方法将QSS文件应用到整个应用程序。
• 局部应用：使用特定控件的setStyleSheet方法将QSS规则应用到单个控件或一组控件。

全局应用示例

#include <QApplication>
#include <QFile>
#include <QTextStream>

int main(int argc, char *argv[]) {
    QApplication app(argc, argv);

    QFile file(":/path/to/styles.qss"); // 假设QSS文件作为资源文件嵌入
    if (file.open(QFile::ReadOnly | QFile::Text)) {
        QTextStream ts(&file);
        app.setStyleSheet(ts.readAll());
    }

    // ... 创建和显示你的控件

    return app.exec();
}

局部应用示例 

QPushButton *button = new QPushButton("Styled Button");
button->setStyleSheet("background-color: #4CAF50; color: white; border: 2px solid #fff; border-radius: 4px;");

 但是，请注意，局部应用通常不推荐用于多个控件，因为它会导致代码冗余和难以维护。更好的做法是使用QSS文件中的选择器来定义样式，并全局应用这些样式。

十、Qt样式表的使用

在Qt中，QSS（Qt Style Sheets，Qt样式表）是一种强大的工具，它允许开发者以类似于CSS的方式自定义Qt应用程序中控件的外观。通过QSS，你可以改变控件的颜色、字体、边框、背景图像等属性，从而显著提升用户界面的美观度和用户体验。

以下是在Qt中使用QSS进行美化的基本步骤：

10.1. 编写QSS文件

首先，你需要编写一个包含QSS规则的文本文件。这个文件通常以.qss为扩展名。以下是一个简单的QSS示例，它定义了一个QPushButton的样式：

/* buttons.qss */
QPushButton {
    background-color: #4CAF50; /* 绿色背景 */
    border: 2px solid #fff; /* 白色边框 */
    border-radius: 4px; /* 圆角边框 */
    color: white; /* 白色文字 */
    padding: 10px 20px; /* 内边距 */
    text-align: center; /* 文字居中 */
    text-decoration: none; /* 无文字装饰 */
    display: inline-block; /* 行内块级元素 */
    font-size: 16px; /* 字体大小 */
    margin: 4px 2px; /* 外边距 */
    cursor: pointer; /* 鼠标指针样式 */
}

QPushButton:hover {
    background-color: #45a049; /* 鼠标悬停时的背景色 */
}

QPushButton:pressed {
    background-color: #388e3c; /* 按下按钮时的背景色 */
}

10.2. 将QSS文件加载到应用程序中

有几种方法可以将QSS文件加载到Qt应用程序中。最常见的方法是使用QApplication对象的setStyleSheet方法：

#include <QApplication>
#include <QPushButton>

int main(int argc, char *argv[]) {
    QApplication app(argc, argv);

    // 加载QSS文件
    QFile file(":/path/to/buttons.qss");
    if (file.open(QFile::ReadOnly | QFile::Text)) {
        QTextStream ts(&file);
        app.setStyleSheet(ts.readAll());
    }

    // 创建并显示一个按钮以查看效果
    QPushButton button("Styled Button");
    button.show();

    return app.exec();
}

 注意：在上面的代码中，:/path/to/buttons.qss是一个资源文件路径，它假设你的QSS文件已经被添加到了Qt的资源系统中。如果你没有使用资源系统，你可以使用绝对路径或相对路径来加载QSS文件。

10.3. 应用QSS到特定控件

除了全局应用QSS外，你还可以将QSS应用到特定的控件上。这可以通过调用控件的setStyleSheet方法来实现：

QPushButton *button = new QPushButton("Another Styled Button");
button->setStyleSheet("background-color: #f44336; border: 2px solid #fff; ...");

 但是，这种方法通常不推荐用于多个控件，因为它会导致代码冗余和难以维护。更好的做法是使用类选择器、ID选择器或属性选择器在QSS文件中定义样式，并全局应用这些样式。

10.4. 使用QSS进行动态样式更新

Qt还支持动态更新样式表。这通常涉及到在控件的属性或状态发生变化时触发样式更新。你可以通过信号和槽机制来实现这一点：

// 假设你有一个按钮和一个滑块
QPushButton *button = ...;
QSlider *slider = ...;

// 连接滑块的valueChanged信号到一个槽函数
connect(slider, &QSlider::valueChanged, [=](int value) {
    // 根据滑块的值动态更新按钮的样式
    QString styleSheet = QString("QPushButton { background-color: rgb(%1, %2, %3); }")
                         .arg(255 * value / slider->maximum())
                         .arg(0)
                         .arg(0 - 255 * value / slider->maximum());
    button->setStyleSheet(styleSheet);
});

在这个例子中，我们根据滑块的值动态地改变了按钮的背景颜色。

通过掌握这些技巧，你可以使用QSS在Qt应用程序中创建出美观且功能丰富的用户界面。

10.5、Qt样式表的优先级与继承

Qt样式表的优先级和继承规则与CSS类似：

1. 优先级：更具体的选择器具有更高的优先级。如果多个规则适用于同一个控件，则最具体的规则将生效。如果优先级相同，则后定义的规则将覆盖先定义的规则。
2. 继承：某些样式属性是可继承的，意味着它们将从父控件传递到子控件。但是，不是所有属性都是可继承的，且继承的优先级较低。

10.6、Qt样式表的动态更新

Qt样式表支持动态更新。当控件的属性或状态发生变化时，可以重新加载样式表或更新控件的样式属性以实现动态效果。这通常涉及到信号和槽机制的使用，以便在属性或状态变化时触发样式更新。

综上所述，Qt样式表是一种强大的机制，允许开发者在不修改代码的情况下自定义Qt应用程序中控件的外观。通过掌握Qt样式表的基本语法、选择器类型、属性与值以及使用方法，开发者可以轻松地创建出美观且易于维护的用户界面。

十一、常用控件样式配置

11.1 QRadio

QRadioButton::indicator {   # indicator是一个子组件，这里的width和height分别指定按钮的宽和高
    width: 13px;
    height: 13px;
}

QRadioButton::indicator::unchecked {   # 未选中时状态，也即正常状态
    image: url(:/images/radiobutton_unchecked.png);
}

QRadioButton::indicator:unchecked:hover {   # 未选中时，鼠标悬停时的状态
    image: url(:/images/radiobutton_unchecked_hover.png);
}

QRadioButton::indicator:unchecked:pressed {   #未选中时，按钮下按时的状态
    image: url(:/images/radiobutton_unchecked_pressed.png);
}

QRadioButton::indicator::checked {   # 按钮选中时的状态
    image: url(:/images/radiobutton_checked.png);
}

QRadioButton::indicator:checked:hover {   # 按钮选中时，鼠标悬停状态
    image: url(:/images/radiobutton_checked_hover.png);
}

QRadioButton::indicator:checked:pressed { # 按钮选中时，鼠标下按时的状态
    image: url(:/images/radiobutton_checked_pressed.png);
}

11.2 QMenu样式表

在Qt中，QMenu的样式表设置允许你自定义菜单的外观，包括背景颜色、文本颜色、边框、分隔符等。由于QMenu不是直接继承自QWidget，它的样式表设置稍有不同，通常是通过全局样式表（例如通过QApplication设置）来应用的。

以下是一些常用的QMenu样式表属性及其示例：

背景颜色和文本颜色

QMenu {
    background-color: #333333; /* 菜单背景颜色 */
    color: white; /* 菜单项文本颜色 */
}

菜单项（QMenu::item）

QMenu::item {
    padding: 10px 30px; /* 菜单项的填充 */
    background-color: transparent; /* 菜单项背景颜色（通常设置为透明，以便显示QMenu的背景色） */
}

 选中状态的菜单项（QMenu::item:selected）

QMenu::item:selected {
    background-color: #606060; /* 选中菜单项的背景颜色 */
}

分隔符（QMenu::separator） 

QMenu::separator {
    height: 1px; /* 分隔符的高度 */
    background: #555555; /* 分隔符的颜色 */
    margin: 5px 0px; /* 分隔符的边距 */
}

禁用状态的菜单项（QMenu::item:disabled）

QMenu::item:disabled {
    color: #888888; /* 禁用菜单项的文本颜色 */
}

字体设置

你可以通过font-family、font-size和font-weight等属性来设置菜单项的字体。

QMenu {
    font-family: Arial, sans-serif; /* 字体家族 */
    font-size: 12pt; /* 字体大小 */
    font-weight: bold; /* 字体粗细 */
}

 注意：QMenu本身的文本通常不会直接显示（除非是通过某种自定义方式），因此QMenu的color属性主要影响的是菜单项的文本颜色。同样地，QMenu的font-属性也主要影响菜单项的字体设置。

应用样式表

你可以通过QApplication的setStyleSheet方法来应用全局样式表，这样应用程序中的所有QMenu都会采用这些样式设置。

QApplication app(argc, argv);
app.setStyleSheet("/* 样式表内容 */");

或者，如果你只想为特定的QMenu设置样式，你可以尝试将该QMenu的父组件（例如一个QWidget或QMainWindow）作为样式表的作用域，但这通常不如全局样式表方便和可靠。

记住，样式表的应用可能会受到操作系统主题和Qt版本的影响。在某些情况下，你可能需要调整样式表以适应不同的环境。

QMenu菜单高度与宽度

在Qt中，QMenu的菜单项高度与宽度通常是由其内容（如文本长度、图标大小等）以及样式表设置共同决定的。虽然不能直接通过QMenu的属性来设置具体的高度和宽度，但可以通过一些间接的方法来调整。

菜单项高度

1. 样式表设置：
   • 使用QMenu::item选择器在样式表中设置padding属性，这会影响菜单项的高度（以及显示的宽度）。
   • 例如：QMenu::item { padding: 10px 20px; } 会为菜单项增加上下10像素、左右20像素的填充，从而间接增加菜单项的高度。
2. 字体大小：
   • 菜单项的字体大小也会影响其高度。较大的字体需要更多的空间来显示，因此会增加菜单项的高度。
   • 可以通过样式表中的font-size属性来设置字体大小。
3. 图标大小：
   • 如果菜单项包含图标，图标的大小也会影响菜单项的高度。
   • 可以通过设置QAction的图标大小来间接影响菜单项的高度。

菜单宽度

1. 内容宽度：
   • QMenu的宽度通常是由其内容（文本、图标等）的宽度决定的。Qt会自动调整菜单的宽度以适应其内容。
2. 样式表设置：
   • 虽然不能直接设置QMenu的宽度，但可以通过样式表中的padding和margin属性来影响菜单项之间的间距和整体布局，从而间接影响菜单的显示宽度。
3. 最小宽度和最大宽度：
   • 如果需要限制菜单的最小或最大宽度，可以考虑为包含QMenu的父组件（如QWidget或QMainWindow）设置这些属性，而不是直接为QMenu设置。
   • 然而，请注意，这种方法可能不会直接影响QMenu的宽度，而是影响其父组件的布局和大小调整行为。
4. 动态调整：
   • 在某些情况下，可能需要根据菜单项的内容动态调整菜单的宽度。这通常需要通过编程逻辑来实现，而不是仅通过样式表。

注意事项

• 样式表的应用可能会受到操作系统主题和Qt版本的影响。
• 在调整菜单项高度和宽度时，应确保菜单仍然易于使用和阅读。
• 如果需要更精细的控制，可能需要考虑自定义绘制菜单项或使用其他Qt组件来模拟菜单行为。

综上所述，虽然QMenu本身不提供直接设置高度和宽度的属性，但可以通过样式表、字体大小、图标大小以及父组件的布局属性来间接调整其外观和尺寸。

11.3 Qpushbutton

QPushButton 的样式可以通过 Qt 的样式表（Style Sheets）进行定制。样式表提供了一种灵活的方式来改变控件的外观，包括字体、颜色、边框、背景等。以下是一些常见的 QPushButton 样式设置方法：

1. 改变字体和颜色：

   • 使用 font 属性设置字体大小和字体族。
   • 使用 color 属性设置文本颜色。

   QPushButton {

   font: 16px "Microsoft YaHei"; /* 设置字体大小和字体族 */

   color: #FFFFFF; /* 设置文本颜色 */

   }

2. 改变背景和边框：

   • 使用 background-color 属性设置背景颜色。
   • 使用 border 属性设置边框的宽度、样式和颜色。
   • 使用 border-radius 属性设置圆角边框。

   QPushButton {

   background-color: #4CAF50; /* 设置背景颜色 */

   border: 2px solid #333333; /* 设置边框 */

   border-radius: 8px; /* 设置圆角边框 */

   }

3. 设置内边距和文本对齐：

   • 使用 padding 属性设置内边距，以控制文本与按钮边框之间的间距。
   • 使用 text-align 属性设置文本对齐方式。

   QPushButton {

   padding: 10px 20px; /* 设置内边距 */

   text-align: center; /* 设置文本居中对齐 */

   }

4. 添加图标：

   • 使用 image 属性或 background-image 属性为按钮添加图标。
   • 注意，image 属性通常用于按钮内部的图标（如工具按钮中的图标），而 background-image 属性则用于按钮的背景图标。

   QPushButton {

   image: url(":/path/to/icon.png"); /* 为按钮添加图标 */

   /* 或者 */

   background-image: url(":/path/to/background_icon.png"); /* 为按钮背景添加图标 */

   }

   然而，需要注意的是，在 Qt 的样式表中，直接为 QPushButton 设置 image 属性可能不会生效，因为 QPushButton 默认不支持这种方式设置图标。通常，图标是通过 QIcon 类与 QAction 结合使用，或通过设置按钮的 icon 属性来添加的。

5. 使用伪状态选择器：

   • Qt 的样式表支持伪状态选择器，用于根据按钮的不同状态改变其样式。常见的伪状态包括 hover（鼠标悬浮）、pressed（鼠标按下）、checked（按钮被选中，适用于可选中按钮）、disabled（按钮被禁用）等。

   QPushButton:hover {

   background-color: #66BB6A; /* 鼠标悬浮时的背景颜色 */

   }

   QPushButton:pressed {

   background-color: #558B5F; /* 鼠标按下时的背景颜色 */

   }

   QPushButton:checked {

   border-color: #D84315; /* 按钮被选中时的边框颜色 */

   background-color: #FFD700; /* 按钮被选中时的背景颜色 */

   }

   QPushButton:disabled {

   background-color: #E0E0E0; /* 按钮被禁用时的背景颜色 */

   color: #A9A9A9; /* 按钮被禁用时的文本颜色 */

   }

参考：

1. 【QT】史上最全最详细的QSS样式表用法及用例说明_qt qss-优快云博客
2. Qt Style Sheets Reference | Qt Widgets 6.8.0