Qt 6.5 MultiEffect for shadow

[mzimmers]

Hi all -

Trying to use the (relatively) new MultiEffect to create a drop shadow on a rectangle, and I can't quite get it to work.

I want a simple drop shadow below the rectangle (nothing on the horizontal axis). Here's the code that gets me the closest to what I want:

Rectangle {
    id: rect
    property int rectHeight: 100
    property int rectWidth: 100
    property int rectRadius: 10
    property int shadowSize: 10
    x: 100
    y: 100
    height: rectHeight
    width: rectWidth
    radius: rectRadius
    color: 'lightblue'
}

MultiEffect {
    source: rect
    anchors.fill: rect
    autoPaddingEnabled: false
    paddingRect: Qt.rect(0, rect.rectRadius * (-1), rect.rectWidth, rect.rectHeight)
    shadowBlur: 1.0
    shadowColor: 'black'
    shadowEnabled: true
    shadowVerticalOffset: rect.shadowSize
}

And here's what I get:

Can someone clue me in on what I'm doing wrong?

Thanks...

[mzimmers]

I got this fixed - I set autoPaddingEnabled to true, and removed my paddingRect. Now seems to work property. Thanks to all who looked.

[Markkyboy]

@mzimmers - interesting. I've been wondering about the replacement for qtgraphicaleffects.

Pasting your code doesn't give me the same result, I can't get the shadow to show at all. I don't find any examples online either, for other effects yes, but not explicitly shadow.

I will keep playing when I have time and will post my findings.

[mzimmers]

@Markkyboy the example "MultiEffect Test Bed" has shadows. Like a lot of the Qt examples, it's a little hard to read, but maybe you can find what you're looking for there.

[mzimmers]

BTT.

Anyone have any ideas?

Thanks...

[petero3]

Hi @mzimmers
Is this the effect that you are looking for?
Blur radiates outwards.
Not sure if there is a specific way to make a blur effect be directional.
But can cheat by making a second rect, smaller than the original rect, and creating a shadow from that instead.
Probably want to tweak the x and width of the second rect.

Btw. does MultiEffect work in the Design mode of Qt Creator for you, or also only at runtime? See my thread here:
https://forum.qt.io/topic/145478/module-qtquick-effects-is-not-installed-in-design-mode-of-qt-creator

[mzimmers]

@petero3 interesting workaround. I opened a bug report on this last week; haven't heard anything. If they don't respond next week, I'll probably use your workaround.

Regarding design mode - I wasn't aware there was a way to look at QML code in design mode. In Creator, when I open a .qml file, the "Design" icon is disabled. How did you get into design mode?

Thanks...

[petero3]

Hi @mzimmers
Yes, not sure why it is a hidden feature.
To enable the Design button:
Select Help > About Plugins > Qt Quick > QmlDesigner.
https://doc.qt.io/qtcreator/creator-qtquickdesigner-plugin.html
Though for me, I only see the original rectangle, not the shadow. So I have to run your example to see the shadow instead.

[Markkyboy]

haha, I still cannot get a drop shadow despite using the code given. I have no idea what I'm missing.

The code compiles and a blue rectangle is displayed, but still no shadow.

[mzimmers]

I got this fixed - I set autoPaddingEnabled to true, and removed my paddingRect. Now seems to work property. Thanks to all who looked.

[ekkescorner]

@mzimmers thx for your example.
I used DropShadow on a customized Button with Image as content.
I had to add z:2 for the contentItem - otherwise the background was on top of the Image.
here's my example:

Button {
    id: button
    property alias imageSource: contentImage.source
    property alias backgroundColor: buttonBackground.color
    property bool showShadow: false
    focusPolicy: Qt.NoFocus
    contentItem:
        Item {
        z: 2 // without z:2 the Image is not visible !
        implicitHeight: 24
        implicitWidth: 24
        Image {
            id: contentImage
            anchors.centerIn: parent
        }
    }
    background:
        Rectangle {
        id: buttonBackground
        implicitWidth: 48
        implicitHeight: 48
        color: primaryColor
        radius: width / 2
        opacity: button.pressed ? 0.5 : 1.0
    }
    MultiEffect {
        source: buttonBackground
        anchors.fill: buttonBackground
        autoPaddingEnabled: true
        shadowBlur: 1.0
        shadowEnabled: button.showShadow
        shadowVerticalOffset: 3
        shadowHorizontalOffset: 1
        opacity: button.pressed ? 0.75 : 1.0
    }
}

[coconoriko]

If your shadow is cut off, I recommend to choose a bigger padding rect. What was a surprise for me - the x and y should be positive numbers if you want the rectangle to "wrap" top left corner too.
Try something like:

paddingRect: Qt.rect(100, 100, 300, 300)

The size should be as small as possible though, cause it affects performance.