QMenu风格设计qss+阴影

Qt的菜单经常在软件开发中用到，默认的菜单效果都不符合设计师的要求，本篇介绍QMenu菜单的风格设计，包括样式表和阴影。

1.QMenu样式表的设计

首先看一个默认的菜单

void QGraphicsDropShadowEffectDemo::slotShowDialog()
{qDebug() << "slotShowDialog================================";QMenu menu;QAction *m_actionCut = menu.addAction(QStringLiteral("剪切"));QAction *m_actionCopy = menu.addAction(QStringLiteral("复制"));QAction *m_actionPaster = menu.addAction(QStringLiteral("粘贴"));m_actionPaster->setEnabled(true);QPoint point = mapToGlobal(ui->pushButton->pos());point += QPoint(2, 30);menu.exec(point);
}

添加qss风格

QString strMenuStyle = QString("QMenu{background-color:#FFFFFF;border-radius:5px;margin:10px 10px 10px 10px;}""QMenu::item{color:#333333;height:24px;background-color:#FFFFFF;border-radius:5px;border:1px solid #FFFFFF;font-size:12px;padding:3px 10px 3px 10px;margin:3px 10px 3px 10px;}""QMenu::item:selected{background-color:#2F89FC;color:#FFFFFF;}""QMenu::item:pressed{background-color:#2F89FC;color:#FFFFFF;}""QMenu::item:!enabled{background-color:#666666;color:#FFFFFF;}");
menu.setStyleSheet(strMenuStyle);

运行效果

这种弹出的没有凹凸感，需要添加阴影，阴影一般情况下有两种方法，一种是自已绘制，另一种是采用QGraphicsDropShadowEffect实现，绘制的之前试了，没有效果，因此这里采用QGraphicsDropShadowEffect的方式实现。

    QMenu menu;menu.setWindowFlags(this->windowFlags()  | Qt::FramelessWindowHint | Qt::NoDropShadowWindowHint);menu.setAttribute(Qt::WA_TranslucentBackground);QGraphicsDropShadowEffect *shadow = new QGraphicsDropShadowEffect(this);shadow->setOffset(0, 0);shadow->setColor(QColor("#333333"));shadow->setBlurRadius(10);menu.setGraphicsEffect(shadow);

setBlurRadius里的10一定要写qss里的margin:10px 10px 10px 10px;对应，否则没有校果

这样带阴影的效果明显好很多。

如果有多个菜单使用，可以把这个自定义为一个菜单类。

#ifndef CUSTOMMENU_H
#define CUSTOMMENU_H#include <QMenu>class CustomMenu: public QMenu
{
public:CustomMenu(int paddingLeft = 20, int paddingRight = 20, QWidget *parent = nullptr);};#endif // CUSTOMMENU_H

#include "custommenu.h"
#include <QPainter>
#include <QPainterPath>
#include <QGraphicsDropShadowEffect>
#include <QtMath>
#include <QDebug>CustomMenu::CustomMenu(int paddingLeft, int paddingRight, QWidget *parent) : QMenu(parent)
{this->setWindowFlags(this->windowFlags()  | Qt::FramelessWindowHint | Qt::NoDropShadowWindowHint);this->setAttribute(Qt::WA_TranslucentBackground);QGraphicsDropShadowEffect *shadow = new QGraphicsDropShadowEffect(this);shadow->setOffset(0, 0);shadow->setColor(QColor("#333333"));shadow->setBlurRadius(10);this->setGraphicsEffect(shadow);QString strMenuStyle = QString("QMenu{background-color:#FFFFFF;border-radius:5px;margin:10px 10px 10px 10px;}""QMenu::item{color:#333333;height:24px;background-color:#FFFFFF;border-radius:4px;border:1px solid #FFFFFF;font-size:12px;padding:3px %1px 3px %2px;margin:3px 10px 3px 10px;}""QMenu::item:selected{background-color:#2F89FC;color:#FFFFFF;}""QMenu::item:pressed{background-color:#2F89FC;color:#FFFFFF;}""QMenu::item:!enabled{background-color:#999999;color:#FFFFFF;}").arg(paddingRight).arg(paddingLeft);this->setStyleSheet(strMenuStyle);
}

使用

void QGraphicsDropShadowEffectDemo::slotShowDialog()
{qDebug() << "slotShowDialog================================";CustomMenu menu(20, 20);
//    QAction *m_actionAdd = new QAction(QIcon(":/images/menu_add.png"), QStringLiteral("添加"));
//    QAction *m_actionDelete = new QAction(QIcon(":/images/menu_delete.png"), QStringLiteral("删除"));//menu.addAction(m_actionAdd);//menu.addAction(m_actionDelete);QAction *m_actionCut = menu.addAction(QStringLiteral("剪切"));QAction *m_actionCopy = menu.addAction(QStringLiteral("复制"));QAction *m_actionPaster = menu.addAction(QStringLiteral("粘贴"));m_actionPaster->setEnabled(true);QPoint point = mapToGlobal(ui->pushButton->pos());point += QPoint(2, 30);menu.exec(point);
}