QMLDropShadow详解及使用方法

一、DropShadow介绍 在 Qt 的 QML 框架中，DropShadow 是一个效果控件，用于为元素添加阴影，从而提升元素的视觉层次和美感。通过使用 DropShadow，可以很方便地为 QML 元件（如 Rectangle 或 Image）创建柔和的阴影效果。 DropShadow 通常被用作 GraphicsEffect 的一种效果，应用于其他视觉元素。以下是 DropShadow 的基本介绍和使用方法：

---

基本用法

DropShadow 是一个效果类，常与 Item（如 Rectangle 或 Image 等）结合使用。它通过设置光源方向、模糊半径、偏移量和颜色等参数来定义阴影效果。

---

DropShadow 的主要属性

blurRadius （模糊半径）

控制阴影的模糊程度。值越大，阴影越模糊。类型：real默认值：1.0

color （阴影颜色）

定义阴影的颜色，可以使用 Qt.rgba 或者直接使用常规颜色（如 "black"）。类型：color默认值："black"

horizontalOffset （水平偏移）

控制阴影相对于原始元素的水平偏移量。类型：real默认值：0

verticalOffset （垂直偏移）

控制阴影相对于原始元素的垂直偏移量。类型：real默认值：0

radius （阴影范围，别名）

对应 blurRadius 属性，用于简化使用。

source （阴影目标）

指定要应用阴影效果的目标对象（可以是 Rectangle, Image 等）。类型：Item

---

常见用途 按钮阴影：为 UI 中的按钮添加视觉反馈。卡片式设计：通过虚化和偏移阴影，创造卡片悬浮效果。图片边框增强：给图片添加边框或阴影，突出显示。浮动效果：提升特定元素的 UI 层级感，让它看起来“悬浮”在界面上方。

---

注意事项 DropShadow 是一项图形效果，会影响性能，尤其是当 blurRadius 值较高或需要渲染大量元素时。确保目标设备的性能满足渲染需求，尤其是在移动设备上。如果需要更高性能的阴影效果，可以尝试使用绘制前景或背景的方法，而非实时计算阴影。

---

通过使用 DropShadow，你可以在 Qt Quick 应用中轻松实现现代化、美观的 UI 效果！ 二、效果查看 三、源码分享

import QtQuick import QtQuick.Controls import Qt5Compat.GraphicalEffects ApplicationWindow { width: 1440 height: 900 visible: true title: qsTr("Hello World") Rectangle{ id:rect width: 100 height: 100 anchors.centerIn: parent } DropShadow { color: "red" anchors.fill: rect horizontalOffset: 2 verticalOffset: 2 samples: 16 source: rect } }