stylesheetDemo.docxVIP

引言作为一套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文件叫stylesheetDemo.qss，于是我们在程序中只需要写如下几行代码就可以使我们写在qss文件中的Style Sheets起作用：QFile file(:/qss/stylesheetDemo.qss);file.open(QFile::ReadOnly);QTextStream filetext(file);QString stylesheet = filetext.readAll();ui-tab-setStyleSheet(stylesheet);程序中stylesheetDemo.qss已加入到资源文件，其中ui-tab就是TabWidget中的第一个tab页面。下面是stylesheetDemo.qss的内容：QGroupBox {background-image: url(:/pics/background.png);border-radius: 30px;}?QLabel {color: gray;}?QLineEdit {background: qradialgradient(cx:0, cy:0, radius: 1, fx:0.5, fy:0.5, 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(:/pics/checkbox.gif);}???QRadioButton{ spacing: 10}?QRadioButton::indicator{ width: 25px; he