QT中QSS样式表的详细介绍

转自个人博客

**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. 类选择器:根据控件的objectNameclass属性应用样式,使用**#**来指定控件名称。

    可以先使用控件的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. 状态选择器:根据控件的状态(如hoverpressed)应用样式,使用**:**来指定控件状态。

    QPushButton:hover {background-color: yellow;
    }
    

2.2 选择器控件列表

控件类型说明子部件伪状态
QWidget所有控件的基类,支持通用样式属性(如背景颜色、边框等)。
QAbstractScrollArea滚动区域的抽象基类,支持滚动条样式。::corner(滚动条交汇处的角落区域),::viewport(滚动区域的内容视图)
QDialog对话框的基类,支持对话框窗口和子控件的样式。
QAbstractButton抽象按钮基类,支持按钮样式(如文本、图标、背景等)。:hover(鼠标悬停时),:pressed(鼠标按下时),:checked(按钮被选中时),:unchecked(按钮未被选中时),:disabled(按钮被禁用时)
QPushButton标准按钮控件,支持按钮样式。:hover(鼠标悬停时),:pressed(鼠标按下时),:checked(按钮被选中时),:unchecked(按钮未被选中时),:disabled(按钮被禁用时),:default(默认按钮),:flat(扁平化按钮)
QRadioButton单选按钮控件,支持单选按钮样式。:hover(鼠标悬停时),:pressed(鼠标按下时),:checked(按钮被选中时),:unchecked(按钮未被选中时),:disabled(按钮被禁用时)
QCheckBox复选框控件,支持复选框样式。:hover(鼠标悬停时),:pressed(鼠标按下时),:checked(按钮被选中时),:unchecked(按钮未被选中时),:indeterminate(不确定状态),:disabled(按钮被禁用时)
QComboBox下拉框控件,支持下拉按钮、箭头、列表项等子控件样式。::drop-down(下拉按钮),::down-arrow(下拉箭头),::item(下拉列表中的项),::indicator(选中指示器):hover(鼠标悬停时),:pressed(鼠标按下时),:disabled(控件被禁用时),:on(下拉框打开时),:off(下拉框关闭时)
QScrollBar滚动条控件,支持滑块、增加/减少按钮等子控件样式。::handle(滑块),::add-line(增加按钮),::sub-line(减少按钮),::add-page(滑块上方的背景区域),::sub-page(滑块下方的背景区域):hover(鼠标悬停时),:pressed(鼠标按下时),:disabled(滚动条被禁用时)
QSlider滑块控件,支持滑块手柄样式。::groove(滑槽),::handle(滑块手柄),::add-page(滑块上方的背景区域),::sub-page(滑块下方的背景区域):hover(鼠标悬停时),:pressed(鼠标按下时),:disabled(滑块被禁用时)
QProgressBar进度条控件,支持进度块样式。::chunk(进度块):hover(鼠标悬停时),:disabled(进度条被禁用时)
QTabWidget标签页控件,支持标签栏、标签页等子控件样式。::pane(标签页的内容区域),::tab-bar(标签栏):hover(鼠标悬停时),:disabled(控件被禁用时)
QTabBar标签栏控件,支持标签页样式。::tab(标签页),::close-button(关闭按钮),::tear(拖拽分离的标签),::scroller(滚动按钮):hover(鼠标悬停时),:selected(标签页被选中时),:disabled(标签页被禁用时)
QHeaderView表头控件,支持表格或树形视图的表头样式。::section(表头单元格):hover(鼠标悬停时),:pressed(鼠标按下时),:disabled(表头被禁用时)
QMenu菜单控件,支持菜单项、分隔符等样式。::item(菜单项),::separator(分隔符),::indicator(选中指示器),::right-arrow(右箭头),::left-arrow(左箭头):hover(鼠标悬停时),:pressed(鼠标按下时),:disabled(菜单项被禁用时),:checked(菜单项被选中时),:unchecked(菜单项未被选中时)
QMenuBar菜单栏控件,支持菜单栏项样式。::item(菜单栏项):hover(鼠标悬停时),:pressed(鼠标按下时),:disabled(菜单栏项被禁用时)
QToolBar工具栏控件,支持工具栏按钮、分隔符等样式。::separator(分隔符),::handle(拖动手柄):hover(鼠标悬停时),:pressed(鼠标按下时),:disabled(工具栏被禁用时)
QDockWidget停靠窗口控件,支持标题栏、关闭按钮等样式。::title(标题栏),::close-button(关闭按钮),::float-button(浮动按钮):hover(鼠标悬停时),:pressed(鼠标按下时),:disabled(停靠窗口被禁用时)
QStatusBar状态栏控件,支持状态栏消息样式。
QMainWindow主窗口控件,支持中央部件、工具栏、状态栏等样式。
QLineEdit单行文本输入框控件,支持文本、占位符、边框等样式。::clear-button(清除按钮),::up-button(向上按钮),::down-button(向下按钮):hover(鼠标悬停时),:pressed(鼠标按下时),:disabled(输入框被禁用时),:read-only(只读模式)
QTextEdit多行文本编辑框控件,支持文本、滚动条等样式。::corner(滚动条交汇处的角落区域),::viewport(滚动区域的内容视图):hover(鼠标悬停时),:disabled(文本编辑框被禁用时)
QPlainTextEdit纯文本编辑框控件,支持文本、滚动条等样式。::corner(滚动条交汇处的角落区域),::viewport(滚动区域的内容视图):hover(鼠标悬停时),:disabled(纯文本编辑框被禁用时)
QSpinBox数值输入框控件,支持上下箭头按钮、文本等样式。::up-button(向上按钮),::down-button(向下按钮),::up-arrow(向上箭头),::down-arrow(向下箭头):hover(鼠标悬停时),:pressed(鼠标按下时),:disabled(数值输入框被禁用时)
QDoubleSpinBox双精度数值输入框控件,支持上下箭头按钮、文本等样式。::up-button(向上按钮),::down-button(向下按钮),::up-arrow(向上箭头),::down-arrow(向下箭头):hover(鼠标悬停时),:pressed(鼠标按下时),:disabled(双精度数值输入框被禁用时)
QDateTimeEdit日期时间输入框控件,支持上下箭头按钮、文本等样式。::up-button(向上按钮),::down-button(向下按钮),::up-arrow(向上箭头),::down-arrow(向下箭头):hover(鼠标悬停时),:pressed(鼠标按下时),:disabled(日期时间输入框被禁用时)
QAbstractItemView抽象项视图基类,支持表格、列表、树形视图的样式。::item(项),::branch(分支节点),::indicator(选中指示器):hover(鼠标悬停时),:selected(项被选中时),:disabled(项被禁用时),:checked(项被选中时),:unchecked(项未被选中时)
QSplitter分割器控件,支持分割线样式。::handle(拖动手柄):hover(鼠标悬停时),:pressed(鼠标按下时),:disabled(分割器被禁用时)
QCalendarWidget日历控件,支持日历网格、选中日期等样式。::navigation-bar(导航栏),::month-button(月份按钮),::year-button(年份按钮),::prev-month-button(上一月按钮),::next-month-button(下一月按钮):hover(鼠标悬停时),:pressed(鼠标按下时),:disabled(日历控件被禁用时)

3. QSS属性列表

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

3.1 颜色与背景

属性描述示例
color设置文本颜色color: red;
background-color设置背景颜色background-color: blue;
background-image设置背景图片background-image: url(bg.png);
background设置背景颜色和图片background: red url(bg.png);
background-repeat设置背景图片重复方式background-repeat: no-repeat;
background-position设置背景图片位置background-position: center;

3.2 字体

属性描述示例
font-family设置字体名称font-family: Arial;
font-size设置字体大小font-size: 14px;
font-weight设置字体粗细font-weight: bold;
font-style设置字体样式(如斜体)font-style: italic;
font综合设置字体属性font: bold 14px Arial;

3.3 边框

属性描述示例
border设置边框样式border: 1px solid black;
border-radius设置圆角半径border-radius: 5px;
border-color设置边框颜色border-color: red;
border-width设置边框宽度border-width: 2px;
border-style设置边框样式(如实线、虚线)border-style: dashed;

3.4 间距与对齐

属性描述示例
padding设置内边距padding: 10px;
margin设置外边距margin: 5px;
text-align设置文本对齐方式text-align: center;
spacing设置控件内部间距spacing: 5px;
alignment设置内容对齐方式alignment: Qt::AlignCenter;

3.5 其他属性

属性描述示例
min-width设置最小宽度min-width: 100px;
max-width设置最大宽度max-width: 200px;
min-height设置最小高度min-height: 50px;
max-height设置最大高度max-height: 100px;
opacity设置透明度opacity: 0.5;
icon设置图标icon: url(icon.png);
image设置图片image: url(image.png);

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_OBJECTQ_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;
}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如若转载,请注明出处:http://www.pswp.cn/diannao/89156.shtml
繁体地址,请注明出处:http://hk.pswp.cn/diannao/89156.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Spring 依赖注入:官方推荐方式及最佳实践

Spring 依赖注入&#xff1a;官方推荐方式及最佳实践 你正在遭遇以下困境吗&#xff1f; 项目变大后&#xff0c;依赖关系像一团乱麻&#xff0c;牵一发而动全身&#xff1f;单元测试难如登天&#xff0c;被迫启动整个Spring容器&#xff1f;NullPointerException 总在运行时突…

javaweb听课笔记day1

MySQL数据模型 关系型数据库: 通过表来存储数据 关系型数据库是建立在关系模型基础上的数据库&#xff0c;简单说&#xff0c;关系型数据库是由多张能互相连接的二维表组成的数据库 优点: 都是使用表结构&#xff0c;格式一致&#xff0c;易于维护;使用通用的SQL语言操作…

《从量子奇境到前端优化:解锁卡西米尔效应的隐藏力量》

卡西米尔效应由荷兰物理学家亨德里克卡西米尔于1948年提出&#xff0c;它源于量子场论中“真空不空”的奇异观点。在传统认知里&#xff0c;真空是一片虚无&#xff0c;但量子理论指出&#xff0c;真空中充满了持续涨落的能量&#xff0c;即零点能。想象有两片中性的金属板被放…

【学习笔记】强化学习的数学原理

软活硬整&#xff0c;纳什又把RL翻出来讲了一遍&#xff0c;我以为是温故而知新&#xff0c;原来是在卖书。 不过温故而知新还是没啥毛病的。 PS&#xff1a;今天装Notepad时看到的&#xff0c;我还以为现在连用个Notepad都要给天线宝宝们捐款了。 文章目录 PART 11 overview…

深入“火星棒球数据API”:用数据解锁棒球世界的无限可能

在棒球运动日益数据化的今天&#xff0c;高效获取和处理海量比赛信息已成为球队制胜、媒体解读、球迷深入理解比赛的关键。“火星棒球数据API” 应运而生&#xff0c;成为连接棒球智慧与大数据技术的桥梁。本文将探讨这一API的核心价值、功能亮点及其如何重塑我们体验和分析棒球…

[附源码+数据库+毕业论文]基于Spring+MyBatis+MySQL+Maven+jsp实现的校园服务平台管理系统,推荐!

摘 要 现代经济快节奏发展以及不断完善升级的信息化技术&#xff0c;让传统数据信息的管理升级为软件存储&#xff0c;归纳&#xff0c;集中处理数据信息的管理方式。本校园服务平台管理系统就是在这样的大环境下诞生&#xff0c;其可以帮助管理者在短时间内处理完毕庞大的数据…

「Java EE开发指南」如何用MyEclipse创建一个WEB项目?(三)

在本文中&#xff0c;您可以找到有关WEB项目的信息。将了解&#xff1a; Web项目结构和参数Web开发生产力工具JSP代码完成和验证 这些特性在MyEclipse中可用。在上文中&#xff08;点击这里回顾>>&#xff09;&#xff0c;我们为大家介绍了Web开发效率工具、Web项目参数…

笨方法学python -练习6

程序&#xff1a; print("Mary had a little lamb.") print("Its fleece was white as {}.".format(snow)) print("And everywhere that Mary went.") print("." * 10) # what′d that do? end1 "C" end2 "h&qu…

【MySQL】Binlog文件占用空间比较大,如何清理

一、前言 在进行一次数据导入之后&#xff0c;发现服务器磁盘爆满&#xff0c;初步判断是数据库产生了大量binlog所致&#xff0c;接下来进行分析处理。 二、分析 1、查看磁盘空间 通过df -h命令&#xff0c;查看磁盘空间占用情况 2、查找占用文件或目录 通过命令&#xff1a;…

车载诊断架构 --- 非易失性存储器(NVM)相关设置项

我是穿拖鞋的汉子,魔都中坚持长期主义的汽车电子工程师。 老规矩,分享一段喜欢的文字,避免自己成为高知识低文化的工程师: 做到欲望极简,了解自己的真实欲望,不受外在潮流的影响,不盲从,不跟风。把自己的精力全部用在自己。一是去掉多余,凡事找规律,基础是诚信;二是…

C#: 输入对话框窗口函数

这是一个 C# 输入对话框函数&#xff0c;主要功能包括&#xff1a; 基础功能&#xff1a;创建带标题、提示文本和输入框的对话框&#xff0c;返回用户输入或空字符串&#xff08;取消时&#xff09; 增强特性&#xff1a; 支持必填项验证支持正则表达式格式验证实时错误提示与…

PCB工艺学习与总结-20250628

一、PCB板材 1、结构组成 基板:作为电路板的支撑体,通常由绝缘材料制成,如玻璃纤维或塑料。 导线:用于连接电路板上的各个元件,传输电流和信号。 元件:包括电阻、电容、电感、二极管、晶体管等,用于实现电路的各种功能。 焊盘:用于焊接元件引脚的金属片,确保元件…

VUE2与VUE3项目环境变量创建与使用区别

环境变量文件是项目中的.env开头的文件&#xff0c;如下图&#xff1a; 下图是VUE2.env文件中的配置&#xff0c;是以VUE_APP开头的 VUE_APP_PAGE_TITLE系统 VUE_APP_SERVICE_PREFIX/gateway/xxxxx在使用时 只需要 调用 process.env.VUE_APP_SERVICE_PREFIX 就可以获取到值 而…

php flush实时输出线上环境好使,本地环境等待一段时间后一次性输出结果的原因

近期对接deepseek接口时为了拥有较好的用户体验&#xff0c;等待答案返回时采用了flush分布输出&#xff0c;但是线上环境下可以正常分布输出&#xff0c;同样代码在本地总是等待许久后一次性出结果&#xff0c;排查许久&#xff0c;发现竟然是本地和线上不同的php加载模式导致…

【世纪龙科技】东风风光580汽车维护与底盘拆装检修仿真教学软件

在职业院校汽车专业的教学实践中&#xff0c;传统的汽车维护与底盘拆装实训常面临诸多挑战。实车操作不仅存在安全隐患&#xff0c;设备损耗、教学成本高的问题也不容忽视&#xff1b;部分学生因操作机会有限&#xff0c;难以系统掌握规范流程和仪器使用&#xff0c;教师在教学…

React大型项目目录结构设计

以下这种结构设计适合以下场景&#xff1a; 10人以上开发团队协作长期维护的中大型项目需要高度模块化和可扩展性的项目需要严格类型检查的TypeScript项目 根据实际需求&#xff0c;可以适当调整模块划分和目录结构&#xff0c;但保持核心的模块化思想和分层架构是关键。 Re…

【C语言】超市管理系统丨完整源码与实现解析

通过这个完整的超市管理系统&#xff0c;您将掌握C语言核心数据结构与文件操作技术 设计思路与核心数据结构 本系统使用动态数组管理商品数据&#xff0c;支持商品增删改查、文件存储和数据统计功能。系统采用模块化设计&#xff0c;分为商品管理、文件操作和用户界面三大模块…

RK3506开发板:多核异构架构赋能高可靠性工业应用

在工业4.0与物联网技术深度融合的当下&#xff0c;企业对嵌入式计算平台的需求正从单一性能向高能效、高可靠、高实时性方向演进。RK3506开发板凭借其创新的三核A7单核M0多核异构架构、紧凑型设计及丰富的外设资源&#xff0c;成为电力、工业网关、HMI&#xff08;人机界面&…

【AIOT 领域-拆解智能对话全生态需求】​​全双工对话-单工对话-半双工

在万物互联的物联网时代&#xff0c;设备间的"对话方式"直接决定了数据传输的效率与可靠性。今天带大家深入解析三种基础通信模式&#xff0c;从工业传感器到5G基站&#xff0c;一文看透数据传输的底层逻辑&#xff01; &#x1f50c; 单工通信&#xff1a;信息流的…

国产数据库华为高斯的GaussDB创建数据表和添加字段及注释

国产数据库华为高斯的GaussDB创建数据表和添加字段及注释 &#x1f538; 一、创建数据库&#x1f538; 二、修改数据库&#xff08;重命名&#xff09;&#x1f538; 三、创建数据表并加字段注释&#x1f538; 四、修改表结构1. 添加字段➕ 添加字段的注释2. 修改字段类型3. 修…