第10章 QSS快速入门

10.1 何为Qt样式表

由于Qt样式表的引入，定制Qt部件的外观样式变得非常简单。

Qt样式表的思想很大程度上是来自于HTML的层叠式样式表(CSS)， 通过调用QWidget::setStyleSheet()或QApplication::setStyleSheet()， 你可以为一个独立的子部件、整个窗口，甚至是整个个应用程序指定一个样式表。

样式表是通过QStyle的一个叫做QStyleSheetStyle的特殊子类来实现的。 

这个特殊的子类实际上是其他的系统特定风格类的包裹类，它会把通过样式表指定的自定义外观风格应用在底层的系统特定风格之上。

好文章，来自【福优学苑@音视频+流媒体】

10.2 样式表语法基础

Qt样式表与CSS的语法规则几乎完全相同，如果你已经了解了CSS，完全可以跳过本节。

一个样式表由一系列的样式规则构成。每个样式规则都有着下面的形式：

selector { attribute: value }

选择器(selector)部分通常是一个类名(例如QComboBox)，当然也还有其他的语法形式。

属性(attribute)部分是一个样式表属性的名字，

值(value)部分是赋给该属性的值。

为了使用方便，我们还可以使用一种简化形式：

selector1, selector2, ..., selectorM {

    attribute1: value1;

    attribute2: value2;

    ...

    attributeN: valueN;

}

这种简化形式可以同时为与M个选择器相匹配的部件设置N种属性。

例如：

QCheckBox, QComboBox, QSpinBox {

    color: red;   //字体颜色：红

    font: bold;

}

这个规则设置了所有的QCheckBox、QComboBox和QSpinBox的前景色、背景色和字体。

  好文章，来自【福优学苑@音视频+流媒体】

10.3 方箱模型

在样式表中，每个部件都被看作是一个由四个同心相似的矩形组成的箱体：

空白(margin)、边框(border)、填充(padding)和内容(content)。

对于一个平面部件——例如一个空白、边框和填充都是0像素的部件——而言，这四个矩形是完全重合的。

空白区域位于边框外，并且总是透明的。

边框为部件提供了四周的框架，其border-style属性可以设置为一些内置的框架风格，如inset、outset、solid和ridge。

填充在边框和内容区域之间提供了空白间隔。

10.4 前景与背景

部件的前景色用于绘制上面的文本，可以通过color属性指定。

背景色用于绘制部件的填充矩形，可以通过background-color属性指定。

背景图片使用background-image属性定义，它用于绘制由background-origin指定的矩形区域（空白、边框、填充或内容）。背景图片在矩形区域内的对齐和平铺方式可以通过background-position和background-repeat属性指定。

 好文章，来自【福优学苑@音视频+流媒体】 

QFrame {

    margin: 10px;

    border: 2px solid green;

    padding: 20px;    

    background-image: url(qt.png);

    background-position: top right;

    background-origin: content;

    background-repeat: none;

}

在这个例子中，QFrame四周的空白、边框和填充值都是一样的。

实际上margin属性可以在上下左右四个方向分别指定我们需要的不同值，例如：

QFrame {

    margin: 14px 18px 20px 18px;

}

同时，我们也可以分别指定margin-top、margin-right、margin-bottom、margin-left四个属性。

QFrame {

    margin-top: 14px;

    margin-right: 18px;

    margin-bottom: 20px;

    margin-left: 18px;

}

好文章，来自【福优学苑@音视频+流媒体】

虽然目前我们仅仅使用了QFrame作为例子，但是我们也可以同样的将这些属性应用于任何一个支持方箱模型的Qt部件，例如：QCheckBox、 QLabel、QLineEdit、QListView、QMenu、QPushButton、QTextEdit、和QToolTip。

10.5 可缩放样式

在默认情况下，通过background-image指定的背景图片会自动重复平铺，以覆盖部件的整个填充矩形（即边框里面的那个区域）。

///注意区别：

如果我们想创建能够随着部件大小自动缩放而不是平铺的背景，我们需要设置一种称之为“边框图片”的东东。

注意

“边框图片”可以通过border-image属性指定，它同时提供了部件的背景和边框。

一个“边框图片”被分为九个部分（九宫格），有点向tic-tac-toe游戏的棋盘。

当一个部件的边框被填充时，四角的格子通常不会发生变化，而其余的五个格子则可能被拉伸或平铺以填充可用空间。

当指定一个“边框图片”时，除了图片本身，我们还必须指定用来分割九宫格的四条分割线。同时我们还必须指定非边角的格子是应该平铺还是拉伸，以及边框的宽度（用来确定边角格子的大小，防止边角被缩放变形）。

例如，下面的样式表定义了上图中的button：

QPushButton {

    border-width: 4px;

    border-image: url(button.png) 4 4 4 4 stretch stretch;

}

另外，“边框图片”还应该含有alpha通道，以使背景能够在边角处露出来。

好文章，来自【福优学苑@音视频+流媒体】

10.6控制大小

min-width和min-height两个属性可以用来指定一个部件的内容区域的最小大小。

这两个值将影响部件的minimumSizeHint()，并在布局时被考虑。

例如：

QPushButton {

    min-width: 68px;

    min-height: 28px;

}

如果该属性没有被指定，最小大小将从部件的内容区域和当前样式中继承。

10.7 伪状态

部件的外观可以按照用户界面元素状态的不同来分别定义，这在样式表中被称为“伪状态”。

例如，如果我们想在一个push button在被按下的时候具有sunken的外观，我们可以指定一个叫做 :pressed 的伪状态。

QPushButton {

    border: 2px outset green;

}

QPushButton:pressed {

    background: gray;

}

好文章，来自【福优学苑@音视频+流媒体】

下面是可用的伪状态列表：

表1. 伪状态列表

伪状态 描述

好文章，来自【福优学苑@音视频+流媒体】

10.8使用子部件定义微观样式

许多部件都包含有子元素，这些元素可以称为“子部件”。

Spin box的上下箭头就是子部件最好的例子。

子部件可以通过::来指定，例如QDateTimeEdit::up-button。

定义子部件的样式与定义部件非常相似，它们遵循前面提到的方箱模型（即它们可以拥有自己的边框、背景等），并且也可以和伪状态联合使用（例如QSpinBox::up-button:hover）。

下表列出了可用的子部件类型：

表2. 子部件列表

子部件 描述

• 子部件	描述
  ::down-arrow	combo box或spin box的下拉箭头
  ::down-button	spin box的向下按钮
  ::drop-down	combo box的下拉箭头
  ::indicator	checkbox、radio button或可选择group box的指示器
  ::item	menu、menu bar或status bar的子项目
  ::menu-indicator	push button的菜单指示器
  ::title	group box的标题
  ::up-arrow	spin box的向上箭头
  ::up-button	spin box的向上按钮

通过指定subcontrol-position和subcontrol-origin属性，子部件可以被放置在部件箱体内的任何位置。并且，子部件的位置还可以使用相对或绝对的方式进一步的调整。具体选择何种调整方式取决于子部件具有固定的大小，还是会随着父部件而变化。

好文章，来自【福优学苑@音视频+流媒体】

10.9 CSS常用样式

1) CSS文字属性

2) CSS背景样式

3) CSS边框空白

4) CSS框线

以上是建议书写方式，但也可以使用常规书写方式，如下表所示: