文件名称：福优林@Qt5小白变大牛初级篇word---第10章.pdf
文件大小：545KB
文件格式：PDF
更新时间：2023-08-13 11:16:49
qt qss qt样式表 福优学苑
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; }