使用MultiEffect为QML Popup添加阴影时出现异常边框问题

问题根源 #

用MultiEffect给Popup加投影时出现额外边框，是因为MultiEffect默认会渲染源的完整区域，而Popup的可视区域限制和Effect的锚定方式导致边缘出现多余渲染。下面是几个PyQt6完全兼容的解决办法：

方案1：修复MultiEffect的使用方式 #

调整Popup尺寸和Effect的锚定逻辑，给阴影留出空间并裁剪多余渲染：

import QtQuick
import QtQuick.Controls
import QtQuick.Effects

ApplicationWindow {
    width: 500
    height: 400
    visible: true
    color: "#E0E0E0"

    Button {
        text: "Open Popup"
        anchors.centerIn: parent
        onClicked: popup.open()
    }

    Popup {
        id: popup
        modal: true
        focus: true
        // 给阴影额外留出10px空间
        width: 200 + 10
        height: 150 + 10
        x: (parent.width - width) / 2
        y: (parent.height - height) / 2

        background: Item {
            anchors.fill: parent
            // 保持原尺寸的背景居中
            Rectangle {
                id: bg
                anchors.centerIn: parent
                width: 200
                height: 150
                color: "white"
                radius: 10
            }

            MultiEffect {
                anchors.fill: bg
                source: bg
                shadowEnabled: true
                shadowHorizontalOffset: 5
                shadowVerticalOffset: 5
                shadowRadius: 5
                shadowColor: "#80000000"
                // 开启源裁剪，避免边缘溢出
                sourceClip: true
            }
        }

        Column {
            anchors.centerIn: bg
            spacing: 10
            Text { text: "This is a popup" }
            Button { text: "Close"; onClicked: popup.close() }
        }
    }
}

方案2：用原生DropShadow特效（推荐） #

QtQuick.Effects里的DropShadow是Qt6原生支持的，不需要依赖Qt5Compat，效果和RectangularGlow接近：

import QtQuick
import QtQuick.Controls
import QtQuick.Effects

ApplicationWindow {
    width: 500
    height: 400
    visible: true
    color: "#E0E0E0"

    Button {
        text: "Open Popup"
        anchors.centerIn: parent
        onClicked: popup.open()
    }

    Popup {
        id: popup
        modal: true
        focus: true
        width: 200
        height: 150
        x: (parent.width - width) / 2
        y: (parent.height - height) / 2
        // 给阴影留出外边距，防止被Popup裁剪
        margins: 10

        background: Item {
            anchors.fill: parent
            Rectangle {
                id: bg
                anchors.fill: parent
                color: "white"
                radius: 10
            }

            DropShadow {
                anchors.fill: bg
                source: bg
                horizontalOffset: 5
                verticalOffset: 5
                radius: 8
                color: "#80000000"
                z: -1 // 把阴影放到背景下方
            }
        }

        Column {
            anchors.centerIn: parent
            spacing: 10
            Text { text: "This is a popup" }
            Button { text: "Close"; onClicked: popup.close() }
        }
    }
}

方案3：纯QML模拟阴影（无特效依赖） #

如果不想用Effects模块，直接用多层矩形模拟阴影，兼容性拉满：

import QtQuick
import QtQuick.Controls

ApplicationWindow {
    width: 500
    height: 400
    visible: true
    color: "#E0E0E0"

    Button {
        text: "Open Popup"
        anchors.centerIn: parent
        onClicked: popup.open()
    }

    Popup {
        id: popup
        modal: true
        focus: true
        width: 200
        height: 150
        // 阴影偏移后调整Popup位置
        x: (parent.width - width) / 2 + 3
        y: (parent.height - height) / 2 + 3
        margins: 10

        background: Item {
            anchors.fill: parent
            // 阴影层：偏移+半透明
            Rectangle {
                anchors.fill: parent
                color: "#40000000"
                radius: 10
                opacity: 0.3
                x: 2
                y: 2
            }
            // 白色前景背景
            Rectangle {
                anchors.fill: parent
                color: "white"
                radius: 10
            }
        }

        Column {
            anchors.centerIn: parent
            spacing: 10
            Text { text: "This is a popup" }
            Button { text: "Close"; onClicked: popup.close() }
        }
    }
}

内容的提问来源于stack exchange，提问作者DJMcMayhem