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

傷城~ 2022-11-16 13:43 432阅读 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 条评论，432人围观）

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

相关阅读

相关 Qt设置边框阴影效果

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

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

相关 css阴影效果

CSS可以用来创建各种阴影效果，这些效果可以应用于文本、元素或整个容器。以下是一些常见的CSS阴影效果示例：文本阴影： .text-shadow \{ text-sha

￡神魔★判官ぃ/ 2024年03月03日 08:46/ 0 赞/ 112 阅读

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

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

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

相关 Qt 控件阴影效果

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

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

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

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

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

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

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

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

相关用CSS3实现阴影效果

任务描述本关任务：实现下面效果，包括外阴影，多行省略，圆角的设置。效果如下： ![198693][] 相关知识为了完成本关任务，你需要掌握：1.外阴影，2.多行

叁歲伎倆/ 2022年04月04日 12:09/ 0 赞/ 435 阅读

相关 React Native阴影框效果实现

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

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

相关 Android之elevation实现阴影效果

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

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

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

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

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