QML DropShadow sometimes renders badly

Question

I am using QML's inbuilt DropShadow type (import QtGraphicalEffects) to generate a shadow of some rectangles that are contained within an Item. The DropShadow is also a child of said Item. But sometimes the shadow is rendered very badly. I am dynamically creating the screen and adding it to a SwipeView; the code is as follows:

swipeView.addItem(tasksScreen.createObject(swipeView))
swipeView.incrementCurrentIndex()

"tasksScreen" is the screen that the rectangles and DropShadow are part of. The following video depicts the issue and the code that generates this behavior:

https://yadi.sk/i/mwl_8IZmm_jetQ

Answer 1

The problem is the source property in your code you have set the source as the parent item in your code. Give the source as your visual object(Rectangle). I have attached the code for your reference.

import QtQuick 2.9
import QtQuick.Window 2.2
import QtQuick.Controls 2.2
import QtGraphicalEffects 1.0

Window {
    visible: true
    width: 640
    height: 480
    title: qsTr("Hello World")

    Component {
        id: swipeviewComponentId
        Item {
            id: itemId
            Rectangle {
                id: rectangleId
                anchors.fill: parent
                anchors.margins: 10
                radius: 10
            }
            DropShadow {
                anchors.fill: source
                horizontalOffset: 3
                verticalOffset: 3
                radius: 8.0
                samples: 17
                color: "#80000000"
                source: rectangleId
            }
        }
    }

    Column {
        anchors.fill: parent
        anchors.margins: 10
        spacing: 10

        SwipeView {
            id: swipeViewId
            width: parent.width
            height: parent.height - addButtonId.height - (2 * parent.spacing) - pageIndicatorId.height
        }

        PageIndicator {
            id: pageIndicatorId
            currentIndex: swipeViewId.currentIndex
            count: swipeViewId.count
            anchors.horizontalCenter: parent.horizontalCenter
        }

        Button {
            id: addButtonId
            width: parent.width
            height: 40
            text: "Add item"
            onClicked: {
                swipeViewId.addItem(swipeviewComponentId.createObject(swipeViewId,
                                                                      {height: swipeViewId.height, width: swipeViewId.width}))
                swipeViewId.incrementCurrentIndex()
            }
        }
    }
}

Answer 2

I believe the issue is you are making the DropShadow a child of its source - which is creating a looping dependency.

Instead, try making it a sibling of your Item or even better, set it up as your Item's layer.effect.

You can see these different techniques in the DropShadow documentation:

https://doc.qt.io/qt-5/qml-qtgraphicaleffects-dropshadow.html