剖析QMenu & Qt完全定制化菜单

贴张效果图: 

定制包括: 

1. 周边阴影

2. 菜单项的元素(分割符, 控制ICON大小, 文字显示位置与颜色, 子菜单指示符)

菜单内的效果, 部分可以使用stylesheet实现, 但要做到这样的定制化, stylesheet是做不到的

下面介绍如何实现这些效果: 

1. 实现阴影效果

默认的Qt菜单QMenu的效果是这样的

1) 首先需要去除下拉阴影(Drop shadow)

Qt的菜单是继承QWidget然后自绘的, dropshadow不属于自绘范围, 是windows popup类型窗口默认的样式, 无法通过正常途径去除

可以从源码中看到调用过程大概是这样: 

qmenu::popup -> qwidget::show() -> QWidgetPrivate::show_helper() -> show_sys();

  而这时候, 还未调用qmenu::paintevent

而且不能去除QMenu的Popup 属性, 因为QMenu的实现依赖Popup属性, 例如:

　　QMenuPrivate::activateAction中使用QApplication::activePopupWidget()函数

在windows平台下:

对窗口的handle操作, 可以去掉drop shadow.  参考http://stackoverflow.com/questions/13776119/qt-menu-without-shaodw

menu.h

#ifndef MENU_H
#define MENU_H

#include <QMenu>

class Menu : public QMenu
{
    Q_OBJECT
public:
    explicit Menu(QWidget *parent = 0);
    explicit Menu(const QString & title);

protected:
    virtual bool event(QEvent *event);

signals:

public slots:

};

#endif // MENU_H

menu.cpp

#include "menu.h"


Menu::Menu(QWidget *parent) :
    QMenu(parent)
{

}

Menu::Menu(const QString &title) :
    QMenu(title)
{

}



bool Menu::event(QEvent *event)
{
    static bool class_amended = false;
    if (event->type() == QEvent::WinIdChange)
    {
        HWND hwnd = reinterpret_cast<HWND>(winId());
        if (class_amended == false)
        {
            class_amended = true;
            DWORD class_style = ::GetClassLong(hwnd, GCL_STYLE);
            class_style &= ~CS_DROPSHADOW;
            ::SetClassLong(hwnd, GCL_STYLE, class_style);
        }
       
    }
    return QWidget::event(event);
}

大概思路是:　在event中截获QEvent::WinIdChange事件, 然后获得窗口handle,  使用GetClassLong / SetClassLong 去除 CS_DROPSHADOW flags, 即可去除阴影

2) 使用dwm实现环绕阴影

优点：系统内置支持

缺点:　仅在vista以上并开启aero特效的情况, 使菜单有阴影环绕.

#pragma comment( lib, "dwmapi.lib" )
#include "dwmapi.h"

bool Menu::event(QEvent *event)
{
    static bool class_amended = false;
    if (event->type() == QEvent::WinIdChange)
    {
        HWND hwnd = reinterpret_cast<HWND>(winId());
        if (class_amended == false)
        {
            class_amended = true;
            DWORD class_style = ::GetClassLong(hwnd, GCL_STYLE);
            class_style &= ~CS_DROPSHADOW;
            ::SetClassLong(hwnd, GCL_STYLE, class_style);
        }
        DWMNCRENDERINGPOLICY val = DWMNCRP_ENABLED;
        ::DwmSetWindowAttribute(hwnd, DWMWA_NCRENDERING_POLICY, &val, sizeof(DWMNCRENDERINGPOLICY));

        // This will turn OFF the shadow
        // MARGINS m = {0};
        // This will turn ON the shadow
        MARGINS m = {-1};
        HRESULT hr = ::DwmExtendFrameIntoClientArea(hwnd, &m);
        if( SUCCEEDED(hr) )
        {
            //do more things
        }
    }
    return QWidget::event(event);
}

简单地修改一下event的实现即可

3) 手动绘制阴影

1. CCustomMenu 继承 QMenu

void CCustomMenu::_Init()
{
    // 必须设置popup, 因为QMenuPrivate::activateAction中使用QApplication::activePopupWidget()函数
    this->setWindowFlags(Qt::Popup | Qt::FramelessWindowHint); 
    this->setAttribute(Qt::WA_TranslucentBackground); 
    this->setObjectName("CustomMenu");  // 以objectname 区分Qt内置菜单和CCustomMenu

}

设置菜单背景透明

objectname是为了在绘制时区分不同风格的菜单(比如原生Qmenu与CCustomMenu或者其他CCustomMenu2等)

2. 实现CCustomStyle (参考Qt的源码 QFusionStyle)

CCustomStyle继承自QProxyStyle, Qt控件中的基础元素都是通过style控制, style比stylesheet更底层, 可以做到更精细的控制

/**@brief 定制菜单style
    @author  lwh 
*/
class CCustomStyle : public QProxyStyle
{
    Q_OBJECT

public:
    CCustomStyle(QStyle *style = 0); 

    void drawControl(ControlElement control, const QStyleOption *option,
        QPainter *painter, const QWidget *widget) const;

    void drawPrimitive(PrimitiveElement element, const QStyleOption *option,
        QPainter *painter, const QWidget *widget) const; 

    int pixelMetric ( PixelMetric pm, const QStyleOption * opt, const QWidget * widget) const; 

private:
    void _DrawMenuItem(const QStyleOption *option,
        QPainter *painter, const QWidget *widget) const; 
    QPixmap     _pixShadow     ; //阴影图片    
};

首先需要调整菜单项与边框的距离, 用于绘制阴影

在pixelMetric 中添加

    if(pm == PM_MenuPanelWidth) 
        return 6;        // 调整边框宽度, 以绘制阴影

pixelMetric 中描述了像素公制可取的一些值,一个像素公制值是单个像素在样式中表现的尺寸. 

然后再drawPrimitive实现阴影绘制

void CCustomStyle::drawPrimitive( PrimitiveElement element, const QStyleOption *option, QPainter *painter, const QWidget *widget ) const
{
    if(element == PE_FrameMenu)
    {
        painter->save();
        {
            if(_pixShadow.isNull() 
                || widget->objectName() != "CustomMenu")  // fix bug: Qt的内置菜单显示不正常(如TextEdit右键菜单)
            {
                painter->restore();    
                return __super::drawPrimitive(element, option, painter, widget); 
            }

            QSize szThis = option->rect.size();
            QPixmap pixShadowBg = _DrawNinePatch(szThis, _pixShadow); 
            painter->drawPixmap(option->rect, pixShadowBg);                
        }
        painter->restore();    
        return; 
    }
    __super::drawPrimitive(element, option, painter, widget); 
}

QStyle::PE_FrameMenu      Frame for popup windows/menus; see also QMenu.

注意: 绘制完直接return

_DrawNinePatch是以九宫格形式绘制, 将这样一张小的阴影图绘制到窗口时, 如果直接拉伸, 会变得非常模糊. 

而九宫格形式可以绘制出相对漂亮的背景, 这种技巧同样可以应用在其他控件上. 

const QPixmap _DrawNinePatch( QSize szDst, const QPixmap &srcPix )
{
    // 绘制背景图到, 以九宫格形式

    QPixmap dstPix(szDst); 
    dstPix.fill(QColor(255, 255, 255, 0));
    QPainter painter;
    painter.begin(&dstPix);

    int nW = szDst.width();
    int nH = szDst.height();

    int nWBg = srcPix.width();
    int nHBg = srcPix.height();
    QPoint m_ptBgLT(10, 10); 
    QPoint m_ptBgRB(19, 19); 

    QPoint ptDstLT(m_ptBgLT.x(), m_ptBgLT.y());
    QPoint ptDstRB(nW-(nWBg-m_ptBgRB.x()), nH-(nHBg-m_ptBgRB.y()));

    //LT
    painter.drawPixmap(QRect(0,0,ptDstLT.x(), ptDstLT.y()), srcPix, QRect(0,0,m_ptBgLT.x(), m_ptBgLT.y()));
    //MT
    painter.drawPixmap(QRect(ptDstLT.x(),0, ptDstRB.x()-ptDstLT.x(), ptDstLT.y()), srcPix, QRect(m_ptBgLT.x(),0,m_ptBgRB.x()-m_ptBgLT.x(), m_ptBgLT.y()));
    //RT
    painter.drawPixmap(QRect(ptDstRB.x(),0,nW-ptDstRB.x(), ptDstLT.y()), srcPix, QRect(m_ptBgRB.x(),0,nWBg-m_ptBgRB.x(), m_ptBgLT.y()));
    //LM
    painter.drawPixmap(QRect(0,ptDstLT.y(),ptDstLT.x(), ptDstRB.y()-ptDstLT.y()), srcPix, QRect(0,m_ptBgLT.y(),m_ptBgLT.x(), m_ptBgRB.y()-m_ptBgLT.y()));
    //MM
    painter.drawPixmap(QRect(ptDstLT.x(),ptDstLT.y(),ptDstRB.x()-ptDstLT.x(), ptDstRB.y()-ptDstLT.y()), srcPix, QRect(m_ptBgLT.x(),m_ptBgLT.y(),m_ptBgRB.x()-m_ptBgLT.x(), m_ptBgRB.y()-m_ptBgLT.y()));
    //RM
    painter.drawPixmap(QRect(ptDstRB.x(),ptDstLT.y(), nW-ptDstRB.x(), ptDstRB.y()-ptDstLT.y()), srcPix, QRect(m_ptBgRB.x(),m_ptBgLT.y(), nWBg-m_ptBgRB.x(), m_ptBgRB.y()-m_ptBgLT.y()));
    //LB
    painter.drawPixmap(QRect(0,ptDstRB.y(),ptDstLT.x(), nH-ptDstRB.y()), srcPix, QRect(0,m_ptBgRB.y(),m_ptBgLT.x(), nHBg-m_ptBgRB.y()));
    //MB
    painter.drawPixmap(QRect(ptDstLT.x(),ptDstRB.y(),ptDstRB.x()-ptDstLT.x(),  nH-ptDstRB.y()), srcPix, QRect(m_ptBgLT.x(),m_ptBgRB.y(),m_ptBgRB.x()-m_ptBgLT.x(),  nHBg-m_ptBgRB.y()));
    //RB
    painter.drawPixmap(QRect(ptDstRB.x(),ptDstRB.y(),nW-ptDstRB.x(),  nH-ptDstRB.y()), srcPix, QRect(m_ptBgRB.x(),m_ptBgRB.y(),nWBg-m_ptBgRB.x(),  nHBg-m_ptBgRB.y()));

    painter.end(); 
    return dstPix; 
}

2.  绘制菜单项

1) 控制ICON大小

在pixelMetric中:

    if (pm == QStyle::PM_SmallIconSize) 
        return 12;    //返回ICON的大小    

2) 绘制菜单项内容

void CCustomStyle::drawControl( ControlElement control, const QStyleOption *option, QPainter *painter, const QWidget *widget ) const
{
    switch(control )
    {
    case CE_MenuItem:
        {
            _DrawMenuItem(option, painter, widget);
            return;            // 直接返回, 否则会被super::drawcontrol覆盖
        }
    }
    __super::drawControl(control, option, painter, widget); 
}

void CCustomStyle::_DrawMenuItem(const QStyleOption *option, QPainter *painter, const QWidget *widget ) const
{
    painter->save();

    if (const QStyleOptionMenuItem *menuItem = qstyleoption_cast<const QStyleOptionMenuItem *>(option))
    {
        // 先绘制一层背景(否则在透明情况下, 会直接透过去);
        painter->setPen(colItemBg); 
        painter->setBrush(colItemBg); 
        painter->drawRect(option->rect); 

        if (menuItem->menuItemType == QStyleOptionMenuItem::Separator) {
            int w = 0;
            if (!menuItem->text.isEmpty()) {                // 绘制分隔符文字
                painter->setFont(menuItem->font);
                proxy()->drawItemText(painter, menuItem->rect.adjusted(5, 0, -5, 0), Qt::AlignLeft | Qt::AlignVCenter,
                    menuItem->palette, menuItem->state & State_Enabled, menuItem->text,
                    QPalette::Text);
                w = menuItem->fontMetrics.width(menuItem->text) + 5;
            }
            painter->setPen(colSeparator);
            bool reverse = menuItem->direction == Qt::RightToLeft;
            painter->drawLine(menuItem->rect.left() + 5 + (reverse ? 0 : w), menuItem->rect.center().y(),
                menuItem->rect.right() - 5 - (reverse ? w : 0), menuItem->rect.center().y());
            painter->restore();
            return;
        }
        bool selected = menuItem->state & State_Selected && menuItem->state & State_Enabled;
        if (selected) {
            QRect r = option->rect;
            painter->fillRect(r, colItemHighlight);
        }
        bool checkable = menuItem->checkType != QStyleOptionMenuItem::NotCheckable;
        bool checked = menuItem->checked;
        bool sunken = menuItem->state & State_Sunken;
        bool enabled = menuItem->state & State_Enabled;

        bool ignoreCheckMark = false;
        int checkcol = qMax(menuItem->maxIconWidth, 20);

        if (qobject_cast<const QComboBox*>(widget))
            ignoreCheckMark = true; //ignore the checkmarks provided by the QComboMenuDelegate

        if (!ignoreCheckMark) {
            // Check
            QRect checkRect(option->rect.left() + 7, option->rect.center().y() - 6, 14, 14);
            checkRect = visualRect(menuItem->direction, menuItem->rect, checkRect);
            if (checkable) {
                if (menuItem->checkType & QStyleOptionMenuItem::Exclusive) {
                    // Radio button 未实现
                    if (checked || sunken) {
                    /*    painter->setRenderHint(QPainter::Antialiasing);
                        painter->setPen(Qt::NoPen);

                        QPalette::ColorRole textRole = !enabled ? QPalette::Text:
                            selected ? QPalette::HighlightedText : QPalette::ButtonText;
                        painter->setBrush(option->palette.brush( option->palette.currentColorGroup(), textRole));
                        painter->drawEllipse(checkRect.adjusted(4, 4, -4, -4));
                        */
                    }
                } else {
                    // Check box
                    if (menuItem->icon.isNull()) {
                        QStyleOptionButton box;
                        box.QStyleOption::operator=(*option);
                        box.rect = checkRect;
                        if (checked)
                            box.state |= State_On;
                        proxy()->drawPrimitive(PE_IndicatorCheckBox, &box, painter, widget);
                        
                    }
                }
            }
        } else { //ignore checkmark
            if (menuItem->icon.isNull())
                checkcol = 0;
            else
                checkcol = menuItem->maxIconWidth;
        }

        // Text and icon, ripped from windows style
        bool dis = !(menuItem->state & State_Enabled);
        bool act = menuItem->state & State_Selected;
        const QStyleOption *opt = option;
        const QStyleOptionMenuItem *menuitem = menuItem;

        QPainter *p = painter;
        QRect vCheckRect = visualRect(opt->direction, menuitem->rect,
            QRect(menuitem->rect.x() + 4, menuitem->rect.y(),
            checkcol, menuitem->rect.height()));
        if (!menuItem->icon.isNull()) {
            QIcon::Mode mode = dis ? QIcon::Disabled : QIcon::Normal;
            if (act && !dis)
                mode = QIcon::Active;
            QPixmap pixmap;

            int smallIconSize = proxy()->pixelMetric(PM_SmallIconSize, option, widget);
            QSize iconSize(smallIconSize, smallIconSize);
            if (const QComboBox *combo = qobject_cast<const QComboBox*>(widget))
                iconSize = combo->iconSize();
            if (checked)
                pixmap = menuItem->icon.pixmap(iconSize, mode, QIcon::On);
            else
                pixmap = menuItem->icon.pixmap(iconSize, mode);

            int pixw = pixmap.width();
            int pixh = pixmap.height();

            QRect pmr(0, 0, pixw, pixh);
            pmr.moveCenter(vCheckRect.center());
            painter->setPen(colText);//menuItem->palette.text().color()
            if (checkable && checked) {
                QStyleOption opt = *option;
                if (act) {
                    QColor activeColor = mergedColors(
                        colItemBg, //option->palette.background().color(),
                        colItemHighlight // option->palette.highlight().color());
                        ); 
                    opt.palette.setBrush(QPalette::Button, activeColor);
                }
                opt.state |= State_Sunken;
                opt.rect = vCheckRect;
                proxy()->drawPrimitive(PE_PanelButtonCommand, &opt, painter, widget);
            }
            painter->drawPixmap(pmr.topLeft(), pixmap);
        }
        if (selected) {
            painter->setPen(colText);//menuItem->palette.highlightedText().color()
        } else {
            painter->setPen(colText); //menuItem->palette.text().color()
        }
        int x, y, w, h;
        menuitem->rect.getRect(&x, &y, &w, &h);
        int tab = menuitem->tabWidth;
        QColor discol;
        if (dis) {
            discol = colDisText; //menuitem->palette.text().color()
            p->setPen(discol);
        }
        int xm = windowsItemFrame + checkcol + windowsItemHMargin + 2;
        int xpos = menuitem->rect.x() + xm;

        QRect textRect(xpos, y + windowsItemVMargin, w - xm - windowsRightBorder - tab + 1, h - 2 * windowsItemVMargin);
        QRect vTextRect = visualRect(opt->direction, menuitem->rect, textRect);
        QString s = menuitem->text;
        if (!s.isEmpty()) {                     // draw text
            p->save();
            int t = s.indexOf(QLatin1Char('	'));
            int text_flags = Qt::AlignVCenter | Qt::TextShowMnemonic | Qt::TextDontClip | Qt::TextSingleLine;
            if (!__super::styleHint(SH_UnderlineShortcut, menuitem, widget))
                text_flags |= Qt::TextHideMnemonic;
            text_flags |= Qt::AlignLeft;
            if (t >= 0) {
                QRect vShortcutRect = visualRect(opt->direction, menuitem->rect,
                    QRect(textRect.topRight(), QPoint(menuitem->rect.right(), textRect.bottom())));
                if (dis && !act && proxy()->styleHint(SH_EtchDisabledText, option, widget)) {
                    p->setPen(colText);//menuitem->palette.light().color()
                    p->drawText(vShortcutRect.adjusted(1, 1, 1, 1), text_flags, s.mid(t + 1));
                    p->setPen(discol);
                }
                p->drawText(vShortcutRect, text_flags, s.mid(t + 1));
                s = s.left(t);
            }
            QFont font = menuitem->font;
            // font may not have any "hard" flags set. We override
            // the point size so that when it is resolved against the device, this font will win.
            // This is mainly to handle cases where someone sets the font on the window
            // and then the combo inherits it and passes it onward. At that point the resolve mask
            // is very, very weak. This makes it stonger.
            font.setPointSizeF(QFontInfo(menuItem->font).pointSizeF());

            if (menuitem->menuItemType == QStyleOptionMenuItem::DefaultItem)
                font.setBold(true);

            p->setFont(font);
            if (dis && !act && proxy()->styleHint(SH_EtchDisabledText, option, widget)) {
                p->setPen(menuitem->palette.light().color()); 
                p->drawText(vTextRect.adjusted(1, 1, 1, 1), text_flags, s.left(t));
                p->setPen(discol);
            }
            p->drawText(vTextRect, text_flags, s.left(t));
            p->restore();
        }

        // Arrow 绘制子菜单指示符
        if (menuItem->menuItemType == QStyleOptionMenuItem::SubMenu) {// draw sub menu arrow
            int dim = (menuItem->rect.height() - 4) / 2;
            PrimitiveElement arrow;
            arrow = option->direction == Qt::RightToLeft ? PE_IndicatorArrowLeft : PE_IndicatorArrowRight;
            int xpos = menuItem->rect.left() + menuItem->rect.width() - 3 - dim;
            QRect  vSubMenuRect = visualRect(option->direction, menuItem->rect,
                QRect(xpos, menuItem->rect.top() + menuItem->rect.height() / 2 - dim / 2, dim, dim));
            QStyleOptionMenuItem newMI = *menuItem;
            newMI.rect = vSubMenuRect;
            newMI.state = !enabled ? State_None : State_Enabled;
            if (selected)
                newMI.palette.setColor(QPalette::ButtonText,                                        // 此处futionstyle 有误, QPalette::Foreground改为ButtonText
                    colIndicatorArrow);//newMI.palette.highlightedText().color()
            else
                newMI.palette.setColor(QPalette::ButtonText,
                    colIndicatorArrow);

            proxy()->drawPrimitive(arrow, &newMI, painter, widget);
        }
    }
    painter->restore();    
}

_DrawMenuItem的代码较长,  但比较简单, 都是一些条件判断加上绘图语句, 需要自己修改pallete的颜色

值得注意的是: 在透明情况下, 应先绘制一层menu item 的背景, 否则会直接透过去

3) 最后还要重写一下QMenu的addMenu

以使子菜单也生效

QAction * CCustomMenu::addMenu( CCustomMenu *menu )
{
    return QMenu::addMenu(menu); 
}

CCustomMenu * CCustomMenu::addMenu( const QString &title )
{
    CCustomMenu *menu = new CCustomMenu(title, this);
    addAction(menu->menuAction());
    return menu;
}

CCustomMenu * CCustomMenu::addMenu( const QIcon &icon, const QString &title )
{
    CCustomMenu *menu = new CCustomMenu(title, this);
    menu->setIcon(icon);
    addAction(menu->menuAction());
    return menu;
}

完整的工程代码在此, https://bitbucket.org/lingdhox/misc/src 或者CSDN http://download.csdn.net/detail/l470080245/6731989

编译需要VS2010+Qt5. 

PS: 

关于QMenu如何处理菜单消失, 参考我的另一篇blog Qt中QMenu的菜单关闭处理方法