Rectangle with both Linear gradient and drop shadow gives unexpected behaviour

[R_ram]

Hi Developers,

I'm trying to get some circular component having the colour gradient in a horizontal manner and having some shadow effects. I tried the below way but it's not as expected. Can someone explain why is it happening like this? Result image attached.

// Code goes here

import QtQuick 2.9
import QtQuick.Window 2.2
import QtQuick.Controls 2.1
import QtGraphicalEffects 1.0

Window {
    visible: true
    width: 680
    height: 480
    title: qsTr("LinearGradient")

    property real circularShape_width: 50
    property real circularShape_height: 50
    property color leftGradientColor: "#F0EFEE"
    property color rightGradientColor: "lightgrey"

    Row {
        anchors.centerIn: parent
        spacing: 20

        // Circular background with gradient
        Rectangle {
            id:rect
            width: circularShape_width
            height: circularShape_height
            radius: circularShape_height/2
            LinearGradient {
                source: rect
                anchors.fill: rect
                start: Qt.point(0, parent.height/2)
                end: Qt.point(width, parent.height/2)
                gradient: Gradient {
                    GradientStop { position: 0.0; color: leftGradientColor}
                    GradientStop { position: 1.0; color: rightGradientColor}
                }
            }
            layer.smooth: true
            layer.enabled: true
            layer.effect: DropShadow {
                color: "grey"
                transparentBorder: true
                horizontalOffset: 0
                verticalOffset: 2
            }
        }

        // Circular background without gradient
        Rectangle {
            width: circularShape_width
            height: circularShape_height
            radius: circularShape_height/2
            color: rightGradientColor
            layer.smooth: true
            layer.enabled: true
            layer.effect: DropShadow {
                color: "grey"
                transparentBorder: true
                horizontalOffset: 0
                verticalOffset: 2
            }
        }
    }
}

I can able to achieve this by using a normal gradient by rotating the Rectangle by 90degrees. But as per the intention of the linear gradient's usage same thing can be achieved. Or to achieve as expected any tweaks do we need to follow? Thanks in advance.

[Shrinidhi Upadhyaya]

Hi @R_ram , could you please send the expected image or expected result which you need?

[KillerSmath]

@R_ram

You cannot set the Source Parent of a LinearGradient as itself parent. It will cause a recursive redraw effect.

Further, Dropshahow effect causes a conflict with the gradient.

Solution: Separe your shape and effects and made into a common container.

import QtQuick.Controls 2.1
import QtGraphicalEffects 1.0

Window {
    visible: true
    width: 680
    height: 480
    title: qsTr("LinearGradient")

    property real circularShape_width: 50
    property real circularShape_height: 50
    property color leftGradientColor: "#F0EFEE"
    property color rightGradientColor: "lightgrey"

    Row {
        anchors.centerIn: parent
        spacing: 20

        // Circular background with gradient

        // Item Container
        Item{
            width: circularShape_width
            height: circularShape_height

            // Shape Item -> Container Item
            Rectangle {
                visible: false
                id: rect
                anchors.fill: parent
                radius: height/2
            }

            // Gradient Item -> Shape Item
            LinearGradient {
                id: mask
                source: rect
                anchors.fill: parent
                start: Qt.point(0, rect.height/2)
                end: Qt.point(rect.width, rect.height/2)
                gradient: Gradient {
                    GradientStop { position: 0.0; color: leftGradientColor}
                    GradientStop { position: 1.0; color: rightGradientColor}
                }
            }

            // Shadow Effect -> Container Item
            layer.smooth: true
            layer.enabled: true
            layer.effect: DropShadow {
                color: "grey"
                transparentBorder: true
                horizontalOffset: 0
                verticalOffset: 2
            }
        }

        // Circular background without gradient
        Rectangle {
            width: circularShape_width
            height: circularShape_height
            radius: circularShape_height/2
            color: rightGradientColor
            layer.smooth: true
            layer.enabled: true
            layer.effect: DropShadow {
                color: "grey"
                transparentBorder: true
                horizontalOffset: 0
                verticalOffset: 2
            }
        }
    }
}

Note: LinearGradient's parent is not the shape (rect).

[KillerSmath]

@R_ram
If you have no other issues related to the same topic, please change the topic to solved mode because other people can benefit of it.

[R_ram]

Hi @KillerSmath ,

Thanks for your solution. It worked.