Layer effect with DropShadow makes the text blurred.

[R_ram]

Hello developers,

The combination of Item layer with drop shadow makes the text blurred inside the item. But I need DropShadow for the item component.

import QtQuick 2.9
import QtQuick.Controls 2.2
import QtGraphicalEffects 1.0

Item {
    width: 170 * uiScale
    height: 144 * uiScale

    MouseArea {
        anchors.fill: parent
    }

    layer.enabled: true
    layer.effect: DropShadow {
        color: "#20000000"
        verticalOffset: 2
        horizontalOffset: 0
        radius: rect.radius
    }

    Item {
        anchors.fill: parent
        anchors.margins: 5
        Rectangle {
            id: rect
            anchors.fill: parent
            color: "#FCFCFC"
            border.color: "#EEEEEE"
            radius: 5

            Column {
                spacing: 5
                anchors.centerIn: parent
                Label {
                    color: "#666666"
                    text: qsTr("hello")
                }
                Label {
                    color: "#666666"
                    text: qsTr("how are you")
                }
            }
        }
    }
}

How to give layer effects without makes the text blurred.

Thanks in advance.

[ODБOï]

@R_ram hi,
This must be a bug.

If i declare one component and instanciate it 2 times with a loader, i get one with blured text and the other without, there is no apparent reason for this...

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

Window {
    visible: true
    width: 640
    height: 480
    title: qsTr("Hello World")
    property real uiScale: 1.22

    Component{
        id:it
        Item {
            width: 170 * uiScale
            height: 144 * uiScale

            MouseArea {
                anchors.fill: parent
            }

            layer.enabled: true
            layer.effect: DropShadow {
                color: "#20000000"
                verticalOffset: 2
                horizontalOffset: 0
                radius: rect.radius
            }

                Rectangle {
                    id: rect
                    anchors.fill: parent
                    color: "#FCFCFC"
                    border.color: "#EEEEEE"
                    radius: 5

                    Column {
                        spacing: 5
                        anchors.centerIn: parent
                        Label {
                            color: "#666666"
                            text: qsTr("hello")
                            font.pixelSize: 15 * uiScale
                        }
                        Label {
                            color: "#666666"
                            text: qsTr("how are you")
                            font.pixelSize: 15 * uiScale
                        }
                    }
            }
        }
    }

    Loader{ // no blured text 
        id:c1
        sourceComponent: it
    }
    Loader{ // blured text
        id:c2
        anchors.left: c1.right
        sourceComponent: it
    }
}

w7 , qt 5.12.2 mingw32

[R_ram]

@LeLev Hi, Thanks for your reply.
If this is a bug is there any workaround to get the same(shadow effect)? Please let me know if anything there.

I have gone through this post in StackOverflow. I couldn't able to get that what that means. Will this helpful in the above case?