×
Namespaces

Variants
Actions

Archived:使用样式表自定义外观

From Nokia Developer Wiki
Jump to: navigation, search

Archived.png存档: 这篇文章是存档,因为考虑到今天它与第三方开发者建立商业解决方案不相关。

Qt Quick should be used for all UI development on mobile devices. The approach described in this article (based on QWidget) is deprecated.

Article Metadata

代码示例
源文件: Media:Candy.zip

兼容于
平台:
Symbian

文章
cuizhan 在 20 Oct 2011 创建
最后由 hamishwillee 在 28 Jun 2012 编辑

Contents

引言

在某些情况下,我们可能需要修改QT内置窗口部件的外观。从QT 4.2开始,可以使用QT样式表,这是一种从HTML CSS获得灵感的机制。样式表是一种运行时解释的普通文本文件,使用它们不需要任何编程知识。

预备知识

Style sheets 是由一系列的style rules组成的。一条style rule 由选择器selector和声明declaration这两部分构成。selector说明这条规则在哪些widgets上起作 用,declaration说明要在这些widgets上设置什么属性properties。例如

QPushButton, QLineEdit  { color: red; background-color: white }

上面的代码定义了控件的前景色和背景色。式表是文本规格的,你可以使用 QApplication::setStyleSheet() 作用于整个应用上,代码如下:

qApp->setStyleSheet("QLineEdit{background_color: yellow:}}

也可以使用 QWidget::setStyleSheet() 作用于一个特别的窗口上(和他的后代)。代码如下

dialog->setStyleSheet("QLineEdit{background_color: yellow:})

如果直接在QLineEdit上设置样式表,可以忽略QLineEdit选择器以及大括号

lineEdit->setStyleSheet("background-color:yellow;");

代码示例

下面我们将以一段代码解释如何定义比较复杂的样式,为了便于对代码的理解,我们先展示一下代码的运行效果
MyExample.PNG
对话框的背景图片使用以下的规则设置:

QDialog {
background-image: url(:/images/background.png);
}

下面的规则集为这些LABEL设置了COLOR和FONT属性

QLabel {
font: 9pt;
color: rgb(0, 0, 127);
}

下面的规则集定义对话框中的QLineEdit和QListView的外观

QLineEdit,
QListView {
color: rgb(127, 0, 63);
background-color: rgb(255, 255, 241);
selection-color: white;
selection-background-color: rgb(191, 31, 127);
border: 2px groove gray;
border-radius: 10px;
padding: 2px 4px;
}

对于QPushButton的定制,我们将使用一种完全不同的方式。用一个准备好的图像作为背景,为了使按钮可以缩放,按钮的背景使用CSS的边界图机制定义

QPushButton {
color: white;
font: bold 10pt;
border-image: url(:/images/button.png) 16;
border-width: 16px;
padding: -16px 0px;
min-height: 32px;
min-width: 60px;
}

当鼠标位于QPushButton上方时,我们使用一个更为明亮的图像作为边界图,使其具有更好的悬停效果

QPushButton:hover {
border-image: url(:/images/button-hover.png) 16;
}

当用户单击时,可以把前景色改为浅灰色,使用一个暗色的边界图,并把按钮中的文字下移一个像素

QPushButton:pressed {
color: lightgray;
border-image: url(:/images/button-pressed.png) 16;
padding-top: -15px;
padding-bottom: -17px;
}

最后的风格规则是自定义QCombox的外观,只读组合框是一个右边带下拉箭头的QPushButton,可编辑的组合框是由一个类似QLineEdit的组件及一个小按钮组成,定义QLineEdit的规则可以用来定义可编辑的组合框

QComboBox:!editable,
QPushButton {
color: white;
font: bold 10pt;
border-image: url(:/images/button.png) 16;
border-width: 16px;
padding: -16px 0px;
min-height: 32px;
min-width: 60px;
}
 
定义QPushButton的普通规则可以扩展到只读组合框
<code>
QComboBox:!editable,
QPushButton {
color: white;
font: bold 10pt;
border-image: url(:/images/button.png) 16;
border-width: 16px;
padding: -16px 0px;
min-height: 32px;
min-width: 60px;
}

鼠标在只读组合框或则下拉按钮上悬停的规制可以修改背景图片

QComboBox:!editable:hover,
QComboBox::drop-down:editable:hover,
QPushButton:hover {
border-image: url(:/images/butto
}

点击一个按钮如同点击一个QPushButton

QComboBox:!editable:on,
QPushButton:pressed {
color: lightgray;
border-image: url(:/images/button-pressed.png) 16;
padding-top: -15px;
padding-bottom: -17px;
}

定义自己的下拉箭头

QComboBox::down-arrow {
image: url(:/images/down-arrow.png);
}

对于可编辑组合框,需要配置下拉按钮,使它看起象个微型按钮

QComboBox::drop-down:editable {
border-image: url(:/images/button.png) 16;
border-width: 10px;
subcontrol-origin: margin;
subcontrol-position: center right;
width: 7px;
height: 6px;
}

这样我们就完成了样式表的创建,具体代码参考代码示例

代码下载

File:Candy.zip

相关链接

This page was last modified on 28 June 2012, at 06:41.
371 page views in the last 30 days.

Was this page helpful?

Your feedback about this content is important. Let us know what you think.

 

Thank you!

We appreciate your feedback.

×