QT之初识QSS

最新推荐文章于 2023-10-16 00:00:00 发布

angry ant

最新推荐文章于 2023-10-16 00:00:00 发布

阅读量361

点赞数 1

CC 4.0 BY-SA版权

分类专栏： QT 文章标签： qt stylesheet c++ gui

本文链接：https://blog.youkuaiyun.com/j_oop/article/details/105940397

QT 专栏收录该内容

4 篇文章

订阅专栏

本文详细介绍了Qt样式表(QSS)的基本概念、语法及应用技巧，包括选择器、属性设置、子控件样式定制等核心内容，帮助初学者快速掌握QSS，实现Qt界面美化。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.QT官方文档学习，提炼如下：

(1)概述

QSS机制用于设置窗体的外观，使用方式与CSS非常相似。

使用setStyleSheet方法设置窗体或者整个应用的样式表（style sheet），如果在不同的窗体继承级别中设置了不同的样式表，QT将从所有设置中派生出一个合适的样式表，因此样式设置是串行的（cascading）。Style Sheet实现在widget style之上，但它能够保证在所有平台上的实际效果都接近于设置，且在Qt Designer中能够预览样式效果。

当style sheet被激活时，QWidget::style()返回的将是一个被包装过的（style sheet）样式，该样式确保所有被激活的style sheet设置都被采用，否则会将绘制操作传给底层依赖于平台的样式（style sheet）。

（2）语法

style sheet由一系列风格设置组成，每一个设置包括两个部分：选择器和声明。选择器用于筛选哪些窗口会被影响，声明确定了窗口的哪些属性会被设置。使用格式：选择器1，选择器2...{属性1：值1；属性2：值2...}

基本的选择器有以下几种：

* 匹配所有widget 举例：*{color : red}，所有窗体color属性都设置为红色

类名匹配该类及其子类的全部实例举例：QPushButton{background_color : white}

属性选择器匹配属性为指定值的widget 举例：QPushButton[flat="false"]。使用~=可测试QStringList中是否含有指定值

ID选择器匹配对象名为指定值的widget 举例： QPushButton#saveButton

层叠选择器匹配指定基类的所有子类举例：QDialog QPushButton，匹配所有派生自QDialog的QPushButton对象

子类选择器匹配指定父类的所有直接子类举例：QDialog >QPushButton，匹配直接派生自QDialog的QPushButton对象

获取子类的控制：

如果要配置比较复杂的窗体样式，我们可能需要获取窗体的子控件，比如组合框种的下拉箭头或者数据框中的上下箭头。选择器可以获取子控件使其遵从某种规则。比如：

//将组合框的下拉箭头设置为默认样式
QComboBox::drop-down { image: url(dropdown.png) }

子控件的位置是以父窗体为参考的。例如：组合框的下拉箭头是在组合框填充矩形的top right位置，但在下拉控件中（drop-down widget）中，下拉箭头位于中心位置（center）。使用subcontrol-origins属性可以设置控件的padding rectangle

//将下拉箭头放在组合框的margin rectangle中，而不是默认的padding rectangle中
 QComboBox {
     margin-right: 20px;
 }
 QComboBox::drop-down {
     subcontrol-origin: margin;
 }

width和height属性用于设置控件大小，如果将子控件设置为指定图片，那么子控件的大小被设置为照片大小。

使用相对位置能够使控件在原位置的基础上发生偏移，比如：在下拉箭头被触发时位置发生偏移表示pressed效果

QComboBox::down-arrow {
     image: url(down_arrow.png);
 }
 QComboBox::down-arrow:pressed {
     position: relative;
     top: 1px; left: 1px;
 }

本想看完QT上qss相关教程的，但使用了一周发现qss的使用只是熟练度的问题，无非是对一些已有的属性不知晓，后面的内容就不总结了。对于和我一样刚接触qss的同学呢，我觉得知道怎么查阅qss文档来完成编码或许更重要：在assistant中搜索style sheet，在界面中找到Qt Style Sheet Reference就可以查阅控件的qss属性了。