使用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 这是一张透明的小图片 ↓