QMenu样式美化

使用qss样式表美化窗体

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

先看效果:

  • 美化前:
    QMenu样式美化_第1张图片
  • 美化后:
    QMenu样式美化_第2张图片

测试程序代码

  • 工程文件
    QMenu样式美化_第3张图片

  • mymenu.h 代码如下:

#ifndef MYMENU_H
#define MYMENU_H

#include 

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 
#include 
#include 
#include 
#include 

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()<
        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 这是一张透明的小图片 ↓
在这里插入图片描述

你可能感兴趣的:(C++/Qt,qt,c++,ui)