QML的语法——样式表QSS

柔光的暖阳◎ 2024-04-07 15:14 70阅读 0赞

#### 一、QSS介绍 ####

如果学过前端的话，QSS(Qt style sheet)就很好理解了。QSS 是一个非常强大的用于自定义控件外观的机制.它的概念,术语以及语法都是受到了 HTML CSS 的启发。 QSS是用来设置界面样式的, 设置的方法就是类似于 CSS,通过以一定规则组织的字符串来给界面设置样式, 而不用我们调用控件对象的接口或子类化 QStyle 去设置样式。

#### 二、基本语法 ####

样式表由一系列的样式规则组成。一条样式规则由一个选择器和一个声明语句组成，选  
择器指明了哪个（或者说是哪种）控件将会受规则影响，而声明语句则指明了哪些属性会设  
置到这个（这些）控件. 语法如下:

selector { attribute: value; }

在上面这条语句中, selector 代表选择器, 指明了哪个(或者说是哪种)控件将会受到  
规则影响. \{attribute: value;\}代表声明语句, 其中 attribute 表示属性, value 表示该  
属性的值, 属性与它的值之间必须以冒号( : )隔开, 属性值后面必须以分号( ; )结束,  
表示这条属性已经设置完成.  
举个例子：

QPushButton{ color: red;}
    //表示将我们的应用程序中所有的 QPushbutton 对象以及它
    //的子类对象应该使用 red 作为它们的前景色(即字体的颜色);

#### 三、选择器 ####

又叫通配符选择器，通用选择器用( \* )来表示, 它表示匹配程序中所有的 widget，格式如下

* { 属性: 值; }

举个例子，将程序中所有 widget 的字体大小都设置为 20px 大小, 字体采用微软雅黑.：

*{font: normal 20px “微软雅黑” ;}

#### 四、类型选择器 ####

格式：

类名 { 属性: 值; }

类名即 Widget 类名, 由 QObject :: metaObject() :: className()获取, 类型选择器匹配所有该类以及该类的派生类的对象，举个例子:

QPushButton {color: blue;}
    // 这条语句表示, 程序中所有的 QPushButton 类和它的派生类的对象, 它们的前景色(即文字
    // 颜色)被设置为蓝色.

Qt 样式表使用 widget 的 QObject::className()来决定何时应用类型选  
命名空间之中(或它是一个嵌套类)， QObject::className()会返回( :: ),选择器相冲突. 为了解决这个问题，当为命名空间中 widget 使用类将” :: ”替换成” -- ”, 下面即将介绍的类选择器也是一样. 例子如下:

![b4badd7d609049ed805eb71ea5c933f3.png][]  
类型选择器会匹配所有该类以及该类的派生类的对象, 所以我们在程序中, 有时为了统一那些具有相似性的控件的样式, 可以使用类型选择器, 如, 我们想要为 QSpinBox,QDoubleSpinBox, QDateTimeEdit, QTimeEdit, QDateEdit 等这些编辑框的控件设置一些相同的样式, 因为它们都是 QAbstractSpinBox 类的派生类, 因此可以如下写:

QAbstractSpinBox{
        min-height: 30px;
        max-height: 30px;
        border-width: 1px;
        rder-style: solid;
        order-color: gray;
        padding: 0px;
    }

#### 五、类选择器 ####

格式：

.类名 { 属性: 值; }

这里的类名与类型选择器中的类名一样, 不同的是, 类选择器的类名前面有一个( . ), 这种  
选择器只会匹配该类的所有对象, 而不会匹配其派生类的对象.  
举个例子：

.QPushButton{
        color: blue;
    }

#### 六、ID 选择器 ####

格式:

#id{ 属性: 值; }

这里的 id 指的是 objectName, 每个 QObject 类及其派生类都有的一个属性, “\#” + objectName  
构成了我们的 ID 选择器, 它匹配所有 objectName 为 ID 选择器所指定的名称的对象, 为其设  
置样式. 例如

#button_1{
        color: red;
    }

注意点:  
1. objectName 是大小写敏感的.  
2. “\#”与 ID 之间不可以有空格  
3. 由于 objectName 是所有 QObject 类对象的一个属性, 在运行过程中可以改变, 所以一般  
情况下, 要使用 ID 选择器时, 保证 objectName 不要在运行时被改变, 否则重新加载  
stylesheet 文件时, 对应的 ID 选择器将不会匹配到原来的控件.  
4. 由于 objectName 允许字符串中含有空格, 但是 ID 选择器中, ID 是从紧跟\#后的第一个字  
符开始直到遇到空格或“\{”之间的字符串, 因此, 如果是为了使用 ID 选择器而设置  
objectName, 则 objectName 中不能含有空格  
5. 由于任何对象的 objectName 都可以出现重复, 因此在设置 objectName 时, 尽量保持其  
唯一性  
6. Qt 官方给出的 ID 选择器的格式为:

类名#id{ 属性: 值; }

但实际上不加类名也是可以的(加了类名的 ID 选择器在 CSS 中被称为交集选择器),在正  
式开发中, 还是建议加上类名, 因为这样可以看出这个 id 选择器所匹配的对象的类型,  
有利于提高阅读性。基于以上特点, 我们在设置 objectName 时, 一般使用下划线”\_”连接的多个单词表明此对象的功能

QPushButton#settings_popup_fileDialog_button{
        min-height: 31px;
        min-width: 70px;
        border: 1px solid black;
        color: #F0F0F0;
        min-height: 10px;
        border-radius:3px;
        background: qlineargradient(spread:pad, x1:0, y1:0, x2:0, y2:1,
        stop:0 #454648, stop:1 #7A7A7A);
    }

#### 七、后代选择器 ####

格式：

选择器 1 选择器 2{ 属性: 值; }

这个选择器表示: 在选择器 1 匹配的所有对象中, 找到选择器 2 所匹配的所有后代对象, 并  
给它们设置样式  
注意点:  
1. 后代选择器必须用空格隔开每个选择器  
2. 后代选择器可以通过空格一直延续下去, 例如:  
选择器 1 选择器 2 选择器 3 … 选择器 N\{ 属性: 值; \}  
3. 顾名思义, 后代选择器不仅包含”儿子”, 还包含”孙子”, “重孙子”等, 一般来说, 只要 B 控  
件显示在 A 控件上, 那么 B 控件就是 A 控件的后代.  
4. 后代选择器不仅可以使用类型选择器, 还可以使用类选择器, id 选择器等.  
5. Qt 中, 各控件的父子关系:各控件的父子关系并非我们在创建对象时所指定的那样, 实际父子关系取决于如何布局.

举个例子：

后代选择器一般用于指定特定类的后代的样式, 例如在我的应用程序中, 有很多个相似的对  
话框, 它们中包含一些样式相同的按钮, 那么我可以使用后代选择器为他们指定样式, 例如:

BaseDialog QPushButton{
        min-width: 120px;
        min-height: 40px;
        max-width: 120px;
        max-height: 40px;
        font-size: 20px;
        padding: 0px;
    }

八、子元素选择器

#### 格式： ####

选择器 1 >选择器 2 { 属性: 值; }

子元素选择器表示找到指定选择器所匹配的对象中的所有特定直接子元素然后设置属性,即找到选择器 1 匹配到的对象中的被选择器 2 匹配盗的直接子元素然后设置属性

举个例子

.QGroupBox > .QCheckBox{
        color: blue;
    }

注意：

1. 子元素选择器必须用”>”连接, “>”两边有没有空格都可以, 但是不建议写空格, 因为会与  
后代选择器的连接符混淆.  
2. 子元素选择器只会查找”儿子”, 不会查找其他后代.  
3. 子元素选择器不仅可以使用类型选择器, 还可以使用类选择器,id 等选择器  
4. 子元素选择器不能通过”>”一直延续下去, 只能有一个”>”  
5. 由于 Qt 中有继承关系的 Widgets 较多, 在使用子元素选择器时, 请特别注意继承关系,

#### 九、属性选择器 ####

格式：

[attribute=value]{ 属性: 值; }
    [attribute|=value]{ 属性:值; }
    [attribute~=value]{ 属性:值; }

attribute=value 表示匹配有特定属性 attribute, 并且**值为 value 的**所有控件, 然后设置样式;  
attribute|=value 表示匹配有特定属性 attribute, 并且**值以 value 开头的**所有控件, 然后设置  
样式;  
attribute~=value 表示匹配有特定属性 attribute, 并且**值包含 value 的**所有控件, 然后设置样  
式;  
举个例子：

[objectName|="button"]{
        color: red;
    }
    // 这表示将 objectName 属性以 button 开头的所有控件的前景色设置为红色

#### 十、子控件选择器 ####

格式：

类型选择器::子控件{ 属性: 值; }
    类选择器::子控件{ 属性: 值; }

表示对类型选择器或类选择器指定的所有控件的子控件设置样式;

QComboBox::down-arrow{
        image: url(:/res/arrowdown.png);
    }

[b4badd7d609049ed805eb71ea5c933f3.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/07/530b691fcd164913a71f6bdf894ac8ae.png