通过Qt4.2样式表定制程序外观

通过Qt4.2样式表定制程序外观

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风格完全重新定义了对话框中使用的所有控件的外观,从而实现了一种独特的,平台无关的外观。

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;
    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指定的颜色将会透过透明区域。这一功能可以使背景图片在多种环境下重复利用。

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

QFrame {
    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属性可以在上下左右四个方向分别指定我们需要的不同值,例如:

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。

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通道,以使背景能够在边角处露出来。

6. 控制大小

min-width和min-height两个属性可以用来指定一个部件的内容区域的最小大小。这两个值将影响部件的minimumSizeHint(),并在布局时被考虑。

例如:

QPushButton {
    min-width: 68px;
    min-height: 28px;
}

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

7. 处理伪状态

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

QPushButton {
    border: 2px outset green;
    background: gray;
}

QPushButton:pressed {
    border-style: inset;
}

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

表 1. 伪状态列表
伪状态    描述
:checked    button部件被选中
:disabled    部件被禁用
:enabled    部件被启用
:focus    部件获得焦点
:hover    鼠标位于部件上
:indeterminate    checkbox或radiobutton被部分选中
:off    部件可以切换,且处于off状态
:on    部件可以切换,且处于on状态
:pressed    部件被鼠标按下
:unchecked    button部件未被选中

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属性,子部件可以被放置在部件箱体内的任何位置。并且,子部件的位置 还可以使用相对或绝对的方式进一步的调整。具体选择何种调整方式取决于子部件具有固定的大小,还是会随着父部件而变化。

8.1. 相对定位

相 对定位适合于子部件具有固定大小的情形(通过width和height指定子部件大小)。使用这种方式,子部件可以以相对于subcontrol- position和 subcontrol-origin属性定义的原始位置进行移动调整。使用left属性可以把子部件向右移,top属性可以把子部件向左移。

例如:

QPushButton::menu-indicator {
    image: url(menu_indicator.png);
    width: 13px;
    height: 13px;

subcontrol-origin: padding;
    subcontrol-position: bottom right;
}

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

QPushButton::menu-indicator:pressed {
    position: relative;
    top: 2px;
    left: 2px;
}

8.2. 绝对定位

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

QPushButton::menu-indicator {
    border: 2px solid red;

subcontrol-origin: padding;
    position: absolute;
    top: 2px;
    right: 2px;
    bottom: 2px;
    left: 40px;

时间: 2024-10-10 21:18:05

通过Qt4.2样式表定制程序外观的相关文章

通过Qt样式表定制程序外观(比较通俗易懂)

1. 何为Qt样式表[喝小酒的网摘]http://blog.hehehehehe.cn/a/10270.htm2. 样式表语法基础3. 方箱模型4. 前景与背景5. 创建可缩放样式6. 控制大小7. 处理伪状态8. 使用子部件定义微观样式 8.1. 相对定位8.2. 绝对定位 摘要 由于Qt样式表的引入,定制Qt部件的外观样式变得非常简单. 无论你是想仅仅修改一个现有部件的外观,还是想从零开始设计一套全新的界面风格, 现在都有了一种新的方法而不必再去继承并实现一个QStyle的子类. 1. 何为

Java开发桌面程序学习(十)——css样式表使用以及Button悬浮改变样式实现

css样式表使用 javafx中的css样式,与html的有些不一样,javafx中的css,是以-fx-background-color这种样子的,具体可以参考文档JavaFx css官方文档 javafx中,css样式有两种使用方法 直接在fxml中使用 fxml引用css文件 fxml直接使用样式 在某个控件中使用style属性即可 <Text layoutX="235.0" layoutY="173.0" style="-fx-backgro

Qt样式表的使用

Qt中可以灵活的使用层叠样式表(CSS),其语法和CSS很相似.因为HTML CSS的灵活性,所以可以很方便的为QT界面设计自己需要的外观.除了子类化Style类,使用QT样式表(QStyleSheet)是另一种快速改变QT程序UI风格的方法,它很大程度上借鉴和参考了 HTML层叠样式表的语法和思想. StyleSheet文件的默认后缀名为qss,可通过命令行参数 -stylesheet filename.qss 来设置样式表,也可通过QApplication::setStyleSheet或QW

4.1 什么是CSS样式表

上一章的课程里,我们学习了表单以及表单中的各种元素,常用的表单元素有:文本框( text).密码框(password).单选按钮(radio).复选框(checkbox).列表框(<select><option>).按钮(button.submit和reset).多行文本框(<textarea>).另外,还学习了框架,包括框架的基本结构.如何创建多个复杂的窗口.框架窗口之间的链接等. 从本章开始,我们将学习CSS(Cascading Style Sheet,层叠式样式表

如何在PeopleSoft中找到并更改默认样式表名称

PeopleSoft的默认样式表名称是用来控制应用程序的外观的.在PeopleSoft中可以使用集中样式表来更改应用程序的外观,oracle为每个应用程序版本设置了默认的样式表. 下面是不同应用程序版本对应的默认样式表. 9.0或更早版本~PSSTYLEDEF 9.1~PSSTYLEDEF_SWAN 9.2~PSSTYLEDEF_TANGERINE 查找当前版本使用的默认样式表 1.路径:主菜单>PeopleTools>实用程序>管理>PeopleTools选项 找到默认样式表名称

Qt StyleSheet样式表实例(转)

QT论坛看到的,收藏一下! 在涉及到Qt 美工的时候首先需要掌握CSS 级联样式表. 下面将通过几个例子来介绍一下怎样使用Qt中的部件类型设计.自定义的前台背景与后台背景的颜色: 如果需要一个文本编辑器的背景变为黄色, 下面是代码行: qApp->setStyleSheet("QLineEdit { 针对一个对话框的内容中使用QLineEdit以及QLineEdit的子类的背景都变成黄色, 下面是代码: myDialog ->setStyleSheet("QLineEdit

qt 样式表基本用法

Qt样式表 QT样式表参考CSS层叠样式表设计,不同之处在于QT样式表应用于Widget世界. 可以使用QApplication::setStyleSheet()函数设置到整个应用程序上,也可以使用QWidget::setStyleSheet()设置到某一个部件以及子部件上.如果在不同的级别都设置了样式表,QT会使用所有有效的样式表,称为样式表的层叠. this->setStyleSheet("QpushButton{background:yellow}QSlider{background

QSS-qt样式表

QSS即Qt StyleSheet(Qt样式表)的简称,是一种用来自定义控件外观的强大机制,QSS可以让我们的程序界面更加漂亮 每条QSS样式都由两部分组成:1. 选择器,该部分指定要美化的控件  2. 声明,该部分指定要在控件上使用的属性 1 import sys 2 from PyQt5.QtWidgets import QApplication, QWidget, QPushButton, QLabel, QLineEdit, 3 QComboBox, QStackedWidget, QG

15、Qt 样式表

Qt的样式表类似HTML的层叠式样式表CSS,可以为一个独立的子部件.整个窗口.整个应用程序指定一种外表样式. 样式表功能:1.优化外观.2.实现某些动作,如鼠标在图片上,图片切换. 格式:QWidget::setStyleSheet("样式") 或 QApplication::setStyleSheet("样式") 样式:控件类 { 属性:值 } QPushButton,QCheckBox,QComboBox{ //按钮.单选框.下拉框 color:red; //