9.4 使用样式表

优质

小牛编辑

136浏览

2023-12-01

使用样式表通常有两种做法，一种是设置全局的样式表，通过调用 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 &lt;QtGui&gt;
#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-&gt;setProperty("class", "mandatory QLabel");
    styleSheetEditor = new StyleSheetEditor(this);
    statusBar()-&gt;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-&gt;show();
    styleSheetEditor-&gt;activateWindow();
}
void MainWindow::on_aboutAction_triggered()
{
    QMessageBox::about(this, tr("About Style sheet"),
    tr("The &lt;b&gt;Style Sheet&lt;/b&gt; example shows how widgets can be styled "
    "using &lt;a href=\"http://doc.trolltech.com/4.5/stylesheet.html\"&gt;Qt "
    "Style Sheets&lt;/a&gt;. Click &lt;b&gt;File|Edit Style Sheet&lt;/b&gt; 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 &lt;QDialog&gt;
#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 &lt;QtGui&gt;
#include "stylesheeteditor.h"
StyleSheetEditor::StyleSheetEditor(QWidget *parent)
: QDialog(parent)
{
    ui.setupUi(this);
    QRegExp regExp(".(.*)\\+?Style");
    QString defaultStyle = QApplication::style()-&gt;metaObject()-&gt;className();
    if (regExp.exactMatch(defaultStyle))
    {
        defaultStyle = regExp.cap(1);
    }
    ui.styleCombo-&gt;addItems(QStyleFactory::keys());
    ui.styleCombo-&gt;setCurrentIndex(ui.styleCombo-&gt;findText(defaultStyle,
    Qt::MatchContains));
    ui.styleSheetCombo-&gt;setCurrentIndex(ui.styleSheetCombo-&gt;findText("Coffee"));
loadStyleSheet("Coffee");
}
void StyleSheetEditor::on_styleCombo_activated(const QString &styleName)
{
    qApp-&gt;setStyle(styleName);
    ui.applyButton-&gt;setEnabled(false);
}
void StyleSheetEditor::on_styleSheetCombo_activated(const QString &sheetName)
{
    loadStyleSheet(sheetName);
}
void StyleSheetEditor::on_styleTextEdit_textChanged()
{
    ui.applyButton-&gt;setEnabled(true);
}
void StyleSheetEditor::on_applyButton_clicked()
{
    qApp-&gt;setStyleSheet(ui.styleTextEdit-&gt;toPlainText());
    ui.applyButton-&gt;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-&gt;setPlainText(styleSheet);
    qApp-&gt;setStyleSheet(styleSheet);
    ui.applyButton-&gt;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）。