QStyleOptionGraphicsItem实现自绘按钮悬浮按下状态

Qt官方自带的例子animatedtiles，该工程存放在Qt安装目录下的

Examples\Qt-XX.XX.XX\widgets\animation\animatedtiles 目录

其中XX.XX.XX为Qt的版本号，如：5.14.1。有如下代码：

class Button : public QGraphicsWidget
{
    Q_OBJECT
public:
    ......   // 该部分代码略，请参见Qt官方自带的例子查看

    void paint(QPainter *painter, const QStyleOptionGraphicsItem *option, QWidget *) override
    {
        bool down = option->state & QStyle::State_Sunken;
        QRectF r = boundingRect();
        QLinearGradient grad(r.topLeft(), r.bottomRight());
        grad.setColorAt(down ? 1 : 0, option->state & QStyle::State_MouseOver ? Qt::white : Qt::lightGray);
        grad.setColorAt(down ? 0 : 1, Qt::darkGray);
        painter->setPen(Qt::darkGray);
        painter->setBrush(grad);
        painter->drawEllipse(r);
        QLinearGradient grad2(r.topLeft(), r.bottomRight());
        grad.setColorAt(down ? 1 : 0, Qt::darkGray);
        grad.setColorAt(down ? 0 : 1, Qt::lightGray);
        painter->setPen(Qt::NoPen);
        painter->setBrush(grad);
        if (down)
            painter->translate(2, 2);
        painter->drawEllipse(r.adjusted(5, 5, -5, -5));
        painter->drawPixmap(-_pix.width()/2, -_pix.height()/2, _pix);
    }

      ...... // 该部分代码略，请参见Qt官方自带的例子查看
};

第9行代码：判断按钮是否被鼠标按下了，如果按钮被按下，则：

ption->state & QStyle::State_Sunken即down就为true，否则就会false。

第10-16行：创建一个渐变画刷和一个Qt::darkGray颜色的画笔。并利用该画刷、画笔在按钮所在最小外包围矩形中绘制了一个圆形。创建画刷的思路是：

• 从按钮最小外包围矩形左上角到右下角进行渐变。
• 如果鼠标将按钮按下 了，则设置渐变的起点颜色为Qt::darkGray、终点颜色为Qt::white。

        此时第12、13行代码变为：

grad.setColorAt(1, Qt::white);
grad.setColorAt(0, Qt::darkGray);

 

此时绘制出的按钮如下（注意：17行后的代码都注释掉了，这里仅仅显示的是17行之前的代码效果）：

 可以看到从左上角的深灰渐变到右下角的白色。

• 如果鼠标没将按钮按下，仅仅是悬浮在按钮上面，则此时第12、13行代码变为：

grad.setColorAt(0, Qt::white);
grad.setColorAt(1, Qt::darkGray);

 

此时绘制出来的效果如下（注意：17行后的代码都注释掉了，这里仅仅显示的是17行之前的代码效果）：

 可以看到从左上角的白色渐变到右下角的深灰色。

• 如果鼠标既没按下按钮也没悬浮在按钮上面，则第12、13行代码如下：

grad.setColorAt(0, Qt::lightGray);
grad.setColorAt(1, Qt::darkGray);
 

效果如下（注意：17行后的代码都注释掉了，这里仅仅显示的是17行之前的代码效果）：

 

 可以看到从左上角的浅灰色渐变到右下角的深灰色。

第17-21行：如果鼠标被按下，则创建浅灰到深灰渐变画刷；如果鼠标没按下按钮，则创建深灰到浅灰渐变画刷。注：第20行画笔一定要是Qt::NoPen，否则第24行创建的圆形和第16行创建的圆形有画笔留下的痕迹，进而明显可以看出不是一个整体的圆形。

第24行：因为15行设置的渐变画刷和21行设置的渐变画刷不一样，再加上本行将按钮最小外包矩形宽高缩小10个单位，这样创建的两个圆形有显著的凸凹视觉效果，更逼真，如下（注释掉了第25行代码后的效果）：

第22-23行：如果按钮被按下了，就将坐标系向右、向下平移2个单位，这样就会给人造成按下的逼真视觉效果。 

至此，本函数分析完毕！