9.4 使用样式表

使用样式表通常有两种做法，一种是设置全局的样式表，通过调用 QApplication::setStyleSheet()方法来实现；一种是在指定的窗口部件上使用样式表 ，这可以通过调用 QWidget::setStyleSheet()方法来实现。如果你为同一个部件或应用程序指定了 多种不同的样式表（比如有的设置字体颜色，有的设置界面背景），那么 Qt 将会自动将它们 的效果组合起来，这也被称作是样式表的层叠（ cascading）。

注意，Qt 样式表目前尚不支持用户自定义的 QStyle 样式，在后续的版本中有望获得支 持。也就是说，当你的应用程序中含有子类化自 QStyle 类的样式时，在 Qt 4.5 以前的版本 中就不要再同时设置样式表了。

9.4.1与 Qt Designer 集成使用

在 Qt Designer 中，可以很方便的设置样式表并浏览其效果。可以在 Qt Designer 设计 的界面之中的任意窗口部件上点击鼠标右键，在弹出的上下文菜单上选择 “改变样式表”，如 图 9-11 所示。

图 9-11 改变样式表的上下文菜单

接下来将弹出名为【编辑样式表】的对话框，如图 9-12 所示。其中有 4 个下拉按钮， 分别是添加资源、添加渐变、添加颜色和添加字体， 使用它们可以细化设置情况。

图 9-12 【编辑样式表】对话框

举个例子，依次点击添加颜色和添加字体按钮，为窗口部件设置颜色和字体的样式 。其 结果如图 9-13 所示。

图 9-13 添加字体和设置颜色

从 Qt 4.2 开始， Qt Designer 内置了针对样式表的语法高亮和语法有效性校验支持 。 语法有效性指示器位于【编辑样式表】窗体的左下角。样式表的语法有效的话，将以绿色字 体指示出来“有效样式表”，如图 9-14 所示。

图 9-14 样式表设置正确

当你按下【确定】或者【应用】按钮，Qt Designer 将立即把基于新的样式表的程序外 观展现在面前。

语法不正确的话，将以红色字体指示出来“无效样式表”，如图 9-15 所示。

图 9-15 样式表的语法不正确

现在，我们举个具体的小例子，也算是一个练习题吧。打开 Qt Designer，在界面上放 置两个 Label、一个 LineEdit 和一个 ComboBox 窗口部件。通过使用右键菜单来改变各个窗 口部件的样式表，最终完成的界面情形如图 9-16 所示，大家可以自行尝试如何实现这个界面 布局，多试几遍就可以的。（提示：要把 LineEdit 设置成如图 9-16 所示的圆角形式，需要加 入语句 border-style:outset;）

图 9-16 一个具体的例子

9.4.2 实例：样式表的应用

下面我们以一个实例来讲解样式表的应用。这个例子取材于 Qt Demo，比较复杂，有一 定难度，基本上覆盖了前面几章讲述的各种技能点，主要包括：

  • 如何自定义 Qt 的样式表
  • 如何在应用程序中应用样式表
  • 如何不使用样式表来设置应用程序的样式
  • 如何使用单继承法从.ui 文件创建派生类
  • 如何自定义资源集文件
  • 如何使信号和槽自动连接
  • 如何在两个窗口之间建立关联
  • 元对象系统方法的使用

这个程序名字叫 stylesheet，其运行后的效果如图 9-17 所示。

图 9-17 实例运行效果

该例子基于主窗口样式，有些类似于我们在网上所常见的填写个人资料的网站注册程序。

程序有两个主菜单，依次点击【File】->【Edit Style】菜单项，将弹出如图 9-18 所示的设置样式表的对话框，在其中内置了几种样式供选择，使用者也可以在编辑框中输入自 定义的样式。设置完成后，主界面的窗口部件的样式将依此相应的变化 。里面的 Coffee 样式自定义了 push button、frames 和 tooltip，但使用了下层的风格 （例如这里是 Windows XP风格）来绘制 checkbox，combobox 和 radio button。Pagefold 风格完全重新定义了对话框 中使用的所有控件的外观，从而实现了一种独特的，平台无关的外观。

图 9-18 样式表编辑器

这个程序里面包含如下原生源文件：

mainwindow.ui
stylesheeteditor.ui
stylesheet.qrc
/qss/coffee.qss
/qss/default.qss
/qss/pagefold.qss
/images/*.png
mainwindow.h
mainwindow.cpp
stylesheeteditor.h
stylesheeteditor.cpp

其中，mainwindow.ui 和 stylesheeteditor.ui 分别是主程序和样式编辑器的界面布局 文件，是使用 Qt Designer 制作的。Stylesheet.qrc 是资源集文件，在其中描述了程序中用 到的样式表文件和图片文件的位置和名称 。在 qss 文件夹中包含了 3 个.qss 文件，它们描述 了程序中用到的样式，我们的程序将读取它们并转换成样式表 。在 images 文件夹中放置了程 序中用到的图片文件。mainwindow.h 和 mainwindow.cpp 构成了程序中的主程序类，而 stylesheeteditor.h 和 stylesheeteditor.cpp 构成了样式编辑器类。

下面我们就结合源代码为大家讲解这个程序的功能是怎样实现的。 首先看看 mainwindow.h

#ifndef MAINWINDOW_H
#define MAINWINDOW_H
#include <QtGui>
#include "ui_mainwindow.h"
class StyleSheetEditor;
class MainWindow : public QMainWindow
{
    Q_OBJECT
public:
    MainWindow();
private slots:
    void on_editStyleAction_triggered();
    void on_aboutAction_triggered();
private:
    StyleSheetEditor *styleSheetEditor;
    Ui::MainWindow ui;
};
#endif

第 1、2 和第 16 行一起构成了头文件的预定义卫哨 ，这样做的目的是为了防止程序中重复定义或包含头文件，是严谨的编程风格，建议大家遵循这一范例的做法。

第 3 行引入 QtGui 模块的声明，它包含了 QMainWindow 类的定义。 第 4 行引入 ui_mainwindow.h 的声明。

第 5 行采用前置声明的方式引入样式编辑器类 StyleSheetEditor。 第 6 行声明主程序类 MainWindow 单公有继承自 QMainWindow 类。 第 7 行时必需的，因为要用到 Qt 的核心机制，如信号/槽机制等。 第 8、9 行声明 MainWindow 类的构造函数。

第 10-12 行声明私有槽，它们的命名遵循了 Qt 信号/槽的“自动关联规则”。

第 13-15 行声明了私有成员，它们分别是样式编辑器类的对象和主程序界面类的对象 。 从这里也可以看出，我们对.ui 文件的引入将采用单继承的方式。

下面再来看一下 mainwindow.cpp 文件的内容。

#include "mainwindow.h"
#include "stylesheeteditor.h"
MainWindow::MainWindow()
{
    ui.setupUi(this);
    ui.nameLabel->setProperty("class", "mandatory QLabel");
    styleSheetEditor = new StyleSheetEditor(this);
    statusBar()->addWidget(new QLabel(tr("Ready")));
    connect(ui.exitAction, SIGNAL(triggered()), qApp, SLOT(quit()));
    connect(ui.aboutQtAction, SIGNAL(triggered()), qApp, SLOT(aboutQt()));
}
void MainWindow::on_editStyleAction_triggered()
{
    styleSheetEditor->show();
    styleSheetEditor->activateWindow();
}
void MainWindow::on_aboutAction_triggered()
{
    QMessageBox::about(this, tr("About Style sheet"),
    tr("The <b>Style Sheet</b> example shows how widgets can be styled "
    "using <a href=\"http://doc.trolltech.com/4.5/stylesheet.html\">Qt "
    "Style Sheets</a>. Click <b>File|Edit Style Sheet</b> to pop up the "
    "style editor, and either choose an existing style sheet or design "
    "your own."));
}

第 1、2 两行引入程序中用到的头文件声明。

第 4 行初始化界面布局，setupUi()函数一般要放在构造函数内的第一行。 第 5 行设置 nameLabel 的属性，setProperty()方法的原型如下：

bool QObject::setProperty ( const char * name, const QVariant & value )

它将对象的 name 的属性值设置为 value。对于本句来说，就是把 nameLabel 的 class 属性值设置为"mandatory QLabel"，这将使得该窗口部件被突出显示。

第 6 行实例化 styleSheetEditor 类的对象，其父窗口为 MainWindow。

第 7 行为状态栏添加一个窗口部件，显示 "Ready"字样，即汉语的“就绪“。

第 8、9 行分别连接菜单项 exitAction 和 aboutQtAction 的触发信号 triggered()和全局对象 qApp 的 quit()槽和 aboutQt()槽。

第 10-12 行定义了 on_editStyleAction_triggered()槽函数。 第 11 行显示样式编辑器窗口。

第 12 行调用 activateWindow()方法把样式编辑器窗口设置为活动窗口。 activateWindow()方法的原型如下：

void QWidget::activateWindow ()

它用来把某个顶层窗口设置为当前的活动窗口。

小贴士：活动窗口与如何设置活动窗口 所谓活动窗口就是当前能够拥有键盘输入焦点的，可见的顶层窗口。 activateWindow()方法的作用与用鼠标单击顶层窗口的标题栏的效果是一样的。在 X11上，这个效果并不确定，因为它依赖于具体的窗口管理器，如果要确保某窗口为活动窗口，

最好是在调用 activateWindow()方法之后再调用 raise()方法，后者本身也是 Qt 内置的一个 槽函数。但无论如何，在这之前都需要确保该窗口首先是可见的，否则将没有任何效果。

在 Windows 平台上，这种情形又有些差异。因为 Microsoft 不允许一个应用打断由另一 个应用建立起来的和用户的对话（即交互过程 ），所以 activateWindow()被调用后，该窗口 部件可能还是不能成为顶层的活动窗口，而只是它的标题栏变为高亮，以告诉用户该窗口部 件的状态发生了某些变化。这一点，请读者朋友在使用时注意。

如果想知道某窗口是否为活动窗口，可以调用 isActiveWindow()方法。 前面我们曾经讲到过 Qt 核心机制中的“资源集文件“。现在我们看一下如何在 Qt Creator 中书写或配置资源集文件。

在 Qt Creator 中用鼠标双击资源集文件，将打开资源集文件编辑器，在资源集编辑器中可以增加或删除文件、节点等，其操作比较方便，一目了然。如图 9-19 所示。

图 9-19 资源集文件编辑器

我们再来看一下 stylesheeteditor.h 文件的内容。

#ifndef STYLESHEETEDITOR_H
#define STYLESHEETEDITOR_H
#include <QDialog>
#include "ui_stylesheeteditor.h"
class StyleSheetEditor : public QDialog
{
    Q_OBJECT
public:
    StyleSheetEditor(QWidget *parent = 0);
private slots:
    void on_styleCombo_activated(const QString &styleName);
    void on_styleSheetCombo_activated(const QString &styleSheetName);
    void on_styleTextEdit_textChanged();
    void on_applyButton_clicked();
private:
    void loadStyleSheet(const QString &sheetName);
    Ui::StyleSheetEditor ui;
};
#endif

第 1 行声明 StyleSheetEditor 类单公有继承自 QDialog。

第 5-9 行声明了程序中的私有槽，命名遵循了 Qt 信号/槽的“自动关联规则”。

第 11 行声明了私有方法 loadStyleSheet()，它用来从.qss 文件中读取内容并转化问样式表。 第 12 行声明了私有成员变量 ui。

再来看一下 stylesheeteditor.cpp。

#include <QtGui>
#include "stylesheeteditor.h"
StyleSheetEditor::StyleSheetEditor(QWidget *parent)
: QDialog(parent)
{
    ui.setupUi(this);
    QRegExp regExp(".(.*)\\+?Style");
    QString defaultStyle = QApplication::style()->metaObject()->className();
    if (regExp.exactMatch(defaultStyle))
    {
        defaultStyle = regExp.cap(1);
    }
    ui.styleCombo->addItems(QStyleFactory::keys());
    ui.styleCombo->setCurrentIndex(ui.styleCombo->findText(defaultStyle,
    Qt::MatchContains));
    ui.styleSheetCombo->setCurrentIndex(ui.styleSheetCombo->findText("Coffee"));
loadStyleSheet("Coffee");
}
void StyleSheetEditor::on_styleCombo_activated(const QString &styleName)
{
    qApp->setStyle(styleName);
    ui.applyButton->setEnabled(false);
}
void StyleSheetEditor::on_styleSheetCombo_activated(const QString &sheetName)
{
    loadStyleSheet(sheetName);
}
void StyleSheetEditor::on_styleTextEdit_textChanged()
{
    ui.applyButton->setEnabled(true);
}
void StyleSheetEditor::on_applyButton_clicked()
{
    qApp->setStyleSheet(ui.styleTextEdit->toPlainText());
    ui.applyButton->setEnabled(false);
}
void StyleSheetEditor::loadStyleSheet(const QString &sheetName)
{
    QFile file(":/qss/" + sheetName.toLower() + ".qss");
    file.open(QFile::ReadOnly);
    QString styleSheet = QLatin1String(file.readAll());
    ui.styleTextEdit->setPlainText(styleSheet);
    qApp->setStyleSheet(styleSheet);
    ui.applyButton->setEnabled(false);
}

第 3-6 行调用 Qt 中的正则表达式来取得默认的样式。

第 3 行定义一个正则表达式变量 regExp。

第 4 行是 Qt 元对象机制（ Meta-Object System）的应用。

首先通过 style()方法获得应用程序的样式，然后利用 Qt 元对象机制获取元对象信息。 style()方法是 QApplication 类的静态方法，其原型如下：

QStyle * QApplication::style () [static]

它将返回应用程序的样式对象。

这里简单的讲解一下 Qt 元对象机制，详细的内容请见第 13 章。

Qt 的元对象系统是 Qt 的核心机制之一，Qt 的信号/槽机制、属性系统、运行时型别信息 等机制都是以元对象系统为基础的。在应用程序中，每一个 QObject 的子类都会有一个单独的 Qt 元对 象实例， 这个实例 中保存了 该类所有 的元对象 信息，该 实例可以 通过调用 QObject::metaObject()方法来得到。

而 QMetaObject 被称作是 Qt 的元对象类，它包含了 Qt 对象的元信息。

QObject::metaObject()方法的原型如下：

const QMetaObject * QObject::metaObject () const [virtual]

可以看到，它返回本对象的指向其元对象的指针。 用来获取元对象信息的方法有很多，本程序中用到的 className()是其中的一种，它返回类 的名字。

第 5、6 两行应用正则表达式的校验来获得 defaultStyle 的值。

第 8 行是为 styleCombo 设置当前下拉框列表中的默认选项。 findText()是 QcomboBox 类的方法，其原型如下：

int QComboBox::findText ( const QString & text, Qt::MatchFlags flags =
Qt::MatchExactly | Qt::MatchCaseSensitive ) const

它在 QComboBox 对象的 item 列表中搜索与 text 相匹配的项的索引值，如果没有相匹配的项，则返回-1，该值是 int 型的。flags 参数给出了搜索的方法，即如何与 text 相匹配。

flags 的值取自枚举值 Qt::MatchFlag，后者描述了在一个模型中搜索时可以遵循的匹配原 则，如表 9-2 所示。

表 9-2 MatchFlag 的取值

常量 值 说明
Qt::MatchExactly 0 执行 QVariant 匹配（QVariant 可以看做是 Qt 的最常用变量类型的联合体）
Qt::MatchFixedString 8 执行按字符匹配。注意这种方式默认情况下不区分大小写，只有同时指定 Qt::MatchCaseSensitive 才区分大小写。
Qt::MatchContains 1 搜索条件包含在（QComboBox 的下拉列表）项目中
Qt::MatchStartsWith 2 匹配条件是与项的开头相匹配，即“以 XXX 开头”
Qt::MatchEndsWith 3 搜索的条件与项的结尾相匹配，即“以 XXX 为结尾”
Qt::MatchCaseSensitive 16 执行大小写敏感匹配搜索
Qt::MatchRegExp 4 以一个正则表达式为匹配条件执行按字符匹配搜素，注意这种方式不区分大 小写，除非同时指定 Qt::MatchCaseSensitive 条件。
Qt::MatchWildcard 5
Qt::MatchWrap 32 执行类似“令牌环”式的搜索，对每一个项都要经过验证
Qt::MatchRecursive 64 执行递归搜索

所有上述这些标记符号都是 QFlags< MatchFlag >的一部分，它们之间的组合可以用 OR 来连接，在程序中即是使用|符号。这些标记符号经常与 QRegExp 类结合使用。

第 9 行与第 8 行同理，设置 styleSheetCombo 的当前项为 Coffee，也即当前的样式表的 名称为 Coffee。

紧接着，第 10 行调用 loadStyleSheet()方法相应的设置应用程序的样式表为 Coffee。 第 21-27 行是 loadStyleSheet()方法的定义。

第 22 行使用 QFile 类的对象根据实参取得 Coffee 样式表对应的.qss 文件全名，即带路 径的 Coffee.qss。

第 23 行以只读方式打开 Coffee.qss 文件。

第 24 行读取文件的全部内容。QLatin1String 类的构造函数原型如下：

QLatin1String::QLatin1String ( const char * str )

注意它的参数是 const char * str，而不是 QString 类的对象。

小贴士：QLatin1String 类的使用

关于 QLatin1String 类的使用有很多话题。这里只讲一下最为基本的部分。 QLatin1String 类为采用 ASCII/Latin-1 编码形式的字符串操作提供了一个轻量级的封装。

通常在操作字符串时，Qt 推荐开发者尽量不要直接使用 QString 类，因为它的速度比较慢。替代的方法一种是使用 const char，使用它可以避免创建一个临时的 QString 对象， 这样就节省了开销。很多 QString 的成员函数如 insert()、replace()、index()等都接受 const char作为参数或返回值。举个例子，在下面的所有的示例代码中假设变量 str 是 QString 类型。

if (str == "auto" || str == "extern"
    || str == "static" || str == "register")
{
    ...
}

上面和下面的两段代码实现了相同的操作 。由于下面的代码在执行期间创建了 4 个临时的 QString 变量并且对字串值进行了深度拷贝，增大了程序运行的开销，所以上面这段代码 的执行速度就要明显的快于下面这段代码。

if (str == QString("auto") || str == QString("extern")
    || str == QString("static") || str == QString("register"))
{
    ...
}

如果使用 QLatin1String 类，代码可以写成下面这样，书写起来比较费力气些，但是代码执行的效率很高，比使用 QString::fromLatin1()要快得多。

if (str == QLatin1String("auto")
    || str == QLatin1String("extern")
    || str == QLatin1String("static")
    || str == QLatin1String("register")
{
    ...
}

基本上在各种场合都可以使用 QLatin1String 来代替 QString，就像下面代码中示例的这种用法。

QLabel *label = new QLabel(QLatin1String("MOD"), this);

第 25 行使用 setPlainText()方法把 styleTextEdit 要显示的内容设置为样式表文件的内容。

第 26 行设置应用程序的样式表。 代码段中的其它部分比较简单，不再赘述了。

再来看一看 main.cpp 的内容。

#include &lt;QtGui&gt;
#include "mainwindow.h"
int main(int argc, char *argv[])
{
    Q_INIT_RESOURCE(stylesheet);
    QApplication app(argc, argv);
    MainWindow window;
    window.show();
    return app.exec();
}

这里第 1 行最为重要，要使用资源集文件，就要使用 Q_INIT_RESOURCE 宏。

小贴士：Q_INIT_RESOURCE 宏的使用 Q_INIT_RESOURCE 宏的原型如下：

void Q_INIT_RESOURCE ( name )

该宏的作用是初始化在 name 指定的.qrc 文件中的资源文件。通常，Qt 在应用程序初始化时自动加载资源。注意，在某些平台上使用静态链接库时，必须使用 Q_INIT_RESOURCE() 宏来存储资源。

举个例子，如果应用程序中用到的资源文件列在名为 myapp.qrc 的资源集文件中，那么 为了确保资源在应用程序初始化时被加载，你需要确保在主程序的 main()中加上下面这句：

Q_INIT_RESOURCE(myapp);

有两点需要注意，一是参数 name 的命名必须符合标准 C++对于变量命名的规范，不可以含有不合适的字符。

第二，该宏不能用在名字空间里面。它必须在 main()主函数中被调用。如果必须在名字 空间中使用，可以使用下面的示例代码。

inline void initMyResource() { Q_INIT_RESOURCE(myapp); }
namespace MyNamespace
{
    ...
    void myFunction()
    {
        initMyResource();
    }
}

项目文件 stylesheet.pro 可以像下面这样书写。

TEMPLATE = app
TARGET =
DEPENDPATH += .
INCLUDEPATH += .
# Input
HEADERS += mainwindow.h stylesheeteditor.h
FORMS += mainwindow.ui stylesheeteditor.ui
SOURCES += main.cpp mainwindow.cpp stylesheeteditor.cpp
RESOURCES += stylesheet.qrc

第 1 行表明应用程序的模板为 app。第 5 行是注释，第 9 行表明要包含用到的资源集文件。

通过本实例，大家可以看到，样式表是一种在运行时解释的普通文本文件 ，使用它们不

需要具备编程知识。我们可以在应用程序级别和窗口级别设置样式表。 另外，如果在不同的 级别都设置了样式表，则应用程序将继承所有有效的样式，你看到的程序样子是这些效果的 叠加，这被称作是样式表效果的层叠（ cascading）。