Search code examples
qtqmlshadow

QML: DropShadow duplicates the source rectangle

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"
            }

        }
    }
}

enter image description here

Solution

  • 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"
    }
  }