当前位置： 首页 > backend >正文

QT-QSS样式表

backend 2025/8/26 16:47:56

QSS样式表

一、QSS介绍

QSS，全称为Qt StyleSheet，是Qt框架中用于定义控件外观的一种样式表语言。

  • CSS = Cascading Style Sheets
  • 中文：层叠样式表
  • CSS 是网页的“化妆师”，负责颜色、字体、布局等外观样式；而 QSS 是 Qt 程序里的 CSS 版本，用来美化界面控件。

QSS可以应用于各种Qt部件（Widgets）上，包括按钮(Button)、标签(Label)、文本框(LineEdit)等，用来改变它们的颜色、字体、背景、边框等属性。

QSS支持丰富的样式设置，包括但不限于：

  • 颜色与背景：设置部件的前景色、背景色。
  • 字体：调整字体大小、类型、加粗、斜体等。
  • 边框：定义边框的宽度、样式、颜色。
  • 渐变与图案：应用渐变色或背景图案。
  • 状态伪类：针对不同状态（如：:hover, :pressed, :disabled）设置不同的样式。
  • 布局与间距：调整内边距、外边距等。

二、QSS的基本使用

1、样式表语法

一个样式表由一系列的样式规则构成。

一个基本的QSS规则由选择器和声明块组成：

selector {attribute: value
}

选择器（selector）

  • 选择器 ≠ 部件本身，而是 “匹配部件的条件”。
  • 最常见的选择器是类名（对应 Qt 控件类），比如：
    • QPushButton → 匹配所有按钮
    • QLabel → 匹配所有标签
    • QLineEdit → 匹配所有单行输入框

除此之外，还有更精确的写法：

  • QPushButton#loginBtn → 匹配 objectName 为 loginBtn 的按钮
  • QPushButton:hover → 匹配鼠标悬停时的按钮
  • QPushButton:pressed → 匹配被按下的按钮

👉 所以，选择器并不是“部件本身”，而是一套规则，决定哪些部件被应用样式。

声明块（declaration block）

  • 声明块是 { ... } 中的一组属性和值。

  • 每条声明形如：

    属性: 值;

  • 比如：

    background-color: blue;
color: white;
font-size: 16px;

声明块的顺序

  • 声明块的顺序能乱，因为 QSS（本质上类似 CSS）里的声明块是 无序集合。
  • 样式最终会作用到控件，和你写的先后顺序没关系，只要语法正确。
  • 唯一要注意的是：如果写了重复的属性，后写的会覆盖前写的。

示例：

QPushButton {color: red;color: white;  /* 最终文字是白色，因为后面覆盖了前面 */
}

✅ 总结：

  • 选择器：决定样式应用到哪些控件（可以是类名、ID、伪状态等）。
  • 声明块：一组属性和值，决定具体外观。
  • 顺序：声明块里属性顺序无所谓，但重复属性会以后面的为准。
2、QSS的使用方式

QSS 的应用主要有以下几种方式：

  • 直接在代码中设置

直接在Qt的代码中使用setStyleSheet()函数为单个控件或整个应用程序设置样式。例如，为一个QPushButton设置背景颜色可以直接在构造函数或其他适当位置写入样式：

QPushButton *button = new QPushButton(this);
button->setStyleSheet("background-color: blue; color: white;");
  • 使用外部QSS文件（推荐用法）

将样式规则写入一个或多个外部.qss文件中，然后在程序运行时加载并应用这些样式。这种方式便于样式管理，特别是当样式复杂或者需要跨多个窗体共享样式时更为有用。

  • UI设计界面对控件进行设计样式

选择控件进行样式编辑

在这里插入图片描述

三、QSS文件的使用

1、手动创建Qss文件

在项目目录下，创建一个qss文件夹，在qss目录下创建一个qss文件。

2、添加qss文件

首先在项目中创建资源文件。

项目右键，点击添加新文件，弹出窗口中，选择Qt Resource File

在这里插入图片描述

填写文件名，下一步到完成。

在这里插入图片描述

在项目中会出现res.qrc文件，点击文件右键，选中添加现有文件， 将手动创建的qss文件添加到项目中。

3、编辑QSS文件

双击刚创建的QSS文件，在打开的编辑器中编写你的样式规则。

QPushButton{    background-color: blue;    color: red;
}
4、加载QSS文件

使用QFile读取QSS内容，在需要应用样式的窗口或部件的初始化代码中，使用以下代码读取：

QFile file("qss文件路径");                 // 1. 创建 QFile 对象，指定 QSS 文件路径
if (file.open(QFile::ReadOnly)) {          // 2. 以只读方式打开 QSS 文件QByteArray qss = file.readAll();       // 3. 读取整个 QSS 文件内容，保存到 QByteArray// 应用到整个应用程序qApp->setStyleSheet(qss);              // 4. 设置全局样式表，所有控件都会受影响// 或者只应用到特定的部件，例如一个 QWidget 的子类 myWidget// myWidget->setStyleSheet(qss);       // 5. 只对 myWidget 及其子控件生效file.close();                          // 6. 关闭文件
} else {qDebug() << "Failed to open style sheet."; // 打开失败时输出调试信息
}

再进一步，我们封装一个loadStyleSheetFromResource方法，一行代码即可完成读取和设置样式：

qss.h

#ifndef QSS_H
#define QSS_H
#include <QString>
#include <QFile>class QSS {
public:QSS() { }   // 空构造函数// 模板函数，支持任意 Qt 控件类型template<class T>static void loadStyleFile(QString filePath, T* t) {QFile file(filePath);                  // 打开指定路径的 qss 文件if(file.open(QFile::ReadOnly)) {       // 只读方式打开t->setStyleSheet(file.readAll());  // 将文件内容读取并设置为控件样式}}
};#endif // QSS_H

MainWidget.cpp

//QSS<QApplication>::loadStyleFile(":/qss/style.qss",qApp); //全部组件都生效QSS::loadStyleFile(":/qss/style.qss",ui->pushButton_2); //指定组件生效

四、常用样式

1、字体样式
样式属性说明
font-family字体类型
font-size字体大小，单位一般使用 px 像素
font-weight字体加粗，bold 为加粗， normal 为不加粗
font-style字体样式，italic 为斜体， normal普通样式
font简写方式，可以同时设置前3种样式
QPushButton {font-family: "Microsoft YaHei";  /* 设置字体为微软雅黑 */font-size: 14px;                 /* 字体大小 14 像素 */font-style: italic;              /* 斜体 */font-weight: bold;               /* 粗体 */color: #ccc;                     /* 字体颜色为灰色 (#cccccc) */
}

简写方式：

font: bold italic 18px "Microsoft YaHei";

同时设置字体 style weight size family 的样式时，style(是否斜体) 和 weight (是否加粗)必须出现在开头，size 和 family 在后面，而且 size 必须在 family 之前，否则样式将不生效。

  • Qt 的 font 简写语法顺序固定 → weight style size family

  • 如果觉得容易出错，建议拆开写成 font-family、font-size、font-style、font-weight 四条，清晰也不会出问题。

2、背景样式
样式属性说明
background-color背景颜色，可以使用十六进制数表示颜色，或字体颜色：red, green, blue 等
background-image背景图片，图片路径为 url(image-path)
background-repeat设置背景平铺方式，no-repeat 不重复，repeat-x 在x轴重复，repeat-y 在y轴重复
background-position背景定位，只支持 left right top bottom center
background设置背景的所有属性
QLabel {background-color: rgb(54,54,54);background-image: url(:/imgs/picture/0.png);   /*显示背景图片, 也可以不用引号*/background-repeat: no-repeat;  /*不重复显示*/background-position: left center;
}

简写方式：

QLabel {background: url(:/imgs/picture/0.png) no-repeat left center #363636;
}

background 为设置背景的所有属性，color image repeat position 这些属性值出现的顺序可以任意。

3、文本样式
样式属性说明
text-decoration文本修饰：none、underline、overline、line-through
text-align文本水平方向对齐方式left、right、center、justify
color文本颜色
QLabel#label1 {text-decoration: none;        /* 无修饰 */
}QLabel#label2 {text-decoration: underline;   /* 下划线 */
}QLabel#label3 {text-decoration: overline;    /* 上划线 */
}QLabel#label4 {text-decoration: line-through;/* 删除线 */
}
4、边框样式
样式属性说明
border-width边框粗细
border-color边框颜色
border-style边框风格
border设置边框 例：border:1px solid red
border-radius设置边框圆角
QLabel 
{/*单独设置某一边 border-right-style:dotted;*/border-style: solid;border-width: 2px;border-color: red;
}

简写方式：

QLabel {border: 2px solid red;
}

solid 为实线，dashed 为虚线，dotted 为点线，none 为不显示（如果不设置 border-style，则默认显示边框）；border-radius 控制边框圆角。

QLabel{border-top-left-radius: 5px;      /* 左上角圆角 5 像素 */border-top-right-radius: 10px;    /* 右上角圆角 10 像素 */border-bottom-left-radius: 15px;  /* 左下角圆角 15 像素 */border-bottom-right-radius: 20px; /* 右下角圆角 20 像素 */border-radius: 20px;  /* 所有角统一圆角 20 像素 */ 
}
  • border-radius = 给四角设置默认统一圆角
  • border-*-radius = 可以单独覆盖每个角
  • 同时写时，单独角优先级高于统一圆角

五、选择器

QSS选择器，用于指定哪些UI元素将受到特定样式的控制。通过选择器可以精确地定位到应用程序中的控件，进而应用样式。

以下是一些常用的选择器类型及其说明：

1、基础选择器
(1) 类型选择器（Type Selector）
  • 作用：直接针对控件类型（类名）设置样式
  • 例子：
QWidget {background-color: blue;   /* 所有 QWidget 的背景都是蓝色 */
}
QPushButton {background-color: red;    /* 所有按钮背景都是红色 */
}
  • 解释：选择器就是控件的类型，所有该类型的控件都会被应用样式。
(2 )ID 选择器（ID Selector）
  • 作用：针对某个 特定控件 设置样式
  • 语法：#控件ID
  • 例子：
#myButton {    font-weight: bold;   /* 只有 ID 为 myButton 的控件加粗 */
}
  • 如何设置控件 ID（C++ 代码）：
button->setObjectName("myButton");
  • 解释：只有名字为 myButton 的控件会被应用该样式。
(3)类选择器（Class Selector）
  • 作用：给控件分组，多个控件共享一个类名，统一设置样式
  • 步骤：
  1. 给控件设置属性（代码中）：
QLabel* label1 = new QLabel("标签1");
label1->setProperty("class", "highlighted");QLabel* label2 = new QLabel("标签2");
label2->setProperty("class", "highlighted");QPushButton* btn = new QPushButton("按钮");
btn->setProperty("class", "highlighted");
  1. 在 QSS 中使用 . 前缀定义样式：
.highlighted {color: red;                 /* 文本红色 */text-decoration: line-through; /* 删除线 */
}
  • 解释：所有设置了 class=highlighted 的控件都会应用这个样式，可以一次性管理一组控件。
  • 类选择器在 Qt 里不是控件本身自带的类，而是你给控件加的 自定义属性。
  • 好处是：
    • 可以把多个控件分组（多个控件都设置 class=highlighted）
    • 一次性应用同一组样式
  • 一个控件可以有多个类，用空格分开：
label->setProperty("class","highlighted important");
.highlighted { color:red; }
.important   { font-weight:bold; }
  • 最终这个控件同时会是红色、加粗。

✅ 总结

选择器类型用法作用
类型选择器QPushButton针对控件类型统一样式
ID选择器#myButton针对单个控件
类选择器.highlighted针对一组控件，统一样式

简单来说：

  • 类型选择器 → “所有这个类型的控件”
  • ID选择器 → “这个特定控件”
  • 类选择器 → “一类控件”
2、层次选择器
(1）后代选择器（Descendant Selector）
  • 作用：选择某个控件内的所有 后代控件（不限层级）
  • 语法：用空格分隔
  • 示例：
#widget QPushButton {   color: red;  /* #widget 内的所有 QPushButton 文字都变红 */
}
  • 解释：
    • #widget → 父控件 ID
    • QPushButton → 所有在 #widget 内的按钮
    • 无论按钮在嵌套布局多深，都会被选中
  • 代码设置 ID：
widget->setObjectName("widget");
(2）子选择器（Child Selector）
  • 作用：只选择父控件的 直接子控件
  • 语法：使用 > 符号
  • 示例：
#widget > QPushButton {   color: red;  /* 只影响 #widget 的直接 QPushButton 子控件 */
}
  • 解释：
    • 只有 #widget 的直接子按钮会变红
    • 嵌套在其他布局或子控件里的按钮不会被选中
3、组合选择器
  • 作用：一次性给多个选择器应用相同样式
  • 语法：用逗号 , 分隔多个选择器
  • 示例：
QPushButton, QLineEdit {  border: 1px solid gray;   /* 所有按钮和文本框都添加灰色边框 */
}
  • 解释：
    • QPushButton → 所有按钮
    • QLineEdit → 所有文本框
    • 两类控件同时应用相同样式
4、动态属性选择器
  • 作用：根据控件的自定义属性来选择控件
  • 代码设置属性：Qt中使用动态属性，通过setProperty()函数设置属性；QSS中属性选择器使用[]语法。
button->setProperty("myBtn", "button");
  • QSS 中选择器语法：
QPushButton[myBtn="button"] {   background-color: yellow;  /* 所有 myBtn="button" 的 QPushButton 背景变黄 */
}
  • 解释：
    • QPushButton → 控件类型
    • [myBtn="button"] → 动态属性选择器，只选取属性为 myBtn="button" 的按钮
    • 可用于管理一类特殊按钮，无需额外类名

✅总结

选择器类型语法示例作用/说明
类型选择器QPushButton选中所有该类型控件
ID选择器#myButton选中某个特定控件，控件需设置 setObjectName("myButton")
类选择器.highlighted选中带某个自定义类属性的控件，通过 setProperty("class","highlighted") 设置
后代选择器#widget QPushButton选中某控件下的所有后代控件，不限层级
子选择器#widget > QPushButton只选中控件的直接子控件
组合选择器QPushButton, QLineEdit同时给多个选择器应用相同样式
动态属性选择器QPushButton[myBtn="button"]根据控件自定义属性选择控件，需用 setProperty("myBtn","button") 设置

六、QSS伪类选择器

QSS伪类用于定义元素在特定状态下的样式。这些状态可以是用户交互导致的（如鼠标悬停、按下、获得焦点等），也可以是元素自身的特定条件（如禁用状态）。

以下是一些常用的QSS伪类：

1. :hover
  • 作用：当鼠标悬停在控件上时的状态，hover(悬停)
  • 示例：
QPushButton:hover {    background-color: #ddd;   /* 鼠标悬停时背景变灰 */
}
  • 解释：
    • 仅在鼠标停留在按钮上时生效
    • 可用于按钮、标签等控件的动态效果
2. :pressed
  • 作用：控件被按下时的状态
  • 示例：
QPushButton:pressed {    background-color: #ccc;   /* 按下时背景变暗 */
}
  • 解释：
    • 按钮按下时立即触发
    • 常用于点击反馈效果
3. :enabled 和 :disabled
  • 作用：控件启用或禁用状态
  • 示例：
QPushButton:enabled {    color: black;             /* 可用按钮文字黑色 */
}
QPushButton:disabled {  color: gray;              /* 禁用按钮文字灰色 */
}
  • 解释：
    • :enabled 仅针对可交互控件
    • :disabled 针对不可用控件
    • 可以区分控件状态，提供视觉提示
4. :focus
  • 作用：控件获得焦点时的状态（通常用于输入控件）
  • 示例：
QLineEdit:focus {   border: 3px solid #1E90FF;  /* 输入框获得焦点时显示蓝色边框 */
}
  • 解释：
    • 鼠标点击或 Tab 键切换焦点时触发
    • 用于输入框高亮提示
5. :checked
  • 作用：复选框或单选按钮被选中时的状态
  • 示例：
QRadioButton:checked {  background-color: lightgreen;  /* 被选中时背景变绿 */
}
  • 解释：
    • 用于单选框和复选框
    • 可用颜色、边框等区分选中状态
6. :selected
  • 作用：列表或表格项被选中时的状态
  • 示例：
QListWidget::item:selected {   background-color: #8080ff;  /* 被选中项背景变蓝 */
}
  • 解释：
    • 用于 QListWidget、QTableWidget 等
    • 高亮显示选中项
✅ 总结
伪类选择器作用示例控件示例 QSS
:hover鼠标悬停QPushButton、QLabel 等QPushButton:hover { background-color:#ddd; }
:pressed被按下QPushButtonQPushButton:pressed { background-color:#ccc; }
:enabled可用状态所有控件QPushButton:enabled { color:black; }
:disabled禁用状态所有控件QPushButton:disabled { color:gray; }
:focus获得焦点QLineEdit、QTextEditQLineEdit:focus { border:3px solid #1E90FF; }
:checked被选中QCheckBox、QRadioButtonQRadioButton:checked { background-color:lightgreen; }
:selected列表/表格选中QListWidget、QTableWidgetQListWidget::item:selected { background-color:#8080ff; }

💡 注意事项：

  1. 冒号 : 是必不可少的。
  2. 同一控件同时定义多个伪类时，顺序可能影响最终样式。
  3. 可以结合 类型选择器、ID、类选择器、层次选择器 使用，实现丰富交互效果。

选择器就是 QSS 中用来挑选特定控件或控件组，从而应用样式的工具。

http://www.xdnf.cn/news/18737.html

相关文章：

  • 从零开始学习单片机14
  • 机器人中的李代数是什么
  • 基于波前编码成像系统模拟及图像复原的MATLAB实现
  • Rerank 与混合检索：协同提升检索精度
  • CUDA 工具包 13.0 正式发布：开启新一代 GPU 计算的基石!
  • 深入理解Linux进程程序替换：从原理到实践
  • 阿里云安装postgre数据库
  • 安全合规：AC（上网行为安全）--中
  • 2.认证与授权升级方案及使用
  • 力扣（有效括号）
  • 用蒙特卡洛法求解三门问题和Π
  • GPIO子系统自主实现（简单版）
  • 开发避坑指南(36)：Java字符串Base64编码实战指南
  • 迭代器设计模式
  • 《XXL-Job 全面介绍：Java 开发中的分布式任务调度框架》
  • 【互动屏幕】为什么现在数字展厅偏爱地面互动装置？
  • 嵌入式Linux内核编译与配置
  • 神经网络与梯度算法：深度学习的底层逻辑与实战解析
  • 微论-神经网络中记忆的演变
  • “Datawhale AI夏令营--coze空间
  • Java 探针的原理
  • 深入解析：为什么应该避免使用 atoi、atol 和 atof 函数
  • 《C++ Primer 第五版》省略符号（...）
  • 【小增长电商技术分享】电商支付宝批量转账工具技术测评：架构特性、合规风险与选型方法论，支付宝官方|小增长|云方付|易推客省心返
  • vi/vim 查找字符串
  • Ajax笔记（上）
  • Spark面试题
  • Redis面试精讲 Day 30：Redis面试真题解析与答题技巧
  • 南京魔数团：AR技术引领远程协作新纪元
  • Java网络编程：从入门到精通