QML DropShadow sometimes renders badly - qt

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

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

Answer 2

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()
}
}
}
}