QML: DropShadow duplicates the source rectangle

1
votes

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

2
qtqmlshadow
I get the following: imgur.com/a/IAoXy, and I do not observe the problem, in these cases it is necessary that you provide a minimal reproducible example – eyllanesc
@eyllanesc Don't you have white background? The duplicated rectangle is white, although the original rectangle in my example is blue and the background is grey. – T.Poe
Maybe the previous image was not adequate, but this image is more descriptive: imgur.com/a/SmY1i – eyllanesc
Yes I see, I'll try to add more to the code in the question then. – T.Poe
Test that the code that shows reproduces your error. – eyllanesc

2 Answers

2
votes

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

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