QSS 基础

如果你会 CSS，那么 QSS 对你来说将会非常简单，QSS 的语法和 CSS 的愈发非常相似，但也有些不同，有些 CSS 的东西在 QSS 里被去掉了，QSS 也加了些自己特有的东西，不过大多数还是差不多的，下面以修改 QLabel 的样式为例，学习 QSS 的基础语法。

QLabel
{
    /* 相当于 font: bold 50px "Snell Roundhand"; */
    font-size: 50px;
    font-weight: bold;
    font-family: "Snell Roundhand";

    /* 文本的颜色 */
    color: white;

    /* 相当于 background: lightgray url(:/resources/horizontal-add-line.png); */

    background-color: lightgray;
    background-image: url(:/resources/horizontal-add-line.png);

    /* 还能使用渐变 */
    background-color: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,
                      stop: 0 #FFFFFF, stop: 1 #BB000000);

    /* 相当于 border: 5px solid gray; */
    border-width: 5px;
    border-color: gray;
    border-style: solid;

    /* 边框圆角 */
    border-radius: 10px;

    padding: 5px;
    margin: 10px;
}

下图是上面 QSS 的效果图:

下面具体介绍一下 QSS 的基础语法:

• 设置字体用 font, 语法为：

font: [font-style] [font-variant] [font-weight] [font-size] [font-family]

/* 按顺序设置，可以忽略其中某些值，例如：*/
font: italic bold 12px arial, sans-serif;

设置字体用 font-style, font-size, font-weight, font-family（和 CSS 一样，如果字体名字有空格则用双引号引起来，多个字体名字间用逗号分隔，如果第一个字体找不到则用第二个，第二个找不到则用第三个，依此类推）

• 设置文本颜色用 color
• 设置背景颜色用 background-color
• 设置背景使用 background，可以设置如下属性：
• background-color
• background-position
• background-size
• background-repeat
• background-origin
• background-clip
• background-attachment
• background-image

/* 可以忽略其中某些值，例如：*/background: lightgray url(:/resources/horizontal-add-line.png);

• url 中的路径可以是：

  • 资源文件的路径
  • 绝对路径
  • 相对于可执行文件的相对路径

• 设置背景图片用 background-image（先绘制背景色，然后再绘制背景图片，如果背景图片是半透明的就可以看到背景色了），默认水平和垂直重复平铺满整个 widget，同时一起设置的还可以有 background-repeat、background-position、background-attachment

• background-repeat，可选的值有：

  • repeat-x：水平方向重复
  • epeat-y：垂直方向重复
  • no-repeat：不重复

• background-position，可选的值有：

  • top left
  • top center
  • top right
  • center left
  • center center
  • center right
  • bottom left
  • bottom center
  • bottom right
  • xpos ypos

• background-attachment，可选的值有：

  • scroll：背景随滚动条滚动
  • fixed：背景不随滚动条滚动

• 设置背景还可以用 border-image，请参考 Border Image 一节

• 设置边框用 border-width, border-style, border-color

• 设置边框用 border，语法为：

border: border-width border-style border-color

/* 例如：*/
border: 1px solid gray;

• 设置圆角边框用 border-radius，但是如果给定的半径大于对应边的一半，圆角就没有效果了，在 CSS 里没有这个问题
• 支持渐变 gradient: qlineargradient、qradialgradient、qconicalgradient，渐变的坐标不是用像素表示，而是把渐变的坐标的最小值定义为 0，最大值定义为 1，这种技术又叫 Normalization，通俗点说就是用比例表示，开始处用 0 表示，结束处用 1 表示，不管渐变的范围是 200px 还是 500px，按比例都能计算出实际的像素坐标，这样做的好处是，不需要关心渐变的像素坐标范围的具体数值。如果不用 Normalization 技术，widget 的大小一变化，就需要修改 QSS 里的坐标值。

/*
x1: 0, y1: 0，渐变的开始位置，为 border rectangle 的左上角（请参考盒子模型）
x2: 0, y2: 1，渐变的开始位置，为 border rectangle 的左下角
stop: 0.1 #FF0000，在 0.0 处渐变的颜色为 #FF0000
stop: 0.6 #00FF00，在 0.6 处渐变的颜色为 #00FF00
stop: 1.0 #0000FF，在 1.0 处渐变的颜色为 #0000FF
*/
background-color: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,
                        stop: 0.1 #FF0000,
                        stop: 0.6 #00FF00,
                        stop: 1.0 #0000FF);

渐变效果比较复杂，可以使用 Qt Desginer 的 QSS 编辑器来帮助我们可视化的实现复杂的渐变效果，如下图:

• Padding 和 margin 参考盒子模型一节
• 设置图标，如 QToolButton 的图标：

/* 图标大小 */
icon-size: 20px 20px;

/* 图标文件 */
qproperty-icon: url(:/resources/tabset-left.png);

• 设置宽度用 width，高度用 height，设置 subcontrol 的时候比较有用
• 设置最小宽度用 min-width，最小高度用 min-height（是 content rectangle 的宽和高）
• 设置最大宽度用 max-width，最大高度用 max-height
• 遗憾的是，QSS 不支持阴影
• 使用 qproperty-xxx 进行设置，因为在 QWidget 及其子类中使用宏 Q_PROPERTY 定义的 WRITE 函数可以在 QSS 中访问：
  • text-align 不支持 QLable，但设置 QLabel 的文本居中可以这样：qproperty-alignment: AlignCenter
  • 甚至可以在 QSS 中设置 QLabel，QPushButton 等的文本：qproperty-text: 'It is amazing'，太魔性了
  • 设置 QLabel 的 word wrap: qproperty-wordWrap: true
  • 设置对齐方式：
    • qproperty-alignment: 'AlignCenter's
    • qproperty-alignment: 'AlignBottom | AlignRight'
  • 设置按钮:
    • 设置 flat: qproperty-flat: true
    • 设置图标: qproperty-icon: url(:/resources/tabset-left.png)
  • QWidget 及其子类还有很多 Q_PROPERTY 定义的 WRITE 函数，想知道就去查帮助文档吧
  • 我们也可以使用宏 Q_PROPERTY 定义自己的 WRITE 函数，然后在 QSS 中使用
  • 不过 qproperty-xxx 也不是万能的，在 :hover, :pressed 等伪类选择器中不生效

上面的 QSS 的虽然只是基础，但是很重要，大多数的时候都要用到它们，用来修改 QLabel，QPushButton，QFrame，QWidget 等的样式还基本够用了，不过如果要修改复杂一点的 widget 的样式，如 QSpinBox，QScrollBar 等，上面的知识是不够的，要想掌握好 QSS，还必须了解 QSS 的选择器，盒子模型，Border-Image，Subcontrol 等，这些在后面都有专门的章节介绍。

QWidget 等的样式还基本够用了，不过如果要修改复杂一点的 widget 的样式，如 QSpinBox，QScrollBar 等，上面的知识是不够的，要想掌握好 QSS，还必须了解 QSS 的选择器，盒子模型，Border-Image，Subcontrol 等，这些在后面都有专门的章节介绍。

原文地址：https://qtdebug.com/qtbook-qss-base/ 博主狗哥的其他博文也写的非常好，从他这里学到了很多，需要的同学可以去看看https://qtdebug.com/qtbook/