QMenu样式美化

使用qss样式表美化窗体

最近想给程序添加个右键菜单，但是如果使用qt默认的样式，视感不是很佳，觉得QQ的右键菜单样式挺好看，就用qss美化一下，以便今后再次使用QMenu直接使用。

先看效果：

• 美化前：
  
• 美化后：
  

测试程序代码

• 工程文件
  

• mymenu.h 代码如下：

#ifndef MYMENU_H
#define MYMENU_H

#include <QWidget>

class MyMenu : public QWidget
{
    Q_OBJECT
public:
    MyMenu(QWidget *parent = nullptr);
protected:
    void contextMenuEvent(QContextMenuEvent *event) override;
private:
    QAction * colorChat;
};
#endif // MYMENU_H

• mymenu.cpp 代码如下：

#include "mymenu.h"
#include <QMenu>
#include <QFile>
#include <QAction>
#include <QString>
#include <QDebug>

MyMenu::MyMenu(QWidget *parent)
    : QWidget(parent)
{
    QFile file("H:/Qt/contextMenu/ContextMenu/style.qss");
    file.open(QFile::ReadOnly);//读取qss文件，设置样式
    if(file.isOpen())
    {
        QString qss = file.readAll();
        //qDebug()<<qss;
        this->setStyleSheet(qss);
    }
    file.close();
    
    //带选择的QAction应该设置为类的成员变量，以便存住当前状态
    colorChat = new QAction(QString::fromLocal8Bit("   使用多彩气泡"),this);
    colorChat->setCheckable(true);
    colorChat->setChecked(true);
    colorChat->setIcon(QIcon(":/choose.png"));
    connect(colorChat,&QAction::triggered,this,[=]()
    {
         if(colorChat->isChecked())
             colorChat->setIcon(QIcon(":/choose.png"));
         else
             colorChat->setIcon(QIcon(":/space.png"));
    });
}

void MyMenu::contextMenuEvent(QContextMenuEvent *event)
{
    QAction * start = new QAction(QString::fromLocal8Bit("   复制"),this);
    QAction * allchoose = new QAction(QString::fromLocal8Bit("   全部选择"),this);
    QAction * choosesome = new QAction(QString::fromLocal8Bit("   多选"),this);
    choosesome->setIcon(QIcon(":/duoxuankuang.png"));
    QAction * showType = new QAction(QString::fromLocal8Bit("   显示比例"),this);
    QAction * setColorChat = new QAction(QString::fromLocal8Bit("   设置多彩气泡"),this);
    QAction * quit = new QAction(QString::fromLocal8Bit("   清屏"),this);

    QMenu * m = new QMenu(this);
    m->setFixedWidth(100);
    m->addAction(new QAction("  200%"));
    m->addAction(new QAction("  180%"));
    m->addAction(new QAction("  160%"));
    m->addAction(new QAction("  140%"));
    m->addAction(new QAction("  120%"));
    m->addAction(new QAction("  100%"));
    m->setTitle(QString::fromLocal8Bit("   显示比例"));

    QMenu * menu = new QMenu(this);
    menu->setFixedWidth(200);
    menu->addAction(start);
    menu->addAction(allchoose);
    menu->addAction(choosesome);
    menu->addMenu(m);
    menu->addSeparator();
    menu->addAction(showType);
    menu->addAction(colorChat);
    menu->addAction(setColorChat);
    menu->addSeparator();
    menu->addAction(quit);

    menu->exec(QCursor::pos());

    return QWidget::contextMenuEvent(event);
}

样式表

• 样式 style.qss内容：

QMenu {
    background-color : rgb(253,253,254);
 padding:5px;
 border-radius:15px;
}
QMenu::item {
    font-size:10pt;
    color: rgb(0,0,0);
    background-color:rgb(253,253,254);
    padding: 8px 25px 6px 10px;
    margin: 4px 1px;
}
QMenu::item:selected {
    background-color : rgb(236,236,237);
}
QMenu::icon:checked {
    background: rgb(253,253,254);
    position: absolute;
    top: 1px;
    right: 1px;
    bottom: 1px;
    left: 1px;
}
QMenu::icon:checked:selected {
    background-color : rgb(236,236,237);
    background-image: url(:/space_selected.png);
}
QMenu::separator {
    height: 2px;
    background: rgb(235,235,236);
    margin-left: 10px;
    margin-right: 10px;
}

• 附带几张用到的图片：

choose.png

space_selected.png

duoxuankuang.png

space.png 这是一张透明的小图片 ↓