[共享]Custom Looks using Qt 4.2 Style Sheets [复制链接]

本文翻译自Qt季刊（Qt Quaterly）第20期。

这个是在别的地方看到的，译文地址已经没了。 原文地址还在，我就整理下

我只是个搬运工

目录

1. 何为Qt样式表

2. 样式表语法基础

3. 方箱模型

4. 前景与背景

5. 创建可缩放样式

6. 控制大小

7. 处理伪状态

8. 使用子部件定义微观样式

    8.1. 相对定位

    8.2. 绝对定位

摘要

由于Qt样式表的引入，定制Qt部件的外观样式变得非常简单。 无论你是想仅仅修改一个现有部件的外观，还是想从零开始设计一套全新的界面风格， 现在都有了一种新的方法而不必再去继承并实现一个QStyle的子类。

1. 何为Qt样式表

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

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

Qt 4.2包含了一个叫做stylesheet的例子来帮助你学习样式表， 这个例子自带了两个样式：Coffee和Pagefold。

上面的Coffee风格自定义了push button、frames和tooltip，但使用了下层的风格 （例如这里是Windows XP风格）来绘制checkbox，combobox和radio button。

Pagefold风格完全重新定义了对话框中使用的所有控件的外观，从而实现了一种独特的，平台无关的外观。

This article is meant to be a quick introduction to style sheets. For a complete description of the Qt Style Sheet syntax, please refer to the online documentation or try out the stylesheet example, located in Qt 4.2's examples/widgets directory.

2. 样式表语法基础

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

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

selector { attribute: value }

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

属性(attribute)部分是一个样式表属性的名字，值(value)部分是赋给该属性的值。

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

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

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

在线文档列出了每种部件支持的所有属性。在本文中，我们只使用最常见的几种通用属性。

3. 方箱模型

在样式表中，每个部件都被看作是一个由四个同心相似的矩形组成的箱体：空白(margin)、边框(border)、填充(padding)和内容(content)。对于一个平面部件——例如一个空白、边框和填充都是0像素的部件——而言，这四个矩形是完全重合的。

空白区域位于边框外，并且总是透明的。边框为部件提供了四周的框架，其border-style属性可以设置为一些内置的框架风格，如inset、outset、solid和ridge。填充在边框和内容区域之间提供了空白间隔。

4. 前景与背景

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

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

如果指定的背景图片具有alpha通道（即有半透明效果），通过background-color指定的颜色将会透过透明区域。这一功能可以使背景图片在多种环境下重复利用。

该例子中使用的样式表如下所示：

在这个例子中，QFrame四周的空白、边框和填充值都是一样的。实际上margin属性可以在上下左右四个方向分别指定我们需要的不同值，例如：

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

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

5. 创建可缩放样式

在默认情况下，通过background-image指定的背景图片会自动重复平铺，以覆盖部件的整个填充矩形（即边框里面的那个区域）。如果我们想创建能够随着部件大小自动缩放而不是平铺的背景，我们需要设置一种称之为“边框图片”的东东。


“边框图片”可以通过border-image属性指定，它同时提供了部件的背景和边框。一个“边框图片”被分为九个部分（九宫格），有点向tic-tac-toe游戏的棋盘。

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


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

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



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

6. 控制大小
min-width和min-height两个属性可以用来指定一个部件的内容区域的最小大小。这两个值将影响部件的minimumSizeHint()，并在布局时被考虑。
例如：
如果该属性没有被指定，最小大小将从部件的内容区域和当前样式中继承。
7. 处理伪状态

部件的外观可以按照用户界面元素状态的不同来分别定义，这在样式表中被称为“伪状态”。例如，如果我们想在一个push button在被按下的时候具有sunken的外观，我们可以指定一个叫做 :pressed 的伪状态。
下面是可用的伪状态列表：


当按下按钮时，我们可以把菜单指示器从原来的位置向右下方移动几个像素来模拟按钮按下的状态。




8.2. 绝对定位

绝对定位适合于子部件的位置随父部件的变化而变的情形。与前面的例子相同，subcontrol-origin定义了父部件箱体的参考矩形。子部件的矩形区域则可以随后通过相对于这个参考矩形四边的偏移量来定义。



对于宽度或高度固定的子部件，subcontrol-position被用来说明其在subcontrol-origin指定矩形内的对其方式：

楼主勤勤恳恳的工作值得嘉奖

不错。。顶。

不过感觉适合的，可以拿来套用的QSS很少。不知道大家有没有这方面的资源。

这个非常好。

有源码更好了

这个不是帮助文件里的吗?