QML如何实现仅在单侧投射的定向阴影效果？

云上老周

2026-10-15

QML实现单侧定向阴影的解决方案

完全可以实现仅单侧投射的定向阴影，核心思路是结合DropShadow元素和遮罩裁剪处理，过滤掉不需要展示的方向的阴影，同时避免阴影整体尺寸大于原对象的问题。

实现逻辑

先用DropShadow生成基础阴影效果，通过x/y属性设置阴影的投射偏移方向，调整radius控制阴影模糊度，color设置阴影透明度和颜色
对生成的阴影额外增加一层裁剪约束，仅保留目标投射方向的阴影区域，其余方向的阴影直接裁剪隐藏，即可实现单侧阴影效果

代码示例（仅底部单侧阴影）

import QtQuick 2.15
import QtGraphicalEffects 1.15

Rectangle {
    id: targetElement
    width: 300
    height: 200
    color: "#ffffff"
    radius: 8

    // 基础阴影生成
    DropShadow {
        id: rawShadow
        anchors.fill: parent
        source: parent
        radius: 12
        samples: 24
        color: "#80000000"
        // 仅设置向下偏移，实现底部阴影基础效果
        y: 6
        x: 0
        transparentBorder: true
    }

    // 阴影裁剪层：仅保留底部超出原元素的阴影
    Item {
        anchors.fill: rawShadow
        clip: true
        visible: rawShadow.visible
        Component.onCompleted: rawShadow.parent = this
    }
}