QML: DropShadow duplicates the source rectangle - qt

Question

I'm trying to make my horizontal rectangle to drop a shadow. When I do it with the code below, the rectangle duplicates, so that there are two horizontal rectangles in two rows. It's shown in the image (the duplicated one is white). How can I get rid of the duplicated rectangle so that just the shadow and the original rectangle remain?
Window {
visible: true
width: 640
height: 480
color: "white"
Item {
anchors.fill: parent
ColumnLayout {
id: layout
anchors.fill: parent
spacing: 0
Rectangle {
id: bar
color: "blue"
height: 40
Layout.fillWidth: true
}
DropShadow {
anchors.fill: bar
horizontalOffset: 0
verticalOffset: 3
radius: 8.0
samples: 12
source: bar
color: "blue"
}
Rectangle {
Layout.fillHeight: true
Layout.preferredWidth: parent.width
color: "grey"
}
}
}
}

Answer 1

There is no duplicate rectangle, there is just a gap. You are using a layout, which will lay its containing items out based on their size. You do anchor the shadow to fill the rectangle, so that's where it is, but the layout is not supposed to be used in such a format, therefore it leaves an empty space where the shadow is supposed to go before placing the grey rectangle.
And the shadow doesn't show if you get rid of the gap because the grey rectangle is on top of it. Tinkering with the z value doesn't seem to help either. It might have to do with using a layout.
You can get the desired result if you get rid of the layout and use anchoring, which allows you to put the grey rectangle first, so it can be under the shadow.
Item {
anchors.fill: parent
Rectangle {
anchors.bottom: parent.bottom
anchors.top: bar.bottom
width: parent.width
color: "grey"
}
Column { // or you can put the layout here if you want
id: bar
anchors.top: parent.top
width: parent.width
Rectangle {
color: "blue"
height: 40
width: parent.width
}
// other stuff
}
DropShadow {
anchors.fill: bar
horizontalOffset: 0
verticalOffset: 3
radius: 8.0
samples: 12
source: bar
color: "blue"
}
}

Answer 2

Create DropShadow as Rectangle child:
Item {
ColumnLayout {
id: layout
anchors.fill: parent
spacing: 0
Rectangle {
id: bar
color: "blue"
height: 40
Layout.fillWidth: true
...
... // some buttons, images etc.
DropShadow {
anchors.fill: parent
horizontalOffset: 0
verticalOffset: 3
radius: 8.0
samples: 12
source: bar
color: "blue"
}
}
...
... // some other components to the layout ...
}
}
Also you can assign DropShadow object to layer.effect Property:
Item {
ColumnLayout {
id: layout
anchors.fill: parent
spacing: 0
Rectangle {
id: bar
color: "blue"
height: 40
Layout.fillWidth: true
...
... // some buttons, images etc.
layer.enabled: true // Set Layer for Enable
layer.effect: DropShadow {
horizontalOffset: 0
verticalOffset: 3
radius: 8.0
samples: 12
source: bar
color: "blue"
}
}
...
... // some other components to the layout ...
}
}