徐承兵 發表於 2026-1-4 08:46:55

Qt实现窗口阴影效果的三种方法

<div id="navCategory"><h5 class="catalogue">目录</h5><ul class="first_class_ul"><li>一、前言：光影之于界面的妙用</li><li>二、基础原理：阴影实现的三大法门</li><ul class="second_class_ul"><li>1. QGraphicsDropShadowEffect - 简单易用的光影魔术</li><li>2. 九宫格绘制法 - 精准控制的艺术</li><li>3. 透明窗口+背景图法 - 极致视觉体验</li></ul><li>三、进阶技巧：阴影的七十二变</li><ul class="second_class_ul"><li>1. 动态阴影效果</li><li>2. 多重阴影叠加</li></ul><li>四、实战案例：现代化UI阴影应用</li><ul class="second_class_ul"><li>案例1：浮动操作按钮(FAB)</li><li>案例2：卡片式布局</li></ul><li>五、性能优化：阴影与效率的平衡</li><ul class="second_class_ul"></ul><li>六、结语：阴影之道的哲学思考</li><ul class="second_class_ul"></ul></ul></div><p class="maodian"></p><h2>一、前言：光影之于界面的妙用</h2>
<p>夫界面设计之道，光影为魂。一窗一影，皆可诉说着数字世界的深度与层次。Qt作为跨平台GUI之翘楚，其阴影效果实现可谓&quot;大巧若拙，大智若愚&quot;。今笔者将详解Qt窗口阴影之实现，带您领略&quot;方寸之间，自有天地&quot;的界面美学。</p>
<p class="maodian"></p><h2>二、基础原理：阴影实现的三大法门</h2>
<p class="maodian"></p><h3>1. QGraphicsDropShadowEffect - 简单易用的光影魔术</h3>
<p style="text-align:center"><img alt="" src="https://img.jbzj.com/file_images/article/202601/20261484648810.jpg" /></p>
<p>此乃Qt提供的最便捷阴影实现方案，三行代码即可成就非凡效果：</p>
<div class="jb51code"><pre class="brush:cpp;">QGraphicsDropShadowEffect* shadow = new QGraphicsDropShadowEffect;
shadow-&gt;setBlurRadius(20);// 模糊半径，控制阴影柔和度
shadow-&gt;setOffset(5, 5);    // 偏移量，决定光影角度
shadow-&gt;setColor(Qt::gray); // 阴影颜色，影响整体氛围
ui-&gt;widget-&gt;setGraphicsEffect(shadow);
</pre></div>
<p><strong>性能提示</strong>：此方法会启用硬件加速，但对复杂控件可能造成轻微性能损耗，建议用于静态或简单动态元素。</p>
<p class="maodian"></p><h3>2. 九宫格绘制法 - 精准控制的艺术</h3>
<p style="text-align:center"><img alt="" src="https://img.jbzj.com/file_images/article/202601/20261484648811.jpg" /></p>
<p>此法通过重写paintEvent实现像素级控制：</p>
<div class="jb51code"><pre class="brush:cpp;">void ShadowWidget::paintEvent(QPaintEvent* event) {
    QPainter painter(this);
    // 绘制四角阴影...
    // 绘制四边阴影...
    // 绘制中心内容...
}
</pre></div>
<p>优势在于：</p>
<ul><li>内存占用极低</li><li>可定制各种特殊形状阴影</li><li>动画流畅无卡顿</li></ul>
<p class="maodian"></p><h3>3. 透明窗口+背景图法 - 极致视觉体验</h3>
<p>适用于需要不规则阴影的高级场景：</p>
<p style="text-align:center"><img alt="" src="https://img.jbzj.com/file_images/article/202601/20261484648812.jpg" /></p>
<p class="maodian"></p><h2>三、进阶技巧：阴影的七十二变</h2>
<p class="maodian"></p><h3>1. 动态阴影效果</h3>
<div class="jb51code"><pre class="brush:cpp;">// 鼠标悬停时阴影放大效果
void enterEvent(QEvent*) override {
    QPropertyAnimation* anim = new QPropertyAnimation(shadow, "blurRadius");
    anim-&gt;setDuration(300);
    anim-&gt;setStartValue(10);
    anim-&gt;setEndValue(20);
    anim-&gt;start(QAbstractAnimation::DeleteWhenStopped);
}
</pre></div>
<p class="maodian"></p><h3>2. 多重阴影叠加</h3>
<p style="text-align:center"><img alt="" src="https://img.jbzj.com/file_images/article/202601/20261484648813.jpg" /></p>
<p>实现代码示例：</p>
<div class="jb51code"><pre class="brush:cpp;">void addMultiShadow(QWidget* widget) {
    QGraphicsDropShadowEffect* shadow1 = new QGraphicsDropShadowEffect;
    shadow1-&gt;setBlurRadius(15);
    shadow1-&gt;setOffset(3, 3);
   
    QGraphicsDropShadowEffect* shadow2 = new QGraphicsDropShadowEffect;
    shadow2-&gt;setBlurRadius(20);
    shadow2-&gt;setOffset(6, 6);
    shadow2-&gt;setColor(QColor(0, 100, 255, 80));
   
    widget-&gt;setGraphicsEffect(shadow1);
    shadow1-&gt;setParent(widget);
    shadow2-&gt;setParent(widget);
}
</pre></div>
<p class="maodian"></p><h2>四、实战案例：现代化UI阴影应用</h2>
<p class="maodian"></p><h3>案例1：浮动操作按钮(FAB)</h3>
<p style="text-align:center"><img alt="" src="https://img.jbzj.com/file_images/article/202601/20261484648814.jpg" /></p>
<p>实现要点：</p>
<ul><li>默认阴影：8px模糊，2px偏移</li><li>悬停时：阴影扩大至15px模糊</li><li>点击时：阴影短暂收缩再恢复</li></ul>
<p class="maodian"></p><h3>案例2：卡片式布局</h3>
<p style="text-align:center"><img alt="" src="https://img.jbzj.com/file_images/article/202601/20261484648815.jpg" /></p>
<p>深度层次实现代码：</p>
<div class="jb51code"><pre class="brush:cpp;">void setupCardShadows(QList&lt;QWidget*&gt; cards) {
    for(int i = 0; i &lt; cards.size(); ++i) {
      auto shadow = new QGraphicsDropShadowEffect;
      shadow-&gt;setBlurRadius(10 + i * 5);
      shadow-&gt;setOffset(0, 2 + i * 2);
      cards-&gt;setGraphicsEffect(shadow);
    }
}
</pre></div>
<p class="maodian"></p><h2>五、性能优化：阴影与效率的平衡</h2>
<table><thead><tr><th>方法</th><th>内存占用</th><th>CPU使用</th><th>GPU加速</th><th>适用场景</th></tr></thead><tbody><tr><td>QGraphicsDropShadowEffect</td><td>中</td><td>低</td><td>是</td><td>简单控件、静态元素</td></tr><tr><td>九宫格绘制</td><td>低</td><td>中</td><td>否</td><td>需要频繁更新的动态元素</td></tr><tr><td>透明窗口</td><td>高</td><td>低</td><td>是</td><td>不规则形状、高级效果</td></tr></tbody></table>
<p><strong>黄金法则</strong>：</p>
<ul><li>移动端：优先使用九宫格法</li><li>桌面端：可考虑QGraphicsDropShadowEffect</li><li>特殊效果：透明窗口方案</li></ul>
<p class="maodian"></p><h2>六、结语：阴影之道的哲学思考</h2>
<p>阴影之于界面，犹如留白之于国画。Qt赋予我们&quot;以代码为笔，以像素为墨&quot;的能力，让我们能在数字画布上描绘出虚实相生的美学意境。切记：最好的阴影是用户感受不到技术存在却沉浸其中的设计。</p>
<p>以上就是Qt实现窗口阴影效果的三种方法的详细内容，更多关于Qt窗口阴影效果的资料请关注琼殿技术社区其它相关文章！</p>
                           
                            <div class="art_xg">
                              <b>您可能感兴趣的文章:</b><ul><li>Qt无边框窗口拖拽和阴影的实现</li><li>Qt实现给窗口绘制阴影的示例代码</li><li>Qt中CQGUI框架之阴影圆角窗口实现</li><li>pyqt5 设置窗口圆角及阴影的操作</li><li>Qt无边框窗口拖拽和阴影的实现方法</li></ul>
                            </div>

                        </div>
                        <!--endmain-->
頁: [1]
查看完整版本: Qt实现窗口阴影效果的三种方法