Qt QMenu圆角&阴影超详细 干净圆角 屏蔽原生阴影 绘制阴影

最终效果

在这里插入图片描述

1.代码

    QList<QMenu *> listMenu;
    //手动添加需要设置的QMenu
    listMenu<<ui->menu_help<<ui->menu_settings;
    //找出所有的子孙Menu
    foreach (QMenu *menu, listMenu) {
        CUIHelper::recursionSubMenu(menu,listMenu);  //添加所有的子菜单到list中
    }

    //为所有的Menu 取消原装直角阴影 添加Qt的阴影
    foreach (QMenu *menu, listMenu) {
        menu->setWindowFlags(menu->windowFlags()  | Qt::FramelessWindowHint | Qt::NoDropShadowWindowHint);
        menu->setAttribute(Qt::WA_TranslucentBackground,true);
        QGraphicsDropShadowEffect *shadow = new QGraphicsDropShadowEffect(this);
        shadow->setOffset(0, 0);
        shadow->setColor(QColor("#444444"));
        shadow->setBlurRadius(10);
        menu->setGraphicsEffect(shadow);
    }

Qss样式表


QMenu {
	color:black;
	background-color:white; 
	border-radius:3px;
	padding:5px;
	margin:6px;
}
QMenu::item:text { 
	padding-left:10px;
	padding-right:10px;
}
QMenu::item:selected{ 
	color:#1aa3ff;
	background-color: #e5f5ff;
	border-radius:3px;
}
QMenu::separator{
	height:1px;
	background:#bbbbbb;
	margin:5px;
	margin-left:10px;
	margin-right:10px;
}
 

工具函数,实现获取QMenu的子Menu

void CUIHelper::recursionSubMenu(QMenu *menu,QList<QMenu *> &menus)
{
    foreach (QAction *action, menu->actions()) {
        if(nullptr != action->menu()){
            menus.append(action->menu());
            recursionSubMenu(action->menu(),menus);
        }
    }
    return ;
}
2.解决过程
我用Qss美化

由于系统自带的阴影效果太丑,于是开始了美化之路。
在这里插入图片描述

仅用Qss美化之后的效果,上边和左边没有阴影,边界不明显,那我们可以添加个边框让边界更明显一些。

不行,再加个边框
QMenu {
	color:black;
	background-color: white; 
	border:1px solid #bbbbbb;
}

QMenu::item:text { 
	padding-left:10px;
	padding-right:10px;
}
 
QMenu::item:selected { 
	color:#1aa3ff;
	background-color: #e5f5ff;
	border-radius:3px;
}

在这里插入图片描述
添加边框后,到这里如果觉得美观度已经可以的话就散花结束,复制上边Qss就可以实现了。因为你想加圆角的话,还有一些坑。。。就是要加一丢丢丢丢…代码

我不仅用Qss美化 还要200万的圆角

修改圆角属性,但却得到这么个Bug效果
在这里插入图片描述
Bug效果似乎不明显,加大圆角,看个清楚
在这里插入图片描述
四角都有白色背景底,而且阴影的角还是直的,设置Menu的背景透明试试。

menu->setAttribute(Qt::WA_TranslucentBackground); //Menu背景透明

在这里插入图片描述
怎么Bug还越来越丑了!!!,谷歌百度看看有没有大佬解决,果然有人做了圆角,并解决了四角黑点问题。复制代码加上

 menu->setWindowFlags(menu->windowFlags()  | Qt::FramelessWindowHint );

在这里插入图片描述
四角黑点倒是没有了,也透明了,可以看到Menu下边的按钮图标。但是这个阴影也太丑了。如何去掉阴影?搜索一番之后,有的继承QMenu过滤WIndows事件来屏蔽阴影。太麻烦,继续搜索

menu->setWindowFlags(menu->windowFlags()  | Qt::FramelessWindowHint | Qt::NoDropShadowWindowHint);

这个看着就靠谱,Qt提供的去窗口阴影属性。
在这里插入图片描述
阴影没了,四角也透明了,就是Item有点Bug,那个改下Qss就行,修改Qss圆角小点。
在这里插入图片描述
到这里圆角美化就搞定了

什么?还想要不要钱阴影,我加

加阴影这事,早就轻车熟路了,干

        QGraphicsDropShadowEffect *shadow = new QGraphicsDropShadowEffect(this);
        shadow->setOffset(0, 0);
        shadow->setColor(QColor("#444444"));
        shadow->setBlurRadius(10);
        menu->setGraphicsEffect(shadow);

在这里插入图片描述
阴影不明显,这小问题了,明显就是parent和子控件大小一样,阴影没地显示。修改Qss margin:5px;
给阴影留空。而且有阴影凸显边界了,去掉边框,显得更高级些,干掉边框border:1px solid #bbbbbb;
在这里插入图片描述
这不就搞定了,等等又发现了个Bug!!!
在这里插入图片描述
我们只设置了一级Menu无边框、无系统阴影等,二级菜单只应用了Qss,代码没有设置Menu属性,难道要一个Mennu设置一堆吗?像我这种懒人是不可能这么弄的,查看帮助手册,能获取到Menu的Actions,Action又能获取到后边有没有Menu,没错,就得递归。怎么用呢,给它一个Menu,把子孙Menu都加到list里,写个静态函数,一遍搞定

void CUIHelper::recursionSubMenu(QMenu *menu,QList<QMenu *> &menus)
{
    foreach (QAction *action, menu->actions()) {
        if(nullptr != action->menu()){
            menus.append(action->menu());
            recursionSubMenu(action->menu(),menus);
        }
    }
    return ;
}

用这个函数就能把Menu的子Menu都追加到list里,接着就把所有的一级Menu遍历,逐个递归就能把所有的Menu找到了,然后一个个设置属性,再加多少级Menu也不用添加设置属性的代码、

    QList<QMenu *> listMenu;
    //手动把界面一级Menu添加到list中
    listMenu<<ui->menu_help<<ui->menu_settings;
    //找出所有的子孙Menu
    foreach (QMenu *menu, listMenu) {
        CUIHelper::recursionSubMenu(menu,listMenu);  //添加所有的子菜单到list中
    }

    //为所有的Menu 设置无边框 取消原装直角阴影 添加Qt的阴影
    foreach (QMenu *menu, listMenu) {
        menu->setWindowFlags(menu->windowFlags()  | Qt::FramelessWindowHint | Qt::NoDropShadowWindowHint);
        menu->setAttribute(Qt::WA_TranslucentBackground,true);
        QGraphicsDropShadowEffect *shadow = new QGraphicsDropShadowEffect(this);
        shadow->setOffset(0, 0);
        shadow->setColor(QColor("#444444"));
        shadow->setBlurRadius(10);
        menu->setGraphicsEffect(shadow);
    }

相对完结,还留下两个个人可以忍受的Bug
1.由于Mebu margin:5px;的原因,Menu往右、往下偏移了5px,位置不算太正
2.Menu设置Qt::FramelessWindowHint属性,导致弹出时候有个错误
UpdateLayeredWindowIndirect failed for ptDst=(600, 147), size=(97x87), dirty=(107x37 -5, 55) (参数错误。)。不过没发现影响使用
以上两个Bug有大佬解决欢迎回复!!!!

  • 28
    点赞
  • 60
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 16
    评论
评论 16
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

我是唐

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值