本文翻译自Qt季刊(Qt Quaterly)第20期。
译文地址:
通过Qt4.2样式表定制程序外观
作者:Girish Ramakrishnan 翻译:
Zhang Chi <[email=zhangchi@linuxstudy.cn]
zhangchi@linuxstudy.cn[/email]
>
这个是在别的地方看到的,译文地址已经没了。 原文地址还在,我就整理下
我只是个搬运工
目录
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)部分是赋给该属性的值。
为了使用方便,我们还可以使用一种简化形式:
- [size=2]selector1, selector2, ..., selectorM {[/size]
- attribute1: value1;
- attribute2: value2;
- ...
- attributeN: valueN;
- }
这种简化形式可以同时为与M个选择器相匹配的部件设置N种属性。例如:
- [size=2]QCheckBox, QComboBox, QSpinBox {[/size]
- color: red;
- background-color: white;
- font: bold;
- }
这个规则设置了所有的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指定的颜色将会透过透明区域。这一功能可以使背景图片在多种环境下重复利用。
该例子中使用的样式表如下所示:
- [size=2]QFrame {[/size]
- margin: 10px;
- border: 2px solid green;
- padding: 20px;
- background-color: gray;
- background-image: url(qt.png);
- background-position: top right;
- background-origin: content;
- background-repeat: none;
- }
在这个例子中,QFrame四周的空白、边框和填充值都是一样的。实际上margin属性可以在上下左右四个方向分别指定我们需要的不同值,例如:
- [size=2]QFrame {[/size]
- margin: 14px 18px 20px 18px;
- }
同时,我们也可以分别指定margin-top、margin-right、margin-bottom、margin-left四个属性。
- [size=2]QFrame {[/size]
- margin-top: 14px;
- margin-right: 18px;
- margin-bottom: 20px;
- margin-left: 18px;
- }
虽然目前我们仅仅使用了QFrame作为例子,但是我们也可以同样的将这些属性应用于任何一个支持方箱模型的Qt部件,例如:QCheckBox、 QLabel、QLineEdit、QListView、QMenu、QPushButton、QTextEdit、和QToolTip。