Qt学习笔记外观篇（二）：QStyle

wangyanphp

墨衍会员 · AI 创作全网分发码龄14年

关注

原创最新推荐文章于 2025-07-01 10:22:16 发布 2.1w 阅读 AI 写同款· GEO 优化 ›

AI权益加码！Claude Code、Cursor等20+工具免费用！购周边限时加赠Coding Plan Lite，畅享主流AI工具！学习进阶更高效！阅读详情

三种方法来重新定义Qt内置窗口部件的外观：
1）子类化QStyle或者一个预定义的风格，这种方法很好用，Qt本身就是用这种方法为它所支持的不同平台提供基于平台的外观的
2）子类化个别的窗口部件类，并且重新实现它的绘制和鼠标事件处理器。

3）Qt 样式表

QStyle类包装应用程序外观，对于应用程序的每个窗口部件，都会使用QStyle进行绘制。
QStyle API包含绘制图形元素[drawPrimitive(),drawControl(),drawComplexControl()等]函数，样式查询函数[pixelMetrics(),styleHint(),hitTest()等]。QStyle成员函数典型的带有QStyleOption对象，它包含绘制窗口部件的通用信息（例如调色板）以及特有信息（例如按钮的文字）。

下面解析如何子类化QStyle来实现自定义外观：

子类化QStyle一般是通过重新实现几个虚函数来实现的。

1）polish(QPalette& palette)：通常在此函数内指定配色方案，也即配置调色板

2）polish(QWidget*)&unpolish(QWidget*)：当样式应用到窗口部件时，polish(QWidget*)就会调用，从而允许我们进行最后的定制，当动态改变样式的时候，unpolish就会调用，来撤销polish的影响。polish(QWidget*)一般用做窗口部件的事件过滤器。

3）styleHint返回关于样式外观的提示

4）pixelMetric返回像素值，来影响窗口部件的绘制

5）drawPrimitive(),drawControl(),drawComplexControl()具体的执行绘制。

如何实现自定义样式使得左侧窗口成为右侧窗口？

首先是颜色，各个窗口部件的背景色发生了变化；然后是QSpinBox的形状发生了变化，QCheckBox的选取标志发生了变化还有就是Save&Cancel按钮的位置发生了变化。即实现：带渐变背景的圆角按钮、非传统的微调框、夸张的选取标志和“棕色画刷”背景。

类声明如下：

#include <QWindowsStyle>
class BronzeStyle : public QWindowsStyle
{
    Q_OBJECT
public:
    BronzeStyle(){}
    void polish(QPalette& palette);
    void polish(QWidget* widget);
    void unpolish(QWidget* widget);
    int  styleHint(StyleHint hint, const QStyleOption *opt, const QWidget *widget=0, QStyleHintReturn *returnData=0) const;
    int  pixelMetric(PixelMetric pm, const QStyleOption *option, const QWidget *widget=0) const;
    void drawPrimitive(PrimitiveElement which,const QStyleOption* option,QPainter* painter,const QWidget* widget=0)const;
    void drawComplexControl(ComplexControl which,const QStyleOptionComplex* option,QPainter* painter,const QWidget* widget=0)const;
    QRect subControlRect(ComplexControl cc, const QStyleOptionComplex *opt, SubControl sc, const QWidget *w=0) const;
public slots:
    QIcon standardIconImplementation(StandardPixmap standardIcon, const QStyleOption *option, const QWidget *widget=0) const;
private:
    void drawBronzeFrame(const QStyleOption* option,QPainter* painter)const;
    void drawBronzeBevel(const QStyleOption* option,QPainter* painter)const;
    void drawBronzeCheckBoxIndicator(const QStyleOption* option,QPainter* painter)const;
    void drawBronzeSpinBoxButton(SubControl which,const QStyleOptionComplex* option,QPainter* painter)const;

};

现在开始实现第一步：颜色配置

void BronzeStyle::polish(QPalette &palette)
{
    QPixmap backgroundImage(":/images/background.png");
    QColor bronze(207,155,95);
    QColor veryLightBlue(239,239,247);
    QColor lightBlue(223,223,239);
    QColor darkBlue(95,95,191);

    palette=QPalette(bronze);
    palette.setBrush(QPalette::Window,backgroundImage);
    palette.setBrush(QPalette::BrightText, Qt::white);
    palette.setBrush(QPalette::Base, veryLightBlue);
    palette.setBrush(QPalette::AlternateBase, lightBlue);
    palette.setBrush(QPalette::Highlight, darkBlue);
    palette.setBrush(QPalette::Disabled, QPalette::Highlight,Qt::darkGray);
}

根据前篇中对QPalette的介绍，我们很容易明白这里的设置。

第二步，来完成查询函数，提供绘制窗口部件所需要的信息：

int BronzeStyle::styleHint(StyleHint which, const QStyleOption *option, const QWidget *widget,
                           QStyleHintReturn *returnData) const
{
    switch(which){
    case SH_DialogButtonLayout:
        return int(QDialogButtonBox::MacLayout);
    case SH_EtchDisabledText:
        return int(true);
    case SH_DialogButtonBox_ButtonsHaveIcons:
        return int(true);
    case SH_UnderlineShortcut:
        return int(false);
    default:
        return QWindowsStyle::styleHint(which,option,widget,returnData);
    }
}

int BronzeStyle::pixelMetric(PixelMetric which, const QStyleOption *option, const QWidget *widget) const
{
    switch(which){
    case PM_ButtonDefaultIndicator:
        return 0;
    case PM_IndicatorHeight:
    case PM_IndicatorWidth:
        return 16;
    case PM_CheckBoxLabelSpacing:
        return 8;
    case PM_DefaultFrameWidth:
        return 2;
    default:
        return QWindowsStyle::pixelMetric(which,option,widget);
    }
}

其中的styleHint函数完成的样式外观的提示，对于SH_DialogButtonLayout，其返回MacLayout，从而实现OK键在Cancel的右侧；pixelMetric函数返回关于大小的提示：按钮Indicator值为0，checkbox指示器为16*16的正方形，checkbox指示器与文本的距离为8，FramwWidth为2。

第三步实现绘制：

QStyle绘制函数的参数形式一般是

1）一个enum成员指定需要绘制的图形元素

2）一个QStyleOption指定这个图形元素怎么画和在哪儿画

3）一个QPainter

4）一个可选参数QWidget，指定了图形元素是在哪一个窗口部件上绘制

void BronzeStyle::drawPrimitive(PrimitiveElement which, const QStyleOption *option,
                                QPainter *painter, const QWidget *widget) const
{
    switch(which){
    case PE_IndicatorCheckBox:
        drawBronzeCheckBoxIndicator(option,painter);
        break;
    case PE_PanelButtonCommand:
        drawBronzeBevel(option,painter);
        break;
    case PE_Frame:
        drawBronzeFrame(option,painter);
        break;
    case PE_FrameDefaultButton:
        break;
    default:
        QWindowsStyle::drawPrimitive(which,option,painter,widget);
    }
}

drawPrimitive（）绘制“基本的”用户界面元素，这些元素会被几个窗口部件使用。此处，我们要实现夸张的选择指示器和渐变的按钮，所以要用自定义的绘制函数实现对PE_IndicatorCheckBox和PE_PanelButtonCommand的绘制；

void BronzeStyle::drawComplexControl(ComplexControl which, const QStyleOptionComplex *option,
                                     QPainter *painter, const QWidget *widget) const
{
    if(which==CC_SpinBox){
        drawBronzeSpinBoxButton(SC_SpinBoxDown,option,painter);
        drawBronzeSpinBoxButton(SC_SpinBoxUp,option,painter);
        QRect rect=subControlRect(CC_SpinBox,option,SC_SpinBoxEditField).adjusted(-1,0,+1,0);
        painter->setPen(QPen(option->palette.mid(),1.0));
        painter->drawLine(rect.topLeft(),rect.bottomLeft());
        painter->drawLine(rect.topRight(),rect.bottomRight());
    }else{
        return QWindowsStyle::drawComplexControl(which,option,painter,widget);
    }
}

因为drawComplexControl函数绘制多重辅助控制器窗口部件而且我们需要非传统的SpinBox，所以此处实现对CC_SpinBox的自定义绘制：首先绘制两个按钮，然后在文本框两侧绘制两条线。注意此函数中调用了一个叫subControlRect的函数，此函数用于确定辅助控制器窗口部件的位置（所谓的辅助控制器即为窗口部件的某一组成部分，例如checkbox的指示器）。处理鼠标事件的时候也用它查找被单击的辅助控制器窗口部件。

QRect BronzeStyle::subControlRect(ComplexControl whichControl, const QStyleOptionComplex *option,
                                  SubControl whichSubControl, const QWidget *widget) const
{
    if(whichControl==CC_SpinBox){
        int frameWidth=pixelMetric(PM_DefaultFrameWidth,option,widget);
        int buttonWidth=16;
        switch(whichSubControl){
        case SC_SpinBoxFrame:
            return option->rect;
        case SC_SpinBoxEditField:
            return option->rect.adjusted(+buttonWidth,+frameWidth,-buttonWidth,-frameWidth);
        case SC_SpinBoxDown:
            return visualRect(option->direction,option->rect, QRect(option->rect.x(),option->rect.y(),
                                                       buttonWidth,option->rect.height()));
        case SC_SpinBoxUp:
            return visualRect(option->direction,option->rect, QRect(option->rect.right()-buttonWidth,
                                         option->rect.y(), buttonWidth,option->rect.height()));
        default:
            return QRect();
        }
    }else{
        return QWindowsStyle::subControlRect(whichControl,option,whichSubControl,widget);
    }

}

此处重新实现了对SpinBox的各个子部件的定位：左侧Down按钮（16*height），中间EditField，右侧Up按钮（16*height）。

上述的绘制函数完成了绘制任务的分派，下面是具体的绘制过程：

void BronzeStyle::drawBronzeFrame(const QStyleOption *option, QPainter *painter) const
{
    painter->save();
    painter->setRenderHint(QPainter::Antialiasing,true);

    painter->setPen(QPen(option->palette.foreground(),1.0));
    painter->drawRect(option->rect.adjusted(+1,+1,-1,-1));
    painter->restore();
}

void BronzeStyle::drawBronzeBevel(const QStyleOption *option, QPainter *painter) const
{
    QColor buttonColor=option->palette.button().color();
    int coeff=(option->state&State_MouseOver)?115:105;

    QLinearGradient gradient(0,0,0,option->rect.height());
    gradient.setColorAt(0.0,option->palette.light().color());
    gradient.setColorAt(0.2,buttonColor.lighter(coeff));
    gradient.setColorAt(0.8,buttonColor.darker(coeff));
    gradient.setColorAt(1.0,option->palette.dark().color());

    double penWidth=1.0;
    if(const QStyleOptionButton* buttonOpt=qstyleoption_cast<const QStyleOptionButton*>(option)){
        if(buttonOpt->features&QStyleOptionButton::DefaultButton)
            penWidth=2.0;
    }
    QRect roundRect=option->rect.adjusted(+1,+1,-1,-1);
    if(!roundRect.isValid())
        return;

    int diameter=12;
    int cx=100*diameter/roundRect.width();
    int cy=100*diameter/roundRect.height();

    painter->save();
    painter->setPen(Qt::NoPen);
    painter->setBrush(gradient);
    painter->drawRoundRect(roundRect,cx,cy);

    if(option->state&(State_On|State_Sunken)){
        QColor slightlyOpaqueBlack(0,0,0,63);
        painter->setBrush(slightlyOpaqueBlack);
        painter->drawRoundRect(roundRect,cx,cy);
    }

    painter->setRenderHint(QPainter::Antialiasing,true);
    painter->setPen(QPen(option->palette.foreground(),penWidth));
    painter->setBrush(Qt::NoBrush);
    painter->drawRoundRect(roundRect,cx,cy);
    painter->restore();
}

注意对按钮圆角和渐变效果的实现：首先获得需要圆角的绘制区域，然后使用渐变颜色填充绘制，最后绘制边框。其中涉及到的一些变化是：1）鼠标是否放在了按钮上？如果是，那么颜色*coeff。2）按钮是否被按下？如果是，那么使用slightlyOpaqueBlack填充；3）是否是默认按钮？如果是，那么边框加粗；

void BronzeStyle::drawBronzeSpinBoxButton(SubControl which, const QStyleOptionComplex *option,
                                          QPainter *painter) const
{
    PrimitiveElement arrow=PE_IndicatorArrowLeft;
    QRect buttonRect=option->rect;
    if((which==SC_SpinBoxUp)!=(option->direction==Qt::RightToLeft)){
        arrow=PE_IndicatorArrowRight;
        buttonRect.translate(buttonRect.width()/2,0);
    }
    buttonRect.setWidth((buttonRect.width()+1)/2);

    QStyleOption buttonOpt(*option);

    painter->save();
    painter->setClipRect(buttonRect,Qt::IntersectClip);
    if(!(option->activeSubControls&which))
        buttonOpt.state&=~(State_MouseOver|State_On|State_Sunken);
    drawBronzeBevel(&buttonOpt,painter);

    QStyleOption arrowOpt(buttonOpt);
    arrowOpt.rect=subControlRect(CC_SpinBox,option,which).adjusted(+3,+3,-3,-3);
    if(arrowOpt.rect.isValid())
        drawPrimitive(arrow,&arrowOpt,painter);
    painter->restore();
}

此为绘制SpinBox按钮的过程：首先确定按钮arrow图像，然后先绘制好按钮的panel（渐变和圆角），然后再绘制arrow图像

void BronzeStyle::drawBronzeCheckBoxIndicator(const QStyleOption *option, QPainter *painter) const
{
    painter->save();
    painter->setRenderHint(QPainter::Antialiasing,true);
    if(option->state&State_MouseOver){
        painter->setBrush(option->palette.alternateBase());
    }else{
        painter->setBrush(option->palette.base());
    }
    painter->drawRoundRect(option->rect.adjusted(+1,+1,-1,-1));
    if(option->state&(State_On|State_NoChange)){
        QPixmap pixmap;
        if(!(option->state&State_Enabled)){
            pixmap.load(":/images/checkmark-disabled.png");
        }else if(option->state&State_NoChange){
            pixmap.load(":/images/checkmark-partial.png");
        }else{
            pixmap.load(":/images/checkmark.png");
        }
        QRect pixmapRect=pixmap.rect().translated(option->rect.topLeft()).translated(+2,-6);
        QRect painterRect=visualRect(option->direction,option->rect,pixmapRect);
        if(option->direction==Qt::RightToLeft){
            painter->scale(-1.0,+1.0);
            painterRect.moveLeft(-painterRect.right()-1);
        }
        painter->drawPixmap(painterRect,pixmap);
    }
    painter->restore();
}

此为checkbox的指示器的绘制过程，首先绘制指示器的边框，然后根据checkbox是否选中，绘制选中的图像（此处为“对勾号”）。

QStyle绘制的整体流程框架就是如此，下面是一些补充：

void BronzeStyle::polish(QWidget *widget)
{
    if(qobject_cast<QAbstractButton*>(widget)||qobject_cast<QAbstractSpinBox*>(widget))
        widget->setAttribute(Qt::WA_Hover,true);
}

void BronzeStyle::unpolish(QWidget *widget)
{
    if(qobject_cast<QAbstractButton*>(widget)||qobject_cast<QAbstractSpinBox*>(widget))
        widget->setAttribute(Qt::WA_Hover,false);
}

使得鼠标进出窗口部件都产生绘制事件。

应用：QApplication::setStyle(new BronzeStyle);

这里的代码约300行，然而要开发一种功能齐全的自定义样式是一项很大的工程，大约需要3000~5000行代码，所以对于轻量级的改动，我们一般不使用此方法，但是此框架是Qt窗口部件的基本的绘制原理。