让你的 Qt 桌面程序看上去更加 native（三）：自定义 style

前面我们一再强调，Qt 使用自己的方式绘制组件。然而我们也看到，在不同的平台上，Qt 的组件表现也不相同。这和 Swing 有些类似：Swing 使用 look and feel 表现组件的外观，Qt 也是类似的。用来绘制组件外观的类就是 QStyle。

 

需要说明一点，组件的 style 是一个非常复杂的内容，仅在这里不可能全部讲解清楚。如果需要，还是要自己仔细阅读相关文档。另外，这部分牵扯的类很多，函数也很复杂，步步为营才是最好的对待方法。除非非常必要，还是建议不要轻易去碰 style 这部分。

 

好了，说明也说明过了，吓唬也吓唬过了，下面进入正题。

 

自定义 style，顾名思义，也就是自己实现外观。这里通常有两种实现方式：第一，重写 widget 的 paintEvent() 函数；第二，使用 QStyle 类。两种方式的侧重点不同：重写组件的 paintEvent() 函数，可以简单地实现某一类组件的样式，而继承 QStyle 类，则可以实现对全部组件一致性处理，例如，将程序中所有的 text 变成红色等。

 

首先我们来看看重写 paintEvent() 函数。paintEvent() 是 QWidget 的一个函数，用于实现自身的绘制。一个组件显示到屏幕上，就是通过调用 paintEvent() 函数。看看一个组件有多复杂，全部要使用 QPainter 提供的画点、画线的函数实现，就知道这里的工作量了。当然也有偷懒的办法，就是重写 paintEvent() 的时候使用一张图片代替。我们这里就不讨论这种思路了，完全从代码开始。

 

我们以 QPushButton 为例。这里，我们创建一个 button，这个 button 在点击时可以凹下显示。为了重写 paintEvent() 函数，我们必须继承 QPushButton 类。头文件很简单，暂且略去，下面只看 paintEvent() 这个函数：

尽管前面说过，我们需要重头绘制整个组件，但实际上，Qt 为我们提供了一系列方便的函数，用于绘制出各个组件。这种在将组建组合的时候非常有用。例如，一个 combo box 实际上是一个 button 加上一个向下的三角形构成。那么，我不需要将整个 combo box 用像素画出来，而是借用 Qt 已有的组建绘制，画出一个 button 和一个三角形就可以了。所以，这里我们也使用类似的思路，让 Qt 绘制出组件，我们要做的就是修改参数，让它按照我们的参数绘制。

 

如果调用 Qt 的组件绘制函数呢？这个绘制函数是 QStyle 类的成员。QWidget 提供了 style() 函数，返回当前的 QStyle 对象。那么，我们就可以通过这个对象绘制。注意上面代码中最后一行，我们从这里看起。下面给出这个函数的签名：

尽管这是一个纯虚函数，但是类似于 Java 的 interface，我们可以直接使用 style() 返回的对象调用。这是一个很典型的 style 式的函数调用。翻看一下 QStyle 的定义，QStyle 类提供了很多以 draw 打头的函数，用于绘制整个系统组件的绘制。这类 draw 函数一般会有四个参数：

回到代码，我们可以看到，在 drawControl() 函数的四个参数中，只有最后一个有默认值。也就是说，如果要调用这个函数，我们必须准备好参数数据。这就是在 paintEvent() 中，前面几行代码做在的工作。

 

通过文档我们查到，QPushButton 需要的是 QStyleOptionButton 作为第二个参数。于是，我们新建一个 QStyleOptionButton 对象。初始化调用 initFrom()，也就是使用本对象设置一个初始值。QStyleOption 有很多属性。比如 QStyleOption::state 指的是当前状态。例如，如果 button 被按下，也就是 isDown() 返回 true 的时候，我们将 state 设置为 QStyle::State_Sunken，也就是凹下，否则则是 QStyle::State_Raised。这样，我们就完成了设置。另外，还要根据需要设置别的属性，例如，如果 isDefault() 返回 true 时，我们需要设置 option.features，这样才能绘制出默认的效果。text 和 icon 属性则是通过 button 自身函数获得。这样，我们完成对绘制数据的设置，就可以调用 QStyle::drawControl() 函数，将这个 button 绘制出来。

 

这里注意一点是，对于 QFlags 对象，使用 = 赋值很可能不是你所期望的结果。QFlags 实现的是 bitmap 位图，如果简单的使用 = 赋值，在赋值的同时会清楚原有位的值。你可以将上面的 option.state |= isDown() ? QStyle::State_Sunken : QStyle::State_Raised; 修改为 option.state = isDown() ? QStyle::State_Sunken : QStyle::State_Raised;，注意比较下前后两个 debug 输出的不同。

 

调用 QStyle::drawControl() 函数时，第一个参数可以通过文档查到。这里的 CE_ 前缀实际就是 ControlElement 的意思。

 

这样，我们就完成了一个简单的自定义 button。代码虽然简单，大体流程已经表现出来，剩下的就是去翻阅大量文档，仔细了解各个 draw 函数的使用，才能够做出满意的自定义组件效果。

 

前面说的第一种自定义组件实现就简单说到这里。然后看看第二种，QStyle 的实现。其实在上面，我们已经使用了 QStyle。想必也能够想到，这里我们依旧要用到 QStyle 的各个 draw 函数，只不过这里我们不是简单的去调用它们，而是通过继承，将这些 draw 函数替换成我们自己的版本，达到自定义样式的目的。

 

虽然我们可以直接继承 QStyle 来实现，但是这并不是一个好主意。因为 QStyle 这个类很复杂，几乎所有的函数都是纯虚函数，这要求我们必须一个个实现它们。有时候，我们并不需要自己实现所有功能，仅仅是做简单的修改。于是，从 4.6 版本开始，Qt 提供了一个专门的类，QProxyStyle。我们要做的就是继承 QProxyStyle，覆盖我们感兴趣的函数即可。看下面一个简单的实例：

MyProxyStyle 覆盖了 drawControl() 函数，然后判断，如果是 button label 的话，绘制文本 “fixed”。可想而知，我们的 QPushButton::setText() 函数已经没有作用了，因为我们在绘制时没有使用这个属性，也就不会显示出来了。不管你设不设置，所有 button 的 text 都会是 fixed。如果要使用这个 style ，需要在运行前设置，例如：

这样，我们就可以用我们自己的 style 显示组件了。

 

就像前面所说，自定义 style 是一个相当复杂的话题，我们不可能在这里完全说明。不过，也正因为 Qt 提供了这种机制，也能够让我们可以比较轻松地实现自定义 style。