QML DropShadow详解及使用方法

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

---

基本用法

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

---

DropShadow 的主要属性

1. blurRadius （模糊半径）

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

2. color （阴影颜色）

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

3. horizontalOffset （水平偏移）

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

4. verticalOffset （垂直偏移）

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

5. radius （阴影范围，别名）

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

6. source （阴影目标）

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

---

常见用途

1. 按钮阴影：为 UI 中的按钮添加视觉反馈。
2. 卡片式设计：通过虚化和偏移阴影，创造卡片悬浮效果。
3. 图片边框增强：给图片添加边框或阴影，突出显示。
4. 浮动效果：提升特定元素的 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
    }
}