QML元素 - DropShadow

QML 的 DropShadow 用于为元素添加投影效果，增强 UI 的立体感和层次感。它是 Qt Quick Effects 模块的一部分，适用于按钮、卡片、文本等元素的装饰。以下是使用技巧和详细指南：

---

1. 基本用法

import QtQuick 2.15
import QtQuick.Effects 1.15  // 确保模块已正确引入

Rectangle {
    width: 200
    height: 100
    color: "white"

    // 投影效果
    layer.enabled: true  // 启用图层（必须）
    layer.effect: DropShadow {
        anchors.fill: parent
        horizontalOffset: 5      // 水平偏移
        verticalOffset: 5        // 垂直偏移
        radius: 10               // 模糊半径
        samples: 16              // 采样数（影响平滑度）
        color: "#80000000"       // 阴影颜色（带透明度）
        source: parent           // 作用的目标元素
    }
}

关键属性：

• radius：模糊半径，值越大阴影越扩散。
• samples：模糊采样数，通常为 radius * 2，值越高越平滑但性能消耗越大。
• color：阴影颜色，推荐使用带 Alpha 通道的颜色（如 #40000000）。
• horizontalOffset / verticalOffset：阴影偏移量，控制投影方向。
• spread：阴影扩散比例（0.0 到 1.0），值越大阴影边缘越“硬”。
• source：需要添加阴影的源元素（必须正确绑定）。

---

2. 优化阴影效果

(1) 调整模糊平滑度

DropShadow {
    radius: 20
    samples: 25  // 通常设为 radius + 5
    color: "#60000000"
}

• 避免锯齿：当 radius 较大时，适当提高 samples 值（但需权衡性能）。

(2) 控制阴影硬度

DropShadow {
    spread: 0.3  // 0.0（软阴影） ~ 1.0（硬阴影）
}

(3) 透明元素阴影

对透明元素（如 PNG 图片）应用阴影时，确保源元素内容非空白：

Image {
    source: "icon.png"
    layer.enabled: true
    layer.effect: DropShadow { /* ... */ }
}

---

3. 动态阴影效果

通过属性绑定或动画实现交互式阴影：

(1) 悬停放大阴影

Rectangle {
    id: card
    width: 200
    height: 200
    color: "white"

    // 阴影动画
    layer.effect: DropShadow {
        id: shadow
        radius: 8
        samples: 16
        color: "#40000000"
    }

    // 鼠标悬停时阴影增强
    MouseArea {
        anchors.fill: parent
        hoverEnabled: true
        onEntered: shadow.radius = 16
        onExited: shadow.radius = 8
    }
}

(2) 动态颜色和偏移

DropShadow {
    id: dynamicShadow
    color: mouseArea.pressed ? "#80FF0000" : "#40000000"
    horizontalOffset: mouseArea.pressed ? 2 : 5
    verticalOffset: mouseArea.pressed ? 2 : 5
    Behavior on color { ColorAnimation { duration: 200 } }
}

---

4. 性能优化

• 限制 samples 值：在低端设备上，避免 samples > 20。
• 静态阴影启用缓存：

  layer.enabled: true
  layer.smooth: true  // 启用抗锯齿
  layer.textureSize: Qt.size(1024, 1024)  // 固定纹理尺寸（可选）
  

• 避免多层阴影叠加：多个重叠阴影可能导致 GPU 过载。

---

5. 常见问题

(1) 阴影不显示

• 检查 layer.enabled 是否设为 true。
• 确保 source 属性正确绑定到目标元素。
• 确认 color 的 Alpha 通道非零（如 #10000000）。

(2) 模糊效果粗糙

• 增加 samples 值（如从 16 改为 24）。
• 确保 radius 和 samples 比例合理（samples ≈ radius + 5）。

(3) 阴影边缘锯齿

• 启用 layer.smooth: true。
• 使用更高的 textureSize（如 Qt.size(2048, 2048)）。

---

6. 进阶技巧

(1) 文本阴影

Text {
    text: "Shadow Text"
    font.pixelSize: 32
    layer.enabled: true
    layer.effect: DropShadow {
        radius: 4
        samples: 8
        color: "#40000000"
    }
}

(2) 多重阴影

通过组合多个 DropShadow 实现复杂效果：

layer.effect: MultiEffect {
    anchors.fill: parent
    shadowEnabled: true
    shadowColor: "#40000000"
    shadowBlur: 1.0
    shadowOffset: Qt.point(5, 5)
    // 注意：MultiEffect 是 Qt6 中更高效的替代方案
}

(3) 自定义阴影形状

通过 OpacityMask 结合形状裁剪：

Rectangle {
    width: 200
    height: 200
    radius: 20
    layer.enabled: true
    layer.effect: DropShadow { /* ... */ }
}

---

总结

• 核心属性：radius（模糊）、color（颜色）、offset（方向）。
• 适用场景：按钮、卡片、浮动窗口、文本装饰。
• 性能平衡：在效果平滑度和 GPU 开销之间找到最佳值。