使用QStyle高端定制弹出菜单 QMenu源码剖析(二)

有了前一篇的基础后，为了定制出个性化的QMenu。很容易就可以知道，需要自己实现一个QStyle；而具体是实现哪些部分呢，这就需要知道

QMenu源码里面是调用QStyle的哪些接口来绘制的了；从QPushButton的paintEvent可以看出它是使用的drawControl(CE_PushButton...)画出来的。

而QMenu我们可以使用一样的方法，QMenu的paintEvent源码如下

void QMenu::paintEvent(QPaintEvent *e)
{
Q_D(QMenu);
d->updateActionRects();
QPainter p(this);
QRegion emptyArea = QRegion(rect());

QStyleOptionMenuItem menuOpt;
menuOpt.initFrom(this); //初始化
menuOpt.state = QStyle::State_None;
menuOpt.checkType = QStyleOptionMenuItem::NotCheckable;
menuOpt.maxIconWidth = 0;
menuOpt.tabWidth = 0;
style()->drawPrimitive(QStyle::PE_PanelMenu, &menuOpt, &p, this);   //第一次绘画，画出了菜单背景面板

//calculate the scroll up / down rect
const int fw = style()->pixelMetric(QStyle::PM_MenuPanelWidth, 0, this);
const int hmargin = style()->pixelMetric(QStyle::PM_MenuHMargin,0, this);
const int vmargin = style()->pixelMetric(QStyle::PM_MenuVMargin, 0, this);

QRect scrollUpRect, scrollDownRect;
const int leftmargin = fw + hmargin + d->leftmargin;
const int topmargin = fw + vmargin + d->topmargin;
const int bottommargin = fw + vmargin + d->bottommargin;
const int contentWidth = width() - (fw + hmargin) * 2 - d->leftmargin - d->rightmargin;
if (d->scroll) {
if (d->scroll->scrollFlags & QMenuPrivate::QMenuScroller::ScrollUp)
scrollUpRect.setRect(leftmargin, topmargin, contentWidth, d->scrollerHeight());

if (d->scroll->scrollFlags & QMenuPrivate::QMenuScroller::ScrollDown)
scrollDownRect.setRect(leftmargin, height() - d->scrollerHeight() - bottommargin,
contentWidth, d->scrollerHeight());
}

//calculate the tear off rect
QRect tearOffRect;
if (d->tearoff) {
tearOffRect.setRect(leftmargin, topmargin, contentWidth,
style()->pixelMetric(QStyle::PM_MenuTearoffHeight, 0, this));
if (d->scroll && d->scroll->scrollFlags & QMenuPrivate::QMenuScroller::ScrollUp)
tearOffRect.translate(0, d->scrollerHeight());
}

//draw the items that need updating..
QRect scrollUpTearOffRect = scrollUpRect.united(tearOffRect);
for (int i = 0; i < d->actions.count(); ++i) {
QAction *action = d->actions.at(i);
QRect actionRect = d->actionRects.at(i);
if (!e->rect().intersects(actionRect)
|| d->widgetItems.value(action))
continue;
//set the clip region to be extra safe (and adjust for the scrollers)
emptyArea -= QRegion(actionRect);

QRect adjustedActionRect = actionRect;
if (!scrollUpTearOffRect.isEmpty() && adjustedActionRect.bottom() <= scrollUpTearOffRect.top())
continue;

if (!scrollDownRect.isEmpty() && adjustedActionRect.top() >=  scrollDownRect.bottom())
continue;

if (adjustedActionRect.intersects(scrollUpTearOffRect)) {
if (adjustedActionRect.bottom() <= scrollUpTearOffRect.bottom())
continue;
else
adjustedActionRect.setTop(scrollUpTearOffRect.bottom()+1);
}

if (adjustedActionRect.intersects(scrollDownRect)) {
if (adjustedActionRect.top() >= scrollDownRect.top())
continue;
else
adjustedActionRect.setBottom(scrollDownRect.top()-1);
}

QRegion adjustedActionReg(adjustedActionRect);
p.setClipRegion(adjustedActionReg);

QStyleOptionMenuItem opt;
initStyleOption(&opt, action);
opt.rect = actionRect;
style()->drawControl(QStyle::CE_MenuItem, &opt, &p, this);  //第二次绘画，画出了菜单项。
}

emptyArea -= QRegion(scrollUpTearOffRect);
emptyArea -= QRegion(scrollDownRect);

if (d->scrollUpTearOffItem || d->scrollDownItem) {
if (d->scrollUpTearOffItem)
d->scrollUpTearOffItem->updateScrollerRects(scrollUpTearOffRect);
if (d->scrollDownItem)
d->scrollDownItem->updateScrollerRects(scrollDownRect);
} else {
//paint scroll up /down
d->drawScroller(&p, QMenuPrivate::ScrollerTearOffItem::ScrollUp, scrollUpRect);
d->drawScroller(&p, QMenuPrivate::ScrollerTearOffItem::ScrollDown, scrollDownRect);
//paint the tear off..
d->drawTearOff(&p, tearOffRect);
}

//draw border
if (fw) {
QRegion borderReg;
borderReg += QRect(0, 0, fw, height()); //left
borderReg += QRect(width()-fw, 0, fw, height()); //right
borderReg += QRect(0, 0, width(), fw); //top
borderReg += QRect(0, height()-fw, width(), fw); //bottom
p.setClipRegion(borderReg);
emptyArea -= borderReg;
QStyleOptionFrame frame;
frame.rect = rect();
frame.palette = palette();
frame.state = QStyle::State_None;
frame.lineWidth = style()->pixelMetric(QStyle::PM_MenuPanelWidth);
frame.midLineWidth = 0;
style()->drawPrimitive(QStyle::PE_FrameMenu, &frame, &p, this); //第三次绘画，画出了菜单边框
}

//finally the rest of the spaces
p.setClipRegion(emptyArea);
menuOpt.state = QStyle::State_None;
menuOpt.menuItemType = QStyleOptionMenuItem::EmptyArea;
menuOpt.checkType = QStyleOptionMenuItem::NotCheckable;
menuOpt.rect = rect();
menuOpt.menuRect = rect();
style()->drawControl(QStyle::CE_MenuEmptyArea, &menuOpt, &p, this);  //最后一次画出了剩余区域

由上我们便知道了，菜单的绘制过程；先画背景面板、然后菜单项、然后整个菜单边框、最后空白区域；但是真实的菜单还有分隔线，子菜单，上面怎么没有出现呢？

这是因为分隔线和子菜单也是一个菜单项QAction，用QMenu::menuAction()可以返回这个菜单的QAction。我们也可以来看一下源码处理，在第二步绘画菜单项的前面调用了

initStyleOption()这个函数，用于菜单项的初始化。

void QMenu::initStyleOption(QStyleOptionMenuItem *option, const QAction *action) const
{
if (!option || !action)
return;

Q_D(const QMenu);
option->initFrom(this);
option->palette = palette();
option->state = QStyle::State_None;

if (window()->isActiveWindow())
option->state |= QStyle::State_Active;
if (isEnabled() && action->isEnabled()
&& (!action->menu() || action->menu()->isEnabled()))
option->state |= QStyle::State_Enabled;
else
option->palette.setCurrentColorGroup(QPalette::Disabled);

option->font = action->font().resolve(font());
option->fontMetrics = QFontMetrics(option->font);

if (d->currentAction && d->currentAction == action && !d->currentAction->isSeparator()) {
option->state |= QStyle::State_Selected
| (d->mouseDown ? QStyle::State_Sunken : QStyle::State_None);
}

option->menuHasCheckableItems = d->hasCheckableItems;
if (!action->isCheckable()) {
option->checkType = QStyleOptionMenuItem::NotCheckable;
} else {
option->checkType = (action->actionGroup() && action->actionGroup()->isExclusive())
? QStyleOptionMenuItem::Exclusive : QStyleOptionMenuItem::NonExclusive;
option->checked = action->isChecked();
}
if (action->menu())
option->menuItemType = QStyleOptionMenuItem::SubMenu;
else if (action->isSeparator())
option->menuItemType = QStyleOptionMenuItem::Separator;
else if (d->defaultAction == action)
option->menuItemType = QStyleOptionMenuItem::DefaultItem;
else
option->menuItemType = QStyleOptionMenuItem::Normal;
if (action->isIconVisibleInMenu())
option->icon = action->icon();
QString textAndAccel = action->text();
#ifndef QT_NO_SHORTCUT
if (textAndAccel.indexOf(QLatin1Char('\t')) == -1) {
QKeySequence seq = action->shortcut();
if (!seq.isEmpty())
textAndAccel += QLatin1Char('\t') + seq.toString(QKeySequence::NativeText);
}
#endif
option->text = textAndAccel;
option->tabWidth = d->tabWidth;
option->maxIconWidth = d->maxIconWidth;
option->menuRect = rect();
}

可以看到把菜单里的每一条内容都用QAction来表示，并根据QAction所属分类，对其menuItemType做了赋值，而这个值正是重写QStyle的菜单需要的枚举值。好了，了解了

这些就可以开始重写样式了。新建样式MyStyle其cpp如下，首先是画菜单背景面板，由于菜单边框也是同一个接口，所以可以一起介绍了。

void MyStyle::drawPrimitive(PrimitiveElement element, const QStyleOption *option,
QPainter *painter, const QWidget *widget) const
{
switch (elem
c69c
ent) {
case PE_FrameMenu: //整个菜单widget的边框色
qDrawShadeRect(painter,option->rect,option->palette,option->state & State_Sunken,1);
break;
case PE_PanelMenu: //整个菜单widget的背景色
qDrawShadePanel(painter,option->rect,option->palette,option->state & State_Sunken,0,&option->palette.brush(QPalette::Background));
break;
default:
QProxyStyle::drawPrimitive(element,option,painter,widget);
break;
}
}

qDrawShadeRect和qDrawShadePanel是画隐影矩形和隐影面板的函数，可以查看官方文档，option中的参数就是我们在实例化QMenu时，给QMenu传递的相关参数，这里

用了QMenu的QPalette::Background做为背景色，边框的颜色查看文档可知是由QMenu的QPalette::Light和QPalette::Dark决定，前者代表左线和顶线，后者代表右线和底线。

当midLineWidth不为0时，其颜色为QPalette::Mid，这里我使用的默认0，未显示。

接下来就可以画菜单项了

void MyStyle::drawControl(ControlElement element, const QStyleOption *option,
QPainter *painter, const QWidget *widget) const
{
switch (element) {
case CE_MenuEmptyArea: //空白区域不处理，看源码可看见最后恢得成了整个菜单区域，有需要的可以处理如蒙上一层半透明
break;
case CE_MenuItem: //画菜单项
if(const QStyleOptionMenuItem * menuItem = qstyleoption_cast<const QStyleOptionMenuItem*>(option)){
painter->save();
bool hover = menuItem->state & State_Selected && menuItem->state & State_Enabled;
if(hover){ //鼠标滑过，先画一个矩形，使后面的文字不会被覆盖
painter->setBrush(menuItem->palette.brush(QPalette::Foreground));
painter->drawRect(menuItem->rect);
}
int leftW = qRound(25.2);
if(menuItem->menuItemType == QStyleOptionMenuItem::Separator){ //画分隔线
painter->setPen(QColor(Qt::white));
painter->drawLine(leftW,menuItem->rect.center().y(),menuItem->rect.right(),menuItem->rect.center().y());
}else if(menuItem->menuItemType == QStyleOptionMenuItem::SubMenu){ //画子菜单
QRect textRect = menuItem->rect;
textRect.moveLeft(leftW);
painter->setPen(menuItem->palette.text().color());
painter->drawText(textRect,Qt::AlignVCenter | Qt::TextShowMnemonic | Qt::TextSingleLine | Qt::TextDontClip, menuItem->text);
int x,y,w,h;
menuItem->rect.getRect(&x,&y,&w,&h);
int dim = (h - 2 * 2) / 2;
int xpos = x + w - 2 - 1 - dim;
QRect  vSubMenuRect = visualRect(option->direction, menuItem->rect, QRect(xpos, y + h / 2 - dim / 2, dim, dim));
painter->setBrush(menuItem->palette.brush(QPalette::Foreground));
painter->drawEllipse(vSubMenuRect);
}else{ //文字菜单项
painter->setPen(menuItem->palette.color(QPalette::Text));
QRect textRect = menuItem->rect;
QFont font = menuItem->font;
painter->setFont(font);
int text_flags = Qt::AlignVCenter | Qt::TextShowMnemonic | Qt::TextDontClip | Qt::TextSingleLine;
QString s = menuItem->text;
QString shortcutText = s.mid(s.indexOf('\t') + 1);
s = s.left(s.indexOf('\t'));
if(!shortcutText.isEmpty()){ //画快捷键文字
int fw = menuItem->fontMetrics.width(shortcutText);
textRect.moveLeft(menuItem->rect.right() - fw);
textRect = visualRect(menuItem->direction,menuItem->rect,textRect);
painter->drawText(textRect,text_flags,shortcutText);
}
textRect.moveLeft(leftW);
textRect = visualRect(menuItem->direction,menuItem->rect,textRect);
painter->drawText(textRect,text_flags,s);
}
painter->restore();
}
break;
default:
QProxyStyle::drawControl(element,option,painter,widget);
break;
}
}

像上面这样，菜单样式就做好了，我们需要加载到QMenu中，

Widget::Widget(QWidget *parent)
: QWidget(parent)
{   //加载Widget背景
setAutoFillBackground(true);
QPixmap pixmap("background.jpg");
QPalette thisPal = palette();
thisPal.setBrush(QPalette::Background,QBrush(pixmap));
setPalette(thisPal);
resize(pixmap.size());

menu = new QMenu(this);
QPalette pal = menu->palette();
pal.setColor(QPalette::Background,QColor(250,0,0,100)); //100为背景透明度
pal.setColor(QPalette::Foreground,QColor(0,188,255));
pal.setColor(QPalette::Text,Qt::white);
pal.setColor(QPalette::Highlight,Qt::blue);
pal.setColor(QPalette::Light,Qt::yellow);
pal.setColor(QPalette::Mid,Qt::gray);
pal.setColor(QPalette::Dark,Qt::green);
menu->setPalette(pal);
setContextMenuPolicy(Qt::CustomContextMenu);
QAction *act = new QAction("add");
act->setShortcut(Qt::CTRL | Qt::Key_A);
menu->addAction(act);
menu->addSeparator();
act = new QAction("delete");
act->setShortcut(Qt::SHIFT | Qt::Key_T);
menu->addAction(act);
menu->addSeparator();
act = new QAction("sell");
act->setShortcut(Qt::CTRL | Qt::Key_F1);
menu->addAction(act);
QMenu *ot =new QMenu("other");
ot->addAction("helol");
ot->setPalette(pal);
menu->addMenu(ot);

menu->setLayoutDirection(Qt::LeftToRight);
menu->setStyle(new MyStyle);
ot->setStyle(new MyStyle);

connect(this,&Widget::customContextMenuRequested,[&]{menu->move(QCursor::pos());menu->show();});
}

关于菜单如何弹出，就做过多介绍了，我使用的是信号方式。我们设置了菜单的颜色、快捷键，也使用了自定义的样式，这样我们可以看效果了



基本看似完成了，其实不然，细心的朋友可以看见，前面我们展示的是背景是半透明的，而文字和鼠标滑过的方块是不透明的。怎么解决这个问题呢，

做过透明的同学都应该知道，Qt中的透明可以通过setMask()，setAttribute(),setWindowFlag(),setWindowOpacity()这些函数设置，而QMenu是继承自

QWidget当然也就是用这些了；

1、setMask()中传入的区域会显示，其它直接没有;

2、setAttribute()传入WA_TranslucentBackground时为设置背景透明，但是在Windows平台还要配合setWindowFlag()传入FramelessWindowHint;

3、setWindowOpacity()为窗体和内容一起透明，透明度由传入参数设置

综上我选择了第二种，增加如下代码

ot->setAttribute(Qt::WA_TranslucentBackground);
ot->setWindowFlag(Qt::FramelessWindowHint);
//使菜单的大背景透明(只是背景)，需要以下两个函数；setWindowOpacity(qreal)是包含标题栏和所有内容一起根据qreal值透明
menu->setAttribute(Qt::WA_TranslucentBackground);
menu->setWindowFlag(Qt::FramelessWindowHint);

最终效果为



有没有看到能够看见后面的白光了，这个背景色的透明是由QMenu的QPalette::Background的alpha值决定的，因为我们画背景是用的是Background的画刷

我将背景色的透明设置成了100，可以看代码。如果将QPalette::Background设置成(0,0,0,50)也就是黑色透明度为50，效果如下



效果就可清晰了，截图效果不佳，真实代码运行会更明显

整个工程源码在这里，图片需要自已加哦

源码下载