https://www.devbean.net/2011/08/native-style-qt-3/
https://blog.csdn.net/hyongilfmmm/article/details/83238938
需要说明一点的是,组件的 style 是一个非常复杂的内容,仅在这里不可能全部讲解清楚。如果需要自定义组件 style,还是自己仔细阅读相关文档。另外,这部分牵扯的类很多,函数也很复杂,步步为营才是最好的对待方法。除非非常必要,还是建议不要轻易去碰 style 这部分。
自定义 style,顾名思义,也就是自己实现样式。这里通常有两种实现方式:第一,重写 widget 的
paintEvent()
函数;第二,使用
QStyle
类。两种方式的侧重点有所不同:重写组件的
paintEvent()
函数,可以简单地实现某一类组件的样式;继承
QStyle
类,则可以实现对全部组件的一致性处理,例如,将程序中所有的 text 变成红色等。
首先我们来看看重写
paintEvent()
函数。
paintEvent()
是
QWidget
的一个函数,用于实现自身的绘制。一个组件显示到屏幕上,就是通过调用
paintEvent()
函数把它画出来。看看一个组件有多复杂,全部要使用
QPainter
提供的画点、画线的函数绘制出来,就知道这里的工作量了。当然也有偷懒的办法,就是重写
paintEvent()
的时候使用一张图片代替。我们这里就不讨论这种思路了,而是完全从代码开始。
我们以
QPushButton
为例。这里,我们创建一个 button,这个 button 在点击时可以凹下显示。为了重写
paintEvent()
函数,我们必须继承
QPushButton
类。头文件很简单,暂且略去,下面只看
paintEvent()
这个函数:
option.initFrom(
this
);
//
qDebug() << option.state;
option.state |= isDown() ?
QStyle::State_Sunken : QStyle::State_Raised;
//
qDebug() << option.state;
if
(isDefault())
option.features
|=
QStyleOptionButton::DefaultButton;
option.text
=
text();
option.icon
=
icon();
QPainter painter(
this
);
style()
->drawControl(QStyle::CE_PushButton, &option, &painter,
this
);
尽管前面说过,我们需要重头绘制整个组件,但实际上,Qt 为我们提供了一系列方便的函数,用于绘制出各个组件的组成部分。这种绘制方式在将组合进行组合的情况下非常有用。例如,一个 combo box 实际上是一个 button 加上一个向下的三角形构成。那么,我不需要将整个 combo box 用像素画出来,而是借用 Qt 已有的组件进行绘制:画出一个 button 和一个三角形。所以,这里我们也使用类似的思路,让 Qt 绘制出组件的每个部分,而我们要做的就是修改参数,让它按照我们的参数绘制。
如何调用 Qt 的组件绘制函数呢?这个绘制函数是
QStyle
类的成员。
QWidget
提供了
style()
函数,返回当前的
QStyle
对象。那么,我们就可以通过这个对象绘制。注意上面代码中最后一行,我们从这里看起。下面给出这个函数的签名:
virtual void QStyle::drawControl ( ControlElement element,
const QStyleOption * option,
QPainter * painter,
const QWidget * widget = 0 ) const = 0;
尽管这是一个纯虚函数,但是类似于 Java 的 interface,我们可以直接使用
style()
返回的对象调用。这是一个很典型的 style 式的函数调用。翻看一下
QStyle
的声明,
QStyle
类提供了很多以 draw 打头的函数,用于绘制整个系统组件的绘制。这类 draw 函数一般会有四个参数:
一个 enum,用于指定要绘制哪个元素。这个 enum 在不同的 draw 函数中可能是不一样的。例如,在
drawControl()
中是
QStyle::ControlElement
,指的是组件;在
drawPrimitive()
中则是
QStyle::PrimitiveElement
,指的是组件的原始组成元素,例如焦点框,check box 的小勾等;
QStyleOption
对象指针。这个对象保存了 painter 绘制时所需要的所有数据信息,比如绘制大小、坐标、绘制文本等。不同的 element 可能对应着不同的
QStyleOption
的子类,这个在文档中可以找到;
QPainter
对象指针。系统即用这个 painter 进行绘制;
QWidget
对象指针,用于辅助绘制。
回到代码,我们可以看到,在
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
,覆盖我们感兴趣的函数即可。看下面一个简单的实例:
void
MyProxyStyle::drawControl(ControlElement element,
const
QStyleOption *
option,
QPainter
*
painter,
const
QWidget *widget)
const
if
(element ==
QStyle::CE_PushButtonLabel) {
painter
->drawText(option->rect,
"
fixed
"
);
}
else
{
QProxyStyle::drawControl(element, option, painter, widget);
这样,我们就可以用我们自己的 style 显示组件了。
就像前面所说,自定义 style 是一个相当复杂的话题,我们不可能在这里完全说明。不过,也正因为 Qt 提供了这种机制,也能够让我们可以比较轻松地实现自定义 style。
坚持就是胜利