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

Qt之样式表设置总结。。。持续更新

article 2024/12/2 13:35:07

参考文章链接如下：
Qt样式表之一：Qt样式表和盒子模型介绍
Qt样式表之二：QSS语法及常用样式
Qt样式表之三：实现按钮三态效果的三种方法
Qt样式表之一：QSS名词解释
Qt样式表之二：常用控件qss
Qt样式表之三：QSS奇技淫巧

样式表介绍

Qt样式表是一个可以自定义部件外观的十分强大的机制，可以用来美化部件。Qt样式表的概念、术语和语法都受到了HTML的层叠样式表（Cascading Style Sheets, CSS)的启发，不过与CSS不同的是，Qt样式表应用于部件的世界。

样式表特性：
1）层叠性：是处理样式发生冲突的一种能力，只有在多个选择器匹配到同一个 Widget 才会发生层叠性。

pBtn1->setStyleSheet("QPushButton{color: yellow;}");
pBtn1->setStyleSheet(".QPushButton{color: blue;}");

吃下栗子：这两个选择器匹配到同一个按钮，但后一个样式会覆盖前面的样式。

2）级联效应：QSS可以在QApplication、父部件、子部件中设置。冲突发生时，不论冲突规则的特殊性，部件自身的样式表总优先于任何继承样式表。考虑下面的例子。首先，我们在QApplication中设置样式表：

qApp->setStyleSheet("QPushButton { color: white }");
然后，我们设置QPushButton的样式表：

myPushButton->setStyleSheet("color: blue");

QPushButton样式表强制QPushButton（以及任何子部件）显示蓝色文字，尽管应用程序范围内的样式表提供的规则更具体。

3）继承性：在经典的CSS中，当字体和颜色没有明确设置时，它就会自动从父继承。当使用QSS时，部件不会自动从父继承字体和颜色。例如，一个QGroupBox中包含QPushButton：

qApp->setStyleSheet("QGroupBox { color: red; } ");

QPushButton不会继承其父QGroupBox的颜色，而是显示系统的颜色。

设置样式表的方法

使用代码设置样式表

**样式表使用文本描述，可以使用 QApplication:: setStyleSheet() 函数将其设置到整个应用程序上，也可以使用 QWidget::setStyleSheet() 函数将其设置到一个指定的部件（还有它的子部件）上。如果在不同的级别都设置了样式表，那么Qt会使用所有有效的样式表，这被称为样式表的层叠。**下面来看一个简单的例子。

新建Qt Gui应用，项目名称为myStyleSheets，类名为MainWindow，基类保持QMainWindow不变。建立好项目后进入设计模式，向界面上拖入一个PushButton和一个Horizontal Slider，然后在mainwindow.cpp文件中的构造函数里添加如下代码：

//设置pushButton的背景颜色为黄色
ui->pushButton->setStyleSheet("background:yellow");
//设置horizontalSlider的背贵为蓝色
ui->horizontalSlider->setStyleSheet("background:blue");

**这样便设置了两个部件的背景色。不过像这样调用指定部件的setStyleSheet()函数只会对这个部件应用该样式表，如果想对所有的相同部件都使用相同的样式表，那么可以在它们的父部件上设置样式表。因为这里两个部件都在MainWindow上，所以可以为MainWindow设置样式表。**先注释掉上面的两行代码，然后添加如下代码：

this->setStyleSheet("background:blue");

这样，以后再往主窗口上添加的所有QPushButton部件和QSlider部件的背景色都会改为这里指定的颜色。

在设计模式（Ui界面）中设置样式表

除了使用代码来设置样式表外，也可以在设计模式中为添加到界面上的部件设置样式表，这样更加直观。先注释掉上面添加的代码，然后进入设计模式。在界面上右击，在弹出的菜单中选择“改变样式表”，这时会出现编辑样式表对话框，在其中输入如下代码：

QPushButton{
   
}

注意光标留在第一个大括号后。然后单击上面“添加颜色”选项后面的下拉箭头，在弹出的列表中选择“background-color”一项。这时会弹出选择颜色对话框，随便选择一个颜色，然后单击“确定按钮”，这时会自动添加代码：

QPushButton{
   
	background-color: rgb(0, 0, 255);
}

可以看到，在这里设置样式表不仅很便捷而且很直观，不仅可以设置颜色，还可以使用图片，使用渐变颜色或者更改字体。在设计模式，有时无法正常显示设置好的样式表效果，不过运行程序后会正常显示的。这里是在MainWindow界面上设置了样式表，当然，也可以按照这种方法在指定的部件上添加样式表。

注：程序设置的样式表比ui文件里设置的优先级更高。

盒子模型介绍

使用Style Sheets时,所有的部件都被视为有四个同心矩形的盒子(box)：边缘矩形(margin rectangle)，边框矩形(border rectangle)，填充矩形(padding rectangle)和内容矩形(content rectangle)。盒子模型对四个矩形有详细的描述，如下图所示：
在这里插入图片描述
边缘，边框宽度和填充属性默认为0。这样四个矩形(margin, border, padding和content)重合。

使用background-image属性，你可以为部件指定背景图片。默认地，背景图片只画在边框以内。背景图片不随部件大小改变而改变。提供一个随部件大小改变而改变的背景或皮肤，必须使用border-image。因为border-image属性提供了一个备选背景，所以并不需要再为部件指定一个背景图片。在两者都指定的情况下，border-image将画于background-image之上。

备注：除了内容外, 其他三个部分均不能单独设置颜色, 只能设置其宽度, 并且是以像素为单位。Widget 的width和height属性指的是整个盒子的宽度和高度。

样式表语法

样式规则：选择器+声明（属性）

QSS包含了一个样式规则，**一个样式规则由一个选择器和声明组成，选择器指定哪些部件由规则影响，声明指定哪些属性应该在部件上进行设置。**例如：

QPushButton {
    color: red }

上面的例子中QPushButton是选择器，{ color: red }是声明，该规则指定QPushButton及其子类（例如：MyPushButton）应使用红色作为前景色。

几个选择器可以指定相同的声明，使用逗号（,）来分隔选择器。例如：

QPushButton, QLineEdit, QComboBox {
    color: red }

相当于三个规则序列：

QPushButton {
    color: red }
QLineEdit {
    color: red }
QComboBox {
    color: red }

声明部分的规则是一个属性值对（property: value）列表，包含在花括号中，以分号分隔。例如：

QPushButton {
    color: red; background-color: white }

参考助手：Qt Style Sheets Reference中List of Properties部分。

注：QSS通常不区分大小写（即：color、Color、COLOR、cOloR指同一属性），唯一例外就是类名（class names）、对象名（object names）、属性名（property names）区分大小写。

选择器

下表总结了最有用的选择器，所有示例使用了选择器中最简单的类型，类型选择器QSS支持所有的selectors defined in CSS2。
在这里插入图片描述
思维导图如下：

选择器::辅助控制器(sub-control)

辅助控制器一词是相对于选择器存在的，可以理解为我们选择了一个控件的子部件，例如一个 QcheckBox，这个部件它分为两个部分，文本部分和可以点击的小窗口的部分，如下图所示。而这个可点击的小窗口部分我们要单独的设置，就要再次分离出来，就需要::indicator（QCheckBox 有这个辅助控制器）来设置，例子如下：

/*说明是在QCheckBox中的指示符( indicator）宽为20px，height 为20px。*/
QCheckBox::indicator{
   
	width:20px;
	height:20px;
}

辅助控制器是用双冒号进行指定。如果没有::indicator那么我们这个小例子将是对整个 QCheckBox 设置的，使用了辅助控制器的时候就自动分离出这个小窗口，对小窗口进行设置。不同的选择器有不同的辅助控制器，具体可查看下表。
在这里插入图片描述

选择器:伪状态（ pseudo-states)

除了辅助控制器对一个部件的分离，样式表还可以根据窗口部件的各个状态来设置窗口。例如 hover 表示鼠标划过时的状态，例子如下：

/*例子说明只有当鼠标滑过复选框文本时变为red*/
QCheckBox:hover{
   
	color: red;
}

伪状态列表如下：
在这里插入图片描述

思维导图如下：

选择器:逻辑否(!)+伪状态

有时候我们在设置某种状态的属性时，希望同时在某些非(!)的状态下设置，这个时候我们就要用(!)来选择某种状态，比如 !checked 、!has-children（没有子目录）等等。

声明（属性）

它是一个窗口部件所固有的特征、性质，每一个窗口部件都会有属于他们自己的属性。如前面做的小例子中我们一直未曾提过 color,width,height 等。组合多个属性同时使用设计出多种效果。

Box属性

width：宽度
height：高度
max-width：最大宽度
max-height：最大高度
min-width：最小宽度
min-height：最小高度
margin：边距尺寸。又可细分为margin-left、margin-top、margin-right及margin-bottom。
padding：填充尺寸。又可细分为padding-left、padding-top、padding-right及padding-bottom。