qtqmlqtquick2

How to create drop shadow for Rectangle on QtQuick 2.0


How can i draw a drop shadow for a Rectangle visual item on QtQuick 2.0?
I like to draw a drop shadow for my main window (I have a transparent and no-decorated window)


Solution

  • As a workaround for the clipped shadow issue, you can put your Rectangle in an Item, with additionnal margin to take blur radius in account, and apply shadow on that container:

    import QtQuick 2.0
    import QtGraphicalEffects 1.0
    
    Item {
        width: 320
        height: 240
    
        Item {
            id: container
            anchors.centerIn: parent
            width:  rect.width  + (2 * rectShadow.radius)
            height: rect.height + (2 * rectShadow.radius)
            visible: false
    
            Rectangle {
                id: rect
                width: 100
                height: 50
                color: "orange"
                radius: 7
                antialiasing: true
                border {
                    width: 2
                    color: "red"
                }
                anchors.centerIn: parent
            }
        }
    
        DropShadow {
            id: rectShadow
            anchors.fill: source
            cached: true
            horizontalOffset: 3
            verticalOffset: 3
            radius: 8.0
            samples: 16
            color: "#80000000"
            smooth: true
            source: container
        }
    }