stylesheetDemo.doc

引言
作为一套GUI框架,Qt是非常强大的。(注:Qt 不仅是一套优秀的GUI框架,同时也是一套出色的应用程序框架)。
在UI的制作方面Qt为广大开发者提供了一套强大而易用的工具,她就是——Qt Style Sheets。
本文将向大家举例介绍如何使用Qt Style Sheets制作个性化的UI界面。例子程序(stylesheetDemo)可通过本文末尾所附链接下载。
UI涉及的东西非常庞杂,Qt Style Sheets也包含许许多多的内容,因此本文并不试图对Qt Style Sheets进行系统的理论性的详解,那需要数十倍于本文的篇幅。本文仅通过几个例子,将大家引入Qt Style Sheets的大门,以后如有更多需求大家直接在Qt Assistant中查询Qt Style Sheets并且结合自己写的程序进行测试就可以了。
[edit] 测试设备
Nokia N8
[edit] 预备知识
Style sheets 是由一系列的style rules组成的。一条style rule 由选择器selector和声明declaration这两部分构成。selector说明这条规则在哪些widgets上起作用,declaration说明要在这些widgets上设置什么属性properties。例如:
QPushButton, QLineEdit { color: red; background-color: white }
在上面这条style rule中QPushButton, QLineEdit 是两个选择器,中间用逗号连接。{ color: red; background-color: white }是声明declaration,大括号里面是一系列的 property: value对,中间用分号连接。这条规则指出对QPushButton和QLineEdit 以及他们的子类需要使用红色作为其前景色,并使用白色作为其背景色。
Qt widgets所支持的所有属性列表请查阅List of Properties
[edit] Tab1:QLineEdit QGroupBox QRadioButton QCheckBox QLabel(使用qss文件)
例子程序的UI结构非常简单,只有两部分,上方是一个有三个tab页面的QTabWidget,下面是一个QPushButton。
下面我们先来制作TabWidget的第一个页面Tab1。先看一下效果图:
图一:
图二:
这张是没有使用StyleSheet的样子:
Tab1中使用到了五种控件。如果控件较多或比较复杂,我们可以通过使用qss文件来设置Style Sheet。首先我们新建一个文本文档,后缀名改为qss,然后用文本编辑器比如记事本打开它,将我们设置的Style Sheets写进去然后保存就可以了。,于是我们在程序中只需要写如下几行代码就可以使我们写在qss文件中的Style Sheets起作用:
QFile file(":/qss/");
(QFile::ReadOnly);
QTextStream filetext(&file);
QString stylesheet = ();
ui->tab->setStyleSheet(stylesheet);
,其中ui->tab就是TabWidget中的第一个tab页面。
:
QGroupBox {
background-image: url(:/pics/);
border-radius: 30px;
}
 
QLabel {
color: gray;
}
 
QLineEdit {
background: qradialgradient(cx:0, cy:0, radius: 1,
fx:, fy:, stop:0 white, stop:1 rgba(0,190,0, 60%));
border-radius: 9px;
}
 
 
 
QCheckBox:checked {
color: green;
}
 
QCheckBox::indicator {
width: 25px;
height: 25px;
}
 
QCheckBox::indicator:checked {
image: url(:/p