QML：DropShadow导致源矩形重复的问题解决求助

看起来你是在给QML里的横向矩形加阴影时，不小心出现了重复的白色矩形，对吧？这种情况我碰到过好几次，大概率是阴影的实现方式出了问题，导致额外渲染了一个矩形。下面给你几个排查和解决的思路：

1. 先检查代码里是不是重复定义了Rectangle #

先扫一眼你的代码片段，有没有不小心写了两个<Rectangle>标签？比如原矩形之外，又复制粘贴了一个，或者在阴影相关的层级里多嵌套了一个Rectangle——这种低级错误很容易犯，尤其是调试的时候。

2. 用正确的DropShadow姿势实现阴影 #

QML里给矩形加阴影，最稳妥的方式是用DropShadow组件，而且要注意层级和source的设置，别让阴影组件自己生成额外的矩形。给你一个标准的示例代码：

Window {
    visible: true
    width: 640
    height: 480
    color: "white"

    Item {
        anchors.fill: parent
        ColumnLayout {
            id: layout
            anchors.fill: parent
            spacing: 0

            // 用一个Item容器包裹阴影和目标矩形，控制层级
            Item {
                layout.fillWidth: true
                height: 60 // 这里设你需要的矩形高度

                // 阴影放在底层，source指向目标矩形
                DropShadow {
                    anchors.fill: targetRect
                    source: targetRect
                    color: "#77000000" // 半透明黑色阴影
                    radius: 6
                    samples: 12
                    spread: 0.15
                }

                // 你要显示的原矩形，放在阴影上层
                Rectangle {
                    id: targetRect
                    anchors.fill: parent
                    color: "#2196F3" // 自定义你的矩形颜色
                    // 可以加圆角之类的样式
                    radius: 4
                }
            }
        }
    }
}

这里的关键是：

• DropShadow和目标矩形是兄弟元素，放在同一个Item容器里
• DropShadow的source明确指向目标矩形的id，这样它只会渲染目标的阴影，不会自己生成矩形
• 渲染顺序是先加的元素在底层，所以DropShadow写在Rectangle前面，阴影就会在矩形下方

3. 排查ColumnLayout的布局问题 #

如果你的ColumnLayout里，不小心把同一个矩形组件添加了两次，或者layout的spacing、fillWidth等属性设置不当，导致元素被重复排列，也会出现两行矩形的情况。检查一下layout的子元素，确保只有一个你要显示的矩形容器。

4. 避免错误使用layer属性 #

如果你是用layer.enabled: true来实现阴影，要注意不要开启layer后又额外添加了元素。这种方式不如DropShadow直观，新手容易踩坑，更推荐用上面的DropShadow方案。

按照上面的方法调整后，应该就能去掉那个多余的白色矩形，只保留原矩形和它的阴影了。

内容的提问来源于stack exchange，提问作者T.Poe