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 

class CustomMenu: public QMenu
{
public:
    CustomMenu(int paddingLeft = 20, int paddingRight = 20, QWidget *parent = nullptr);

};

#endif // CUSTOMMENU_H

#include "custommenu.h"
#include 
#include 
#include 
#include 
#include 

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);
}