Qt 如何实现窗口的阴影效果

傷城~ 2022-11-16 13:43 491阅读 0赞

阴影效果，在很多设计中都会用到，其主要目的在于提升了整体画面的层次感，使其更具立体效果！

#### 1、实现控件的阴影效果 ####

QWidget * widgetInner = new QWidget(this);
    widgetInner->setGeometry(0, 0, 280, 283);
    widgetInner->setStyleSheet("background: #FFFFFF;");
    //实例阴影shadow
    QGraphicsDropShadowEffect *shadow = new QGraphicsDropShadowEffect(this);
    //设置阴影距离
    shadow->setOffset(0, 0);
    //设置阴影颜色
    shadow->setColor(QColor("#444444"));
    //设置阴影圆角
    shadow->setBlurRadius(30);
    //给嵌套QWidget设置阴影
    widgetInner->setGraphicsEffect(shadow);
    //给垂直布局器设置边距(此步很重要, 设置宽度为阴影的宽度)
    widgetInner->setMargin(24);//设置为0时，就看不到边框的阴影

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hlbGxva2FuZHk_size_16_color_FFFFFF_t_70_pic_center]

#### 2、实现无边框窗口的阴影效果 ####

在构造函数中，除了第一点的代码之外，再加上以下代码：

//设置窗体透明
    this->setAttribute(Qt::WA_TranslucentBackground, true);
    //设置无边框
    this->setWindowFlags(Qt::Window | Qt::FramelessWindowHint);

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hlbGxva2FuZHk_size_16_color_FFFFFF_t_70_pic_center]: /images/20221022/c65ba661f2a547ccbf307dd9f38066d3.png

发表评论取消回复

表情：

评论列表（有 0 条评论，491人围观）

还没有评论，来说两句吧...

相关阅读

相关 Qt设置边框阴影效果

1.运行界面 ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4u...

心已赠人/ 2024年04月18日 08:40/ 0 赞/ 129 阅读

相关 CSS中如何实现文字阴影效果（text-shadow）？

聚沙成塔·每天进步一点点 ⭐ 专栏简介 ⭐ 实现思路 ⭐ 示例 ⭐ 写在最后 -------------------- ⭐ 专栏简介前

待我称王封你为后i/ 2023年10月15日 11:39/ 0 赞/ 99 阅读

相关 tauri自定义窗口window并实现拖拽和阴影效果

需求说明由于官方提供的窗口标题并不能实现我的需求，不能很好的实现主题切换的功能，所以根据官方文档实现了一个自定义的窗口，官方文档地址：[Window Customiza

淡淡的烟草味﹌/ 2023年10月13日 20:03/ 0 赞/ 124 阅读

相关 css实现div阴影效果

.shadow { -webkit-box-shadow: b2b2b2 4px -2px 30px 8px; ; -moz

青旅半醒/ 2023年02月20日 15:57/ 0 赞/ 57 阅读

相关 Qt 控件阴影效果

Qt 控件阴影效果 QGraphicsDropShadowEffect shadowEffect = new QGraphicsDropShadowEffect(

痛定思痛。/ 2022年12月29日 01:58/ 0 赞/ 246 阅读

相关 Qt 如何实现窗口的阴影效果

阴影效果，在很多设计中都会用到，其主要目的在于提升了整体画面的层次感，使其更具立体效果！ 1、实现控件的阴影效果 QWidget widgetInner =

傷城~/ 2022年11月16日 13:43/ 0 赞/ 492 阅读

相关 CSS实现带阴影效果的三角形

目标效果用将width和height设置为0，通过border特性来实现三角形的效果的方法，想必很多人都实现过。但是如果要求三角形边缘具有阴影效果，这样一来以前的

左手的ㄟ右手/ 2022年06月13日 10:22/ 0 赞/ 552 阅读

相关 React Native阴影框效果实现

React Native实现阴影框方法如下图，下面分别对其进行讨论： ![Image 1][] RN阴影实现.png RN自带阴影 RN提供了[阴影样式属性][Link

小灰灰/ 2022年02月02日 04:34/ 0 赞/ 920 阅读

相关 Android之elevation实现阴影效果

1 需求需要控件实现阴影效果 ![20201016222315240.jpg][]

布满荆棘的人生/ 2021年09月24日 20:22/ 0 赞/ 1180 阅读

相关 css如何实现字体长阴影效果

css如何实现字体长阴影效果,text-shadow 属性向文本设置阴影。

小灰灰/ 2020年05月18日 06:34/ 0 赞/ 947 阅读