Qt样式表QSS详解

向右看齐 2022-12-26 13:28 437阅读 0赞

> qss能实现界面与样式风格相互分离，形成同web相同的可以随意换肤的效果。
> 
> 能实现控件样式的变化，如位置，前景色，背景色，边框是圆角还是方角等。

# 参考文献： #

[Qt样式表QSS基本使用][Qt_QSS]

[qss样式表笔记大全(一)：qss名词解析（包含相关示例）][qss_qss]

# 一、Qss的使用流程 #

qss由一个**选择器**和具体的**样式描述**组成，选择器指定了是对象，样式描述指定了具体的样式风格。

例如：QPushButton \{ color: red \}

指QPushButton对象的前景色为红色。** 选择器主要包括“类名”，“对象名”，“Qt 属性名”，这三样东西是大小写敏感的，而样式描述是大小写不敏感的，如color 与Color 代表同一属性。**

# 二、选择器（selector） #

选择器的选择方式有七种，如下表：

<table> 
 <tbody> 
 <tr> 
 <td> 选择对象 </td> 
 <td> 示例 </td> 
 <td> 描述 </td> 
 </tr> 
 <tr> 
 <td> 所有控件 </td> 
 <td> * </td> 
 <td> 选择所有当前控件和其下的所有窗口部件 </td> 
 </tr> 
 <tr> 
 <td> 所有某类的控件对象，被其子控件对象继承 </td> 
 <td> QPushButton </td> 
 <td> 选择该类的所有实例，以及该类的子控件实例（允许该类型） </td> 
 </tr> 
 <tr> 
 <td> 所有某类的控件对象，不被其子控件对象继承 </td> 
 <td> .QPushButton </td> 
 <td> 选择该类的所有实例，不包括子控件实例 </td> 
 </tr> 
 <tr> 
 <td> 某类的指定控件对象 </td> 
 <td> QPushButton#objectName </td> 
 <td> 选择该类实例中对象名为objectName的实例 </td> 
 </tr> 
 <tr> 
 <td> 选择匹配某属性的控件对象 </td> 
 <td> QPushButton[y=”0”] </td> 
 <td> 选择该类满足该属性条件的所有实例 </td> 
 </tr> 
 <tr> 
 <td> 某类控件的子控件对象 </td> 
 <td> QFrame &gt; QPushButton </td> 
 <td> 选择指定该类下的直接子控件实例 </td> 
 </tr> 
 <tr> 
 <td> 某类控件的子孙控件对象 </td> 
 <td> QFrame QPushButton </td> 
 <td> 选择指定该类下的所有子孙控件实例 </td> 
 </tr> 
 </tbody> 
</table>

## 2.1 子控件选择器 ##

1）对于复杂的控件，可能会在其中包含其他子控件，如一个QComboxBox 中有一个drop-down 的按钮。那么现在如果要设置QComboxBox 的下拉按钮的话，就可以这样访问：

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

2）子控件选择器是用位置的引用来代表一个元素，这个元素可是一个单一控件或是另一个包含子控件的复合控件。使用subcontrol-origin 属性可以改变子控件的默认放置位置，如：

QComboBox {margin-right: 20px;}
    QComboBox::drop-down {subcontrol-origin: margin;}

3）相对位置属性可以用来改变子控件相对于最初位置的偏移量，如当一个QCombox 的drop-down 按钮被按下时，我们可以用一个内部的小偏移量来表示被按下的效果，如下：

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

4）绝对位置属性允许子控件改变自己的位置和大小而不受引用元素的控件。一但位置被设定了，这些子控件就可以被当成一般的widget 来对待，并且可以使用盒模型。

## 2.2 伪选择器 ##

1）伪选择器以冒号（:）表示，与css 里的伪选择器相似，是基于控件的一些基本状态来限定程序的规则，如hover 规则表示鼠标经过控件时的状态，而press 表示按下按钮时的状态。如：

QPushButton:hover {Background-color:red;}

表示鼠标经过时QPushButton 背景变红。

2）伪选择器支持否定符号（！），如：

QRadioButton:!hover { color: red }

表示没有鼠标移上QRadioButton 时他显示的颜色是red。

3）伪选择器可以被串连在一起，比如：

QPushButton:hover:!pressed { color: blue; }

表示QPushButton 在鼠标移上却没有点击时显示blue 字，但如果点击的时候就不会显示blue 颜色了。

4）同样可以和之前所讲的子控件选择器一起联合使用，如：

QSpinBox::down-button:hover{ image: url(btn-combobox-press.bmp) }。

5）伪选择器，子控件选择器等都是可以用逗号“,”分隔表示连续相同的设置的，如：

QPushButton:hover,QSpinBox::down-button,QCheckBox:checked{ color: white ;image: url(btn-combobox-press.bmp);}。

# 三、样式描述 #

## 3.1 属性（property） ##

属性，是一个窗口部件所固有的特征，每一个类型的窗口控件都会有属于他们自己的属性，如width，height（辅助选择器才有），color等等，定制控件的不同外观。

属性值，跟在每一个属性后面有一个值，可以是bool，int，10px，red，rgb(0,0,0)等等，根据属性的不同，属性值的类型不同，通过修改指定控件的指定属性的属性值来实现不同的效果。

如示例1：background-color，

实例2：width、height、background-color。

注意：属性是使用逻辑否(!)操作符，如!hover，是鼠标未放在上面的其他状态。

## 3.2 盒模型（box model） ##

盒模型，包含了4个影响布局的矩形。

![70][]

*  **content** rectangle：绘制窗口部件的内容的区域，如文字，图片。
 *  **padding** rectangle：包围content rectangle，由padding属性指定填充操作，主要是窗口部件内容与边缘线（border）之间的空隙，由top，right，bottom和left设置他的大小，缺省为0。
 *  **border** rectangle：包围padding rectangle，为边界预留空间，可认为是窗口的外框线。
 *  **margin** rectangle：最外面的矩形，主要是负责与其他窗口部件间的距离。

注意：若都没有指定，缺省是四个重合在一起。

## 3.3 角弧度（radius） ##

窗口部件4个角弧度，设置radius设置角的弧度，如border-radius：4px。

## 3.4 前景色（color） ##

窗口部件的前景色用户绘制窗口部件上面的文本，由color设置。

## 3.5 背景色（背景图片） ##

窗口部件背景色，用于填充矩形，可通过background-color属性设置。当需要使用图片时，可使用background-image属性，指定资源控制，背景图片在盒模式区域的对齐和平铺方式可通过background-position和background-repeadr属性指定。注意：笔者设置背景图一般直接使用border-image，该属性缺省是缺省是进行平铺和拉伸的。

## 3.6 九宫格（border-image，border-width） ##

用于有边框分割的图像，图像可缩放和平铺其中的每个部分。一个本元素可将图片分成9个区域，四个角区域是不会变化，其他5个区域按照特定的方式进行变化。效果如下图：

使用border-image和border-width属性，语法如下：

QLabel#label_6 {
        border-image:url("E:/111.jpg") 18 16 15 14 repeat repeat;
        border-width:18 16 15 14;
    }

**berder-image**: **url** \[top left bottom right \[repeat|no-repeat repeate|no-repeat\];

**berder-width**: **top left bottom right;**

技巧：这里笔者提供一个小技巧，可先仅使用border-image: url top leftbottom right来确认边界，如下表的label\_2。

## 3.7 渐变色（Gradient） ##

*  线性渐变（qlineargradient）：两点连成的线，线上设置不同颜色，位置范围\[0,1\]，参考示例。
 *  圆心辐射渐变（qradialgradient）：从圆心开始向外辐射，圆心属性为cx，cy，半径为radius，fx是stop为0时相对半径范围的位置，参考示例。
 *  圆心角度渐变（qconicalgradient）：从圆心开始，以x轴为0°逆时钟转，圆心属性为cx，cy，

## 示例：QPushButton使用qlineargradient线性渐变色 ##

QPushButton#pushButton_3 {
        background: qlineargradient( x1:0, y1:0,x2:1, y2:1,
                                     stop:0 rgba(0, 0, 0, 255),
                                     stop:0.5 rgba(0,0, 0, 0),
                                     stop:1 rgba(255, 255, 255, 255));
    }

![70 1][]

## 示例：QPushButton使用qradialgradient圆心辐射渐变色 ##

QPushButton#pushButton_4 {
        background: qradialgradient( cx:0.5, cy:0.5, radius:0.5, fx:0.5, fy:0.5, 
                                  stop:0 rgba(0, 0, 0, 255), 
                                  stop:0.5 rgba(0, 0, 0, 0),
                                  stop:1 rgba(255, 255, 255, 255))
    }

![70 2][]

QPushButton#pushButton_6 {
        background: qradialgradient( cx:0.5, cy:0.5, radius:0.5, fx:1.0, fy:0.0, 
                                  stop:0 rgba(0, 0, 0, 255), 
                                  stop:0.5 rgba(0, 0, 0, 0),
                                  stop:1 rgba(255, 255, 255, 255))
    }

![70 3][]

## 示例：QPushButton使用qconicalgradient圆心角度渐变 ##

QPushButton#pushButton_5 {
        background:qconicalgradient( cx:0.5, cy:0.5, angle:0, 
                                  stop:0 rgba(255, 0, 0, 255), 
                                  stop:0.25 rgba(0, 255, 0, 255), 
                                  stop:0.5 rgba(0, 0, 255, 255), 
                                  stop:0.75 rgba(0, 0, 0, 0), 
                                  stop:1.0 rgba(0, 0, 0, 255));
    }

![70 4][]

QPushButton#pushButton_7 {
        background:qconicalgradient( cx:0.4, cy:0.4, angle:45, 
                                  stop:0 rgba(255, 0, 0, 255), 
                                  stop:0.25 rgba(0, 255, 0, 255), 
                                  stop:0.5 rgba(0, 0, 255, 255), 
                                  stop:0.75 rgba(0, 0, 0, 0), 
                                  stop:1.0 rgba(0, 0, 0, 255));
    }

![70 5][]

[Qt_QSS]: https://blog.csdn.net/u011822862/article/details/52187561?utm_medium=distribute.pc_relevant.none-task-blog-title-2&spm=1001.2101.3001.4242
[qss_qss]: https://blog.csdn.net/qq21497936/article/details/79401577
[70]: /images/20221120/572da82dcd6246ba8d391b04a578a617.png
[70 1]: https://img-blog.csdn.net/20180228155950158?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvcXEyMTQ5NzkzNg==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70
[70 2]: https://img-blog.csdn.net/20180228160009159?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvcXEyMTQ5NzkzNg==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70
[70 3]: https://img-blog.csdn.net/20180228160023335?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvcXEyMTQ5NzkzNg==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70
[70 4]: https://img-blog.csdn.net/20180228160045822?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvcXEyMTQ5NzkzNg==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70
[70 5]: https://img-blog.csdn.net/20180228160055692?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvcXEyMTQ5NzkzNg==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70