DropShadow with ItemDelegate background

Question

Distortion appears after adding DropShadow. Why do distortions appear?

QML ListView Distortions:

Or maybe there is another way to add shadow to the elements? Here is the application full code: main.qml - main delegate - propertiesview

delegate: PropertiesView {
            id: delegateElement
            anchors.left: parent.left
            anchors.leftMargin: 10
            anchors.right: parent.right
            anchors.rightMargin: 10

            background: Rectangle {
                id: elementDevice
                implicitWidth: 100
                implicitHeight: 40
                opacity: enabled ? 1 : 0.3
                color: delegateElement.down ? "#dddedf" : "#eeeeee"
            }

            DropShadow {
                anchors.fill: parent
                cached: true
                horizontalOffset: 3
                verticalOffset: 3
                radius: 8.0
                samples: 16
                color: "#80000000"
                source: parent
            }
        }
    }

Bibin Bibin · Accepted Answer · 2021-02-18T09:59:30

Try This

delegate: Item{
        anchors.left: parent.left
        anchors.leftMargin: 10
        anchors.right: parent.right
        anchors.rightMargin: 10
        implicitHeight: delegateElement.implicitHeight

        PropertiesView {
            id: delegateElement
            anchors.fill: parent
            smooth: true
            opacity:  0
            background: Rectangle {
                implicitHeight: 40
                opacity: enabled ? 1 : 0.3
                color: delegateElement.down ? "#dddedf" : "#eeeeee"
            }
        }

        DropShadow {
            anchors.fill: delegateElement
            source: delegateElement
            cached: true
            horizontalOffset: 3
            verticalOffset: 3
            radius: 8.0
            samples: 16
            color: "#80000000"

        }

    }

DropShadow with ItemDelegate background

1 Answers