ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

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

2021-10-10 10:00:18  阅读:497  来源: 互联网

标签:圆角 Qt Menu 阴影 menu shadow 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有大佬解决欢迎回复!!!!
————————————————
版权声明:本文为CSDN博主「我是唐」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。
原文链接:https://blog.csdn.net/qq_41673920/article/details/116980362

标签:圆角,Qt,Menu,阴影,menu,shadow,QMenu
来源: https://blog.csdn.net/qq_45662588/article/details/120682839

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有